@progressivewebcomponents/pwa-install

<pwa-install>

Progressive web apps install (add to home screen) vanilla web component.

Install

npm i @progressivewebcomponents/pwa-install

Install web components polyfills (needed for older browsers):

npm i -D @webcomponents/webcomponentsjs

Alternatively, you can use unpkg.

Import

Load web components polyfill (if needed):

<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

In JS files

import '../node_modules/@progressivewebcomponents/pwa-install/pwa-install.js';

In HTML files

ES Modules (recommended)

<script type="module" src="../node_modules/@progressivewebcomponents/pwa-install/pwa-install.js"></script>

HTML Imports (deprecated)

<link rel="import" href="../node_modules/@progressivewebcomponents/pwa-install/pwa-install.html">

getInstalledRelatedApps

https://developers.chrome.com/origintrials/#/view_trial/855683929200394241

chrome://flags/#enable-experimental-web-platform-features

Use

Polymer

<pwa-install
  id="a2hs"

  available="{{installAvailable}}"
  platforms="{{platforms}}"
  choice-result="{{choiceResult}}"
  supported="{{relatedAppsSupported}}"
  related-apps="{{relatedApps}}"

  on-pwa-install-available="handlePWAInstallAvailable"
  on-pwa-install-install="handlePWAInstall"
  on-pwa-install-installed="handlePWAInstalled"
  on-pwa-install-error="handlePWAInstallError"

  on-available-changed="handleAvailableChanged"
  on-platforms-changed="handlePlatformsChanged"
  on-choice-result-changed="handleChoiceResultChanged"
  on-supported-changed="handleSupportedChanged"
  on-related-apps-changed="handleRelatedAppsChanged">
</pwa-install>

const pwaInstall = this.$.a2hs;

pwaInstall.install();

pwaInstall.getInstalledRelatedApps();

LitHTML/LitElement

<pwa-install
  id="a2hs"

  @pwa-install-available="${this.handlePWAInstallAvailable}"
  @pwa-install-install="${this.handlePWAInstall}"
  @pwa-install-installed="${this.handlePWAInstalled}"
  @pwa-install-error="${this.handlePWAInstallError}"

  @available-changed="${this.handleAvailableChanged}"
  @platforms-changed="${this.handlePlatformsChanged}"
  @choice-result-changed="${this.handleChoiceResultChanged}"
  @supported-changed="${this.handleSupportedChanged}"
  @related-apps-changed="${this.handleRelatedAppsChanged}">
</pwa-install>

const pwaInstall = this.shadowRoot.getElementById('a2hs');

pwaInstall.install();

pwaInstall.getInstalledRelatedApps();

Vanilla (without any frameworks/libraries)

<pwa-install id="a2hs"></pwa-install>

const pwaInstall = document.getElementById('a2hs');

pwaInstall.addEventListener('pwa-install-available', handlePWAInstallAvailable);
pwaInstall.addEventListener('pwa-install-install', handlePWAInstallInstall);
pwaInstall.addEventListener('pwa-install-installed', handlePWAInstallInstalled);
pwaInstall.addEventListener('pwa-install-error', handlePWAInstallError);

pwaInstall.addEventListener('available-changed', handleAvailableChanged);
pwaInstall.addEventListener('platforms-changed', handlePlatformsChanged);
pwaInstall.addEventListener('choice-result-changed', handleChoiceResultChanged);
pwaInstall.addEventListener('supported-changed', handleSupportedChanged);
pwaInstall.addEventListener('related-apps-changed', handleRelatedAppsChanged);

pwaInstall.install();

pwaInstall.getInstalledRelatedApps();

Full live demo (source code)

Google Analytics

handlePWAInstallAvailable() {
  if (window.ga) {
    ga('send', 'event', 'pwa-install', 'available', this.platforms);
  }
}

handlePWAInstallInstall() {
  if (window.ga) {
    ga('send', 'event', 'pwa-install', this.choiceResult.outcome, this.choiceResult.platform);
  }
}

handlePWAInstallInstalled() {
  if (window.ga) {
    ga('send', 'event', 'pwa-install', 'installed', this.choiceResult.platform);
  }
}

handlePWAInstallError() {
  if (window.ga) {
    ga('send', 'event', 'pwa-install', 'error', this.choiceResult.platform);
  }
}

Further reading

Patterns for Promoting PWA Installation (mobile)

Detect if your Native app is installed from your web site