Bring the BeforeInstallPromptEvent to browsers that don't support it natively.
Chrome and Edge fire this event automatically, allowing you to invite users to install your PWA. This polyfill does the same for other browsers, so you can offer a consistent install experience across all devices, using the exact same API.
- The polyfill detects the user's browser and dispatches a synthetic
BeforeInstallPromptEventonwindow - Your code listens for the event and calls
event.prompt()when appropriate - A Chrome-like install dialog appears, followed by step-by-step install instructions tailored to the user's browser
Using jsDelivr is recommended so your users always get install instructions up to date with the latest browser changes. Lock to a major version to avoid breaking changes.
<head>
...
<script type="module" src="https://cdn.jsdelivr.net/npm/@easy-pwa/beforeinstallprompt-polyfill@1"></script>
</head>Store the event when it fires, then call event.prompt() on your own trigger — a button, a banner, a custom UI element.
let installPrompt = null;
window.addEventListener('beforeinstallprompt', (event) => {
installPrompt = event;
document.getElementById('install-button').hidden = false;
});
document.getElementById('install-button').addEventListener('click', async () => {
if (!installPrompt) return;
const result = await installPrompt.prompt();
if (result.outcome === 'accepted') {
console.log('User accepted the install prompt');
}
installPrompt = null;
document.getElementById('install-button').hidden = true;
});https://easy-pwa.github.io/beforeinstallprompt-polyfill/
The install instructions are currently available in English and French. The polyfill will not trigger if the user's browser language is not supported.
Contributions for additional languages are welcome — open a PR adding a translation file in resource/translations/.