<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.
Install
npm i @joaobelotwt/pwa-install
Alternatively, you can use unpkg.
Import
import '@joaobelotwt/pwa-install';
Use
<pwa-install></pwa-install>
Supported params
<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"
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>
getInstalledRelatedApps is Chromium only, always empty on iOS.
Supported localization
At this time EN, PT, RU, TR, DE, ES and NL languages available. 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.
- Define proper locale code for your language.
- Find
lit-localize.json
config file and add new lang code to targetLocales. - Execute
npm run localize
to generate XLF file for new language. - Find new file in
i18n
folder. - Do translation inside
<target>
tags below<source>
tag of each string. - Execute
npm run localize-build
to generate new locale files.- - Find
/src/localization/index.ts
and import new locale like the rest of the languages. - Execute
npm run build
to update bundle and prepare changes for pull request.
ROADMAP
- style customization