Vue.js plugin/mixin that allows you to listen for "beforeinstallprompt" event painlessly in your application.
MIT License
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.
$ npm install vue-pwa-install
VuePwaInstallMixin
will be injected into every component.
import VuePwaInstallPlugin from "vue-pwa-install";
Vue.use(VuePwaInstallPlugin);
You can inject VuePwaInstallMixin
manually directly into your components.
import { VuePwaInstallMixin } from "vue-pwa-install";
export default {
mixins: [VuePwaInstallMixin],
};
<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>