Package Exports

pwa-install-handler
pwa-install-handler/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (pwa-install-handler) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PWA install handler

Handling PWA installation prompt made easier. MDN docs

Installation

npm install pwa-install-handler

Usage

HTML

<button id="installButton" style="display: none;">
    Install
</button>

JavaScript

import { pwaInstallHandler } from 'pwa-install-handler'

const $button = document.querySelector('#installButton')

pwaInstallHandler.addListener((canInstall) => {
    $button.style.display = canInstall ? 'inline-block' : 'none'
})

$button.addEventListener('click', () => {
    pwaInstallHandler.install()
})

React

For more information see react-use-pwa-install.

Screencast

UI example

Methods

pwaInstallHandler.install: () => Promise<boolean>

pwaInstallHandler.addListener: (
    (
        callback: (canInstall: boolean) => void,
        install?: () => Promise<boolean>
    ) => void
) => void

pwaInstallHandler.removeListener: (
    (
        callback: (canInstall: boolean) => void,
        install?: () => Promise<boolean>
    ) => void
) => void

pwaInstallHandler.canInstall: () => boolean

pwaInstallHandler.getEvent: () => BeforeInstallPromptEvent | null

Notes

You PWA must meet some requirements to be installable. Without that the canInstall will always be false. The requirements are browser specific. You can read more about it here (MDN) and here (web.dev).

Some browsers don't support custom install button. These will have canInstall always set to false too. For more information check BeforeInstallPromptEvent support.