vue-pwa-install

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>