Skip to content

FilipChalupa/pwa-install-handler

Repository files navigation

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

Demo

Check website or code.

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.