Socket
Socket
Sign inDemoInstall

vue-pwa-install

Package Overview
Dependencies
21
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    vue-pwa-install

Vue PWA Install


Version published
Weekly downloads
319
decreased by-3.04%
Maintainers
1
Install size
29.5 kB
Created
Weekly downloads
 

Readme

Source

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>

Keywords

FAQs

Last updated on 03 May 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc