Vue PWA Install

This library allows you to listen for beforeinstallprompt event painlessly in your Vue.js application. It comes handy when you're building offline-first Progressive Web Apps and want to display a custom "Add to home screen" banner on you web app. Adds canInstall event via a global mixin. Exposes useful TypeScript definitions.

Installation

$ npm install vue-pwa-install

Usage

As a plugin

VuePwaInstallMixin will be injected into every component.

import VuePwaInstallPlugin from "vue-pwa-install";
 
Vue.use(VuePwaInstallPlugin);

As a mixin

You can inject VuePwaInstallMixin manually directly into your components.

import { VuePwaInstallMixin } from "vue-pwa-install";
 
export default {
  mixins: [VuePwaInstallMixin],
};

Inside a component

<template>
  <button v-if="deferredPrompt" @onClick="promptInstall">
    Add to home screen
  </button>
</template>
 
<script lang="ts">
  import { Component, Vue } from "vue-property-decorator";
  import { BeforeInstallPromptEvent } from "vue-pwa-install";
 
  @Component({})
  export default class App extends Vue {
    deferredPrompt: BeforeInstallPromptEvent | void;
 
    promptInstall() {
      // Show the prompt:
      this.deferredPrompt.prompt();
 
      // Wait for the user to respond to the prompt:
      this.deferredPrompt.userChoice.then((choiceResult) => {
        if (choiceResult.outcome === "accepted") {
          console.log("User accepted the install prompt");
        } else {
          console.log("User dismissed the install prompt");
        }
 
        this.deferredPrompt = null;
      });
    }
 
    created() {
      this.$on("canInstall", (event: BeforeInstallPromptEvent) => {
        // Prevent Chrome 67 and earlier from automatically showing the prompt:
        event.preventDefault();
 
        // Stash the event so it can be triggered later:
        this.deferredPrompt = event;
      });
    }
  }
</script>