Skip to content

Vue.js plugin/mixin that allows you to listen for "beforeinstallprompt" event painlessly in your application.

License

Notifications You must be signed in to change notification settings

Bartozzz/vue-pwa-install

Repository files navigation

Vue PWA Install

Default CI/CD Known Vulnerabilities npm version npm dependency Status npm downloads

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>