@khmyznikov/pwa-install

<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.

Gallery

iOS default	Install instruction	App gallery

iPadOS

Android	App gallery	White theme

Chrome	App 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