How to Trigger PWA Installation Popup with a Button Click

PWA (Progressive Web App) is a must-have feature nowadays if you want to get more traffic on your website. PWA is installed on the user's device like an app and sends the user to your website without opening Chrome or any other browser. After installing PWA on your website, the user won't know if the site has PWA or not until Chrome shows an auto popup to install or they open the 3 dots and install the app manually.

But sometimes the auto popup won't appear for some reason and most of the users won't install the app manually. So that's why in this article I will share with you How to Trigger the PWA Installation Popup with a Button Click. 

But before that, if your site dont have PWA then you can add that from this post: How to add PWA to any website Step-by-Step

 

How to Trigger PWA Popup with a Button

To trigger the PWA we will be using js and for the button, we will be using a simple button tag.

You can directly use the code without any issue but If you want to customize any of the code then feel free to do that 

 

Here is the JS Code:

<script>
// Check if the browser supports service workers and PWA functionality
if ('serviceWorker' in navigator && 'BeforeInstallPromptEvent' in window) {
  let deferredPrompt;

  window.addEventListener('beforeinstallprompt', (event) => {
    // Prevent the default browser install prompt
    event.preventDefault();

    // Store the event for later use
    deferredPrompt = event;

    // Show the install button
    const installButton = document.getElementById('installButton');
    installButton.style.display = 'block';

    // Add click event listener to trigger the install prompt
    installButton.addEventListener('click', () => {
      // Trigger the install prompt
      deferredPrompt.prompt();

      // Wait for the user to respond to the prompt
      deferredPrompt.userChoice.then((choiceResult) => {
        if (choiceResult.outcome === 'accepted') {
          console.log('User accepted the PWA installation');
        } else {
          console.log('User dismissed the PWA installation');
        }

        // Reset the deferredPrompt
        deferredPrompt = null;
      });

      // Hide the button
      installButton.style.display = 'none';
    });
  });

  // Check if the PWA is already installed
  window.addEventListener('appinstalled', () => {
    const installButton = document.getElementById('installButton');
    installButton.style.display = 'none';
  });
}
</script>

 

Explaining the JS code

This JavaScript code is used to implement Progressive Web App (PWA) functionality, specifically the installation of a PWA in a web browser. Here's an explanation of each part of the code:

1. Service Worker and BeforeInstallPromptEvent Checking:

   • The code begins by checking if the user's web browser supports service workers ('serviceWorker' in navigator) and if it supports the BeforeInstallPromptEvent ('BeforeInstallPromptEvent' in window).

2. Event Listeners:

   • If the browser supports service workers and the BeforeInstallPromptEvent, the code sets up event listeners.
   • beforeinstallprompt Event: This event is triggered when the browser considers it suitable to prompt the user to install the PWA.
     • It prevents the default browser install prompt (event.preventDefault()) to customize the installation experience.
     • It stores the event in the deferredPrompt variable for later use.
     • It shows an install button on the page by changing its CSS display property to 'block'.
     • It adds a click event listener to the install button.
   • appinstalled Event: This event is triggered after the PWA is successfully installed.
     • It hides the install button by changing its CSS display property to 'none'.

3. Install Button Click Event:

   • When the install button is clicked, the code triggers the install prompt (deferredPrompt.prompt()). This prompt asks the user if they want to install the PWA.
   • It waits for the user's response to the prompt and logs whether the user accepted or dismissed the installation.
   • It resets the deferredPrompt to null.
   • Finally, it hides the install button by changing its CSS display property to 'none'.

The primary purpose of this code is to provide a customized installation experience for a Progressive Web App (PWA) when the browser and device support it. It ensures that the default browser prompt for installing the PWA is replaced with a custom button that triggers the installation prompt when clicked, and it handles events related to the installation process.

 

 

Here is the Button Code:

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

 

Explaining the button code

This is a Button element with the id attribute set to "installButton" and an initial inline style of display: none;. Here's an explanation of this code:

1. <button> Element: This is an HTML button element. Buttons are interactive elements in web development that users can click on. They are often used to trigger actions or events when clicked.

2. id="installButton": This is the id attribute assigned to the button element. The id attribute provides a unique identifier for this specific button. It can be used in JavaScript or CSS to target and manipulate this specific button.

3. style="display: none;": This is an inline CSS style applied to the button. In this case, it sets the initial display property to "none." When an element's display property is set to "none," it means that the element will not be visible on the web page. Essentially, this button will not be visible when the page initially loads because of this style.

 

How to add the code?

If you dont know how to add the code then dont worry,

• Copy the JS code and past it in your footer section of the website.
• Then copy the button code and add anywhere you like.
• That's it.

 

Features

In our version of the code, we have added some extra features like: Dont show the PWA install button until the PWA files are fully loaded, Checking if the PWA is already installed or not, and hiding the button if the PWA is installed on the user's device.

 

Conclusion

In conclusion, calling pwa installation through button can be game changing for some site. Because it will create an app on your website on users device which they can use anytime they want and the best part of them that they don't have to visit your site by typing the URL.

So what are you waiting for create a paw caller button and increase your website traffic.