/vue-pwa-install-prompt

PWA Install Prompt For Vue3. (Not supported Vue2)

Primary LanguageTypeScript

vue-pwa-install-prompt

PWA Install Prompt For Vue3. (Not supported Vue2)

Install

npm i @d-gs/vue-pwa-install-prompt

Usage

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>