JSPM

<pwa-install>

New to PWAs? Unsure how to create a Web App? Check out these resources for a quick start: PWA Intro, PWA Starter, PWA Builder

Installation dialog for Progressive Web Application (PWA) and Add to Home Screen/Dock dialog for Web Apps. This offers an enhanced user experience and addresses the absence of native dialogs in certain browsers. 20kB brotli compressed bundle. Translation/localization is supported.

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

Demo

Gallery

iOS default	Install instruction	App gallery

MacOS 14+ (Sonoma)	Install instruction

iPadOS

Android	App gallery	Light 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"

  install-description="Custom call to install text"
  disable-install-description="true"
  disable-screenshots="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"

Supported events

• pwa-install-success-event
• pwa-install-fail-event
• pwa-install-available-event
• pwa-user-choice-result-event
• pwa-install-how-to-event
• pwa-install-gallery-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.

Supported properties (readonly)

• userChoiceResult: string;
• isDialogHidden: boolean
• isInstallAvailable: boolean
• isAppleMobilePlatform: boolean
• isAppleDesktopPlatform: 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>

getInstalledRelatedApps is Chromium only, always empty on iOS.

Supported localization

Translations available:

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

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

ROADMAP

• support async load with external beforeinstallprompt catcher
• legacy react wrap
• style customization