zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

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

zio/stable
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_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

16
plugins/pwa.client.ts
View File

@ -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,6 +60,10 @@ export default defineNuxtPlugin(() => {
needRefresh.value = false needRefresh.value = false
} }
let install: () => Promise<void> = () => Promise.resolve()
let cancelInstall: () => void = noop
if (!hideInstall.value) {
type InstallPromptEvent = Event & { type InstallPromptEvent = Event & {
prompt: () => void prompt: () => void
userChoice: Promise<{ outcome: 'dismissed' | 'accepted' }> userChoice: Promise<{ outcome: 'dismissed' | 'accepted' }>
@ -76,13 +82,14 @@ export default defineNuxtPlugin(() => {
showInstallPrompt.value = false showInstallPrompt.value = false
}) })
const cancelInstall = () => { cancelInstall = () => {
deferredPrompt = undefined deferredPrompt = undefined
showInstallPrompt.value = false showInstallPrompt.value = false
window.removeEventListener('beforeinstallprompt', beforeInstallPrompt) window.removeEventListener('beforeinstallprompt', beforeInstallPrompt)
hideInstall.value = true
} }
const install = async () => { install = async () => {
if (!showInstallPrompt.value || !deferredPrompt) { if (!showInstallPrompt.value || !deferredPrompt) {
showInstallPrompt.value = false showInstallPrompt.value = false
return return
@ -91,9 +98,8 @@ export default defineNuxtPlugin(() => {
showInstallPrompt.value = false showInstallPrompt.value = false
await nextTick() await nextTick()
deferredPrompt.prompt() deferredPrompt.prompt()
const { outcome } = await deferredPrompt.userChoice await deferredPrompt.userChoice
if (outcome === 'dismissed') }
cancelInstall()
} }
return { return {