pwa.ts 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. // Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/
  2. import { computed, shallowRef } from 'vue'
  3. export const isStandalone: boolean =
  4. (('standalone' in window.navigator &&
  5. window.navigator.standalone) as boolean) ||
  6. window.matchMedia('(display-mode: standalone)').matches
  7. interface InstallEvent extends Event {
  8. prompt(): Promise<void>
  9. userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>
  10. }
  11. const deferredPrompt = shallowRef<InstallEvent | null>(null)
  12. export const usePWASupport = () => {
  13. const canInstallPWA = computed(() => deferredPrompt.value !== null)
  14. const installPWA = async () => {
  15. if (!deferredPrompt.value) return
  16. deferredPrompt.value.prompt()
  17. const { outcome } = await deferredPrompt.value.userChoice
  18. if (outcome === 'accepted') {
  19. deferredPrompt.value = null
  20. }
  21. }
  22. return {
  23. canInstallPWA,
  24. installPWA,
  25. }
  26. }
  27. export const registerPWAHooks = () => {
  28. // this only works in Chrome, for iOS Safari users have to do it manually
  29. // for iOS we are showing a short guide on how to do it
  30. window.addEventListener('beforeinstallprompt', (e) => {
  31. deferredPrompt.value = e as InstallEvent
  32. })
  33. window.addEventListener('appinstalled', () => {
  34. deferredPrompt.value = null
  35. })
  36. }
  37. if (import.meta.env.DEV) {
  38. import('./testSw')
  39. }