JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 35019
  • Score
    100M100P100Q160939F
  • License Unlicense

PWA install dialog provide more convenience user experience and fix lack of native dialogs in some browsers.

Package Exports

  • @khmyznikov/pwa-install
  • @khmyznikov/pwa-install/dist/es/pwa-install.es.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@khmyznikov/pwa-install) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Published on NPM npm

<pwa-install>

Installation dialog for Progressive web application. Provides more convenience user experience and fix lack of native dialogs in some browsers. 13.5kB brotli compressed bundle. Translation/localization is supported.

Use it as Web Component with any modern framework. No polyfill is required.

iOS default       Install instruction App gallery       
iOS example default iOS example install instruction iOS example gallery
iPadOS
iPadOS example white
Android App gallery   White theme  
Android example default Android example gallery Android example white
Chrome  App Gallery  
Chrome example default Chrome example gallery

Install

npm i @khmyznikov/pwa-install

Alternatively, you can use unpkg.

Import

import '@khmyznikov/pwa-install';

Use

<pwa-install></pwa-install>

Demo

Supported params

<pwa-install
  manual-apple="true"
  manual-chrome="true"
  disable-chrome="true"

  manifest-url="/manifest.json"
  name="PWA"
  description="Progressive web application"
  install-description="Custom call to install text"           
  icon="/icon.png">
</pwa-install>

Make a good manifest file and don't use name/descr/icon params

Supported events

  • pwa-install-success-event
  • pwa-install-fail-event
  • pwa-install-available-event
  • pwa-user-choice-result-event
<script type="text/javascript">
  var pwaInstall = document.getElementsByTagName('pwa-install')[0];

  pwaInstall.addEventListener('pwa-install-success-event', (event) => {console.log(event.detail.message)});
</script>

Supported properties (readonly)

  • userChoiceResult: string;
  • isDialogHidden: boolean
  • isInstallAvailable: boolean
  • isAppleMobilePlatform: boolean
  • isUnderStandaloneMode: boolean
  • isRelatedAppsInstalled: boolean
<script type="text/javascript">
  var pwaInstall = document.getElementsByTagName('pwa-install')[0];

  console.log(pwaInstall.isUnderStandaloneMode);
</script>

Supported methods

  • install
  • hideDialog
  • showDialog
  • getInstalledRelatedApps: async
<script type="text/javascript">
  var pwaInstall = document.getElementsByTagName('pwa-install')[0];

  pwaInstall.install();
</script>

Supported localization

At this time EN and RU languages available. Language should change automatically based on browser settings. Please create the issue if you want to help with translation to your language. It an easy process.

ROADMAP

  • style customization