Napoleon's Pixelated Mugshot
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@progressivewebcomponents/pwa-install

0.1.0 • Public • Published

Published on NPM Published on webcomponents.org

<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

Install

npm i @progressivewebcomponents/pwa-install

DownloadsWeekly Downloads

28

Version

0.1.0

License

Apache-2.0

Unpacked Size

77.7 kB

Total Files

16

Last publish

Collaborators

  • avatar