How to create custom install button for Progressive Web App (PWA)?

In this post we will learn about to create a custom install button for progressive web app, If you do not know how to built progressive web app than please check this post.

Creating a custom install button for a Progressive Web App (PWA) involves capturing the `beforeinstallprompt` event and using it to trigger the installation process when the user clicks the button. Here's a step-by-step guide :

Step 1 : Create a Button

First, create a button or any other clickable element in your HTML that the user can interact with to install the app.

<button id="installApp">Install</button>
Step 2 : Capture the `beforeinstallprompt` Event

The `beforeinstallprompt` event is fired when the app meets the criteria for installation. You can capture this event and prevent it from showing the default install prompt.

// javascript
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  deferredPrompt = e;
Step 3 : Add a Click Event Listener to the Button

When the user clicks the install button, call the `prompt()` method on the `beforeinstallprompt` event

// javascript
const installApp = document.getElementById('installApp');
installApp.addEventListener('click', async () => {
  if (deferredPrompt !== null) {
    const { outcome } = await deferredPrompt.userChoice;
    if (outcome === 'accepted') {
      deferredPrompt = null;

Please note that the installation of a PWA is browser-dependent, so you cannot install it directly without a browser prompt. The user must confirm the installation. This is designed to prevent web pages from repeatedly prompting the user to install the web app.

Subscribe Our Newsletters