teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat(pwa): don't show install widget if cancelled from widget (#1459)

Browse source
This commit is contained in:
Joaquín Sánchez 2023-01-26 21:30:39 +01:00 committed by GitHub
parent d26510a766
commit 901463301c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
constants/index.ts
View file

@ -18,6 +18,7 @@ export const STORAGE_KEY_HIDE_EXPLORE_NEWS_TIPS = 'elk-hide-explore-news-tips'
export const STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS = 'elk-hide-explore-tags-tips'
export const STORAGE_KEY_NOTIFICATION = 'elk-notification'
export const STORAGE_KEY_NOTIFICATION_POLICY = 'elk-notification-policy'
export const STORAGE_KEY_PWA_HIDE_INSTALL = 'elk-pwa-hide-install'
export const COOKIE_MAX_AGE = 10 * 365 * 24 * 60 * 60 * 1000

72
plugins/pwa.client.ts
View file

@ -1,10 +1,12 @@
import { useRegisterSW } from 'virtual:pwa-register/vue'
import { STORAGE_KEY_PWA_HIDE_INSTALL } from '~/constants'
export default defineNuxtPlugin(() => {
const online = useOnline()
const registrationError = ref(false)
const swActivated = ref(false)
const showInstallPrompt = ref(false)
const hideInstall = useLocalStorage(STORAGE_KEY_PWA_HIDE_INSTALL, false)
// https://thomashunter.name/posts/2021-12-11-detecting-if-pwa-twa-is-installed
const ua = navigator.userAgent
@ -58,42 +60,46 @@ export default defineNuxtPlugin(() => {
needRefresh.value = false
}
type InstallPromptEvent = Event & {
prompt: () => void
userChoice: Promise<{ outcome: 'dismissed' | 'accepted' }>
}
let install: () => Promise<void> = () => Promise.resolve()
let cancelInstall: () => void = noop
let deferredPrompt: InstallPromptEvent | undefined
const beforeInstallPrompt = (e: Event) => {
e.preventDefault()
deferredPrompt = e as InstallPromptEvent
showInstallPrompt.value = true
}
window.addEventListener('beforeinstallprompt', beforeInstallPrompt)
window.addEventListener('appinstalled', () => {
deferredPrompt = undefined
showInstallPrompt.value = false
})
const cancelInstall = () => {
deferredPrompt = undefined
showInstallPrompt.value = false
window.removeEventListener('beforeinstallprompt', beforeInstallPrompt)
}
const install = async () => {
if (!showInstallPrompt.value || !deferredPrompt) {
showInstallPrompt.value = false
return
if (!hideInstall.value) {
type InstallPromptEvent = Event & {
prompt: () => void
userChoice: Promise<{ outcome: 'dismissed' | 'accepted' }>
}
showInstallPrompt.value = false
await nextTick()
deferredPrompt.prompt()
const { outcome } = await deferredPrompt.userChoice
if (outcome === 'dismissed')
cancelInstall()
let deferredPrompt: InstallPromptEvent | undefined
const beforeInstallPrompt = (e: Event) => {
e.preventDefault()
deferredPrompt = e as InstallPromptEvent
showInstallPrompt.value = true
}
window.addEventListener('beforeinstallprompt', beforeInstallPrompt)
window.addEventListener('appinstalled', () => {
deferredPrompt = undefined
showInstallPrompt.value = false
})
cancelInstall = () => {
deferredPrompt = undefined
showInstallPrompt.value = false
window.removeEventListener('beforeinstallprompt', beforeInstallPrompt)
hideInstall.value = true
}
install = async () => {
if (!showInstallPrompt.value || !deferredPrompt) {
showInstallPrompt.value = false
return
}
showInstallPrompt.value = false
await nextTick()
deferredPrompt.prompt()
await deferredPrompt.userChoice
}
}
return {