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

iPadOS

Android	App gallery	White theme

Chrome	App Gallery

npm i @khmyznikov/pwa-install

Alternatively, you can use unpkg.

import '@khmyznikov/pwa-install';

<pwa-install></pwa-install>

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

  install-description="Custom call to install text"
  disable-install-description="true"

  manifest-url="/manifest.json"
  name="PWA"
  description="Progressive web application"         
  icon="/icon.png">
</pwa-install>
<!-- 
  manual-apple/chrome params means you want to show the Dialog manually by showDialog().
  disable-chrome param is for completely disabling custom logic and interception for Chominum browsers (will work built-in browser logic).
--->

Make a good manifest file and don't use name/descr/icon params. Boolean attributes needs to be removed to act like "false"

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

⚠️ success/fail/choice events is Chromium only, iOS don't have them.

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

• install
• hideDialog
• showDialog
• getInstalledRelatedApps: async

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

  pwaInstall.install();
</script>

getInstalledRelatedApps is Chromium only, always empty on iOS.

Translations available:

• EN
• RU
• TR
• DE
• ES
• NL
• EL
• FR
• SR
• PL
• ZH/ZH-CN
• IT

Language should change automatically based on browser settings. Please create the pull-request if you want to help with translation to your language. It's an easy process.

Contribution Guidelines

• style customization