@khmyznikov/pwa-install

<pwa-install>

Installation dialog for Progressive web component. Provides more convenience user experience and fix lack of native dialogs in some browsers. 13.5kB brotli compressed bundle.

Gallery

iOS	iOS install	iOS gallery
Android	Android gallery	Dark theme

Chrome	Chrome gallery

Install

npm i @khmyznikov/pwa-install

Alternatively, you can use unpkg.

Import

import '../node_modules/@khmyznikov/pwa-install/dist/bundle.js';

Use

<pwa-install></pwa-install>

Demo

Supported params

<pwa-install       
  manifest-url="/manifest.json"
  name="PWA"
  description="Progressive web application"
  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>

ROADMAP

• more params/methods/events
• translation
• manual mode
• style customization