mirror of
https://github.com/elk-zone/elk.git
synced 2024-09-06 12:19:08 +01:00
feat(pwa): don't show install widget if cancelled from widget (#1459)
This commit is contained in:
parent
d26510a766
commit
901463301c
2 changed files with 40 additions and 33 deletions
|
@ -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_HIDE_EXPLORE_TAGS_TIPS = 'elk-hide-explore-tags-tips'
|
||||||
export const STORAGE_KEY_NOTIFICATION = 'elk-notification'
|
export const STORAGE_KEY_NOTIFICATION = 'elk-notification'
|
||||||
export const STORAGE_KEY_NOTIFICATION_POLICY = 'elk-notification-policy'
|
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
|
export const COOKIE_MAX_AGE = 10 * 365 * 24 * 60 * 60 * 1000
|
||||||
|
|
||||||
|
|
|
@ -1,10 +1,12 @@
|
||||||
import { useRegisterSW } from 'virtual:pwa-register/vue'
|
import { useRegisterSW } from 'virtual:pwa-register/vue'
|
||||||
|
import { STORAGE_KEY_PWA_HIDE_INSTALL } from '~/constants'
|
||||||
|
|
||||||
export default defineNuxtPlugin(() => {
|
export default defineNuxtPlugin(() => {
|
||||||
const online = useOnline()
|
const online = useOnline()
|
||||||
const registrationError = ref(false)
|
const registrationError = ref(false)
|
||||||
const swActivated = ref(false)
|
const swActivated = ref(false)
|
||||||
const showInstallPrompt = 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
|
// https://thomashunter.name/posts/2021-12-11-detecting-if-pwa-twa-is-installed
|
||||||
const ua = navigator.userAgent
|
const ua = navigator.userAgent
|
||||||
|
@ -58,42 +60,46 @@ export default defineNuxtPlugin(() => {
|
||||||
needRefresh.value = false
|
needRefresh.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
type InstallPromptEvent = Event & {
|
let install: () => Promise<void> = () => Promise.resolve()
|
||||||
prompt: () => void
|
let cancelInstall: () => void = noop
|
||||||
userChoice: Promise<{ outcome: 'dismissed' | 'accepted' }>
|
|
||||||
}
|
|
||||||
|
|
||||||
let deferredPrompt: InstallPromptEvent | undefined
|
if (!hideInstall.value) {
|
||||||
|
type InstallPromptEvent = Event & {
|
||||||
const beforeInstallPrompt = (e: Event) => {
|
prompt: () => void
|
||||||
e.preventDefault()
|
userChoice: Promise<{ outcome: 'dismissed' | 'accepted' }>
|
||||||
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
|
|
||||||
}
|
}
|
||||||
|
|
||||||
showInstallPrompt.value = false
|
let deferredPrompt: InstallPromptEvent | undefined
|
||||||
await nextTick()
|
|
||||||
deferredPrompt.prompt()
|
const beforeInstallPrompt = (e: Event) => {
|
||||||
const { outcome } = await deferredPrompt.userChoice
|
e.preventDefault()
|
||||||
if (outcome === 'dismissed')
|
deferredPrompt = e as InstallPromptEvent
|
||||||
cancelInstall()
|
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 {
|
return {
|
||||||
|
|
Loading…
Reference in a new issue