0.1.6 • Published 2 years ago
@d-gs/vue-pwa-install-prompt v0.1.6
vue-pwa-install-prompt
PWA Install Prompt For Vue3. (Not supported Vue2)
Install
npm i @d-gs/vue-pwa-install-promptUsage
In index.html
<head>
...
<link rel="manifest" href="/manifest.webmanifest" />
</head>In app.ts
import { pluginPwaInstallPrompt } from '@d-gs/vue-pwa-install-prompt'
app.use(pluginPwaInstallPrompt)In App.vue
<script lang="ts" setup>
import { usePwaInstallPrompt } from '@d-gs/vue-pwa-install-prompt'
import type { BeforeInstallPromptEvent } from '@d-gs/vue-pwa-install-prompt'
const pwaInstallPrompt = usePwaInstallPrompt()
// Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then((reg) => {
reg.onupdatefound = () => {
reg.update()
}
})
window.addEventListener('beforeinstallprompt', (event) => {
event.preventDefault()
pwaInstallPrompt.actions.setInstallPromptEvent(event as BeforeInstallPromptEvent)
})
}
</script>In Comp.vue
<script lang="ts" setup>
import { usePwaInstallPrompt } from '@d-gs/vue-pwa-install-prompt'
const pwaInstallPrompt = usePwaInstallPrompt()
const showPrompt = async () => {
const outcome = await pwaInstallPrompt.actions.showPrompt()
// outcome: 'accepted' | 'dismissed' | undefined
if (outcome === 'accepted') {
// Do something
return
}
if (outcome === 'dismissed') {
// Do something
return
}
}
</script>