Quasar PWA Installer

PWA installer is a Quasar App Extension aimed at PWA developers looking to create a customized install experience for their app, for example a banner with an Install button:

NOTE: As of December 2020 it's still not possible to trigger PWA install programatically on iOS Safari. See compatibility link below.

Features

The extension registers a pwa-installer Vuex store module which allows you to hook into the PWA installation flow by exposing several states and a couple of methods.

States

|Name|Type|Possible values|Description| |---|---|---|---| |displayMode|String|browser tabstandalonestandalone-ios|| |event|BeforeInstallPromptEvent||The captured beforeinstallprompt event which will be fired when the user triggers your custom install prompt.| |userChoiceOutcome|String|accepteddismissed|A reference to the outcome of the captured event (BeforeInstallPromptEvent.userChoice.outcome)| |isCustomPromptDismissed|Boolean||Allows you to track whether the user dismissed your custom UI.|

Methods

|Name|Description| |---|---| |prompt|Triggers the native install prompt.| |dismissCustomPrompt|Hides your custom install UI.|

Install

quasar ext add pwa-installer

Quasar CLI will retrieve it from the NPM registry and install the extension to your project.

Uninstall

quasar ext remove pwa-installer

Useful links

• https://web.dev/customize-install/
• https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent
• BeforeInstallPromptEvent.prompt() browser support

Support

Feel free to contribute pull requests and ideas or open an issue, I'll do my best to look at it in the same century.