Progressive Web Apps: Prompting & Measuring Install

1. Welcome

In this lab, you'll take an existing installable PWA and add a custom in-app install button. This is the fifth in a series of companion codelabs for the Progressive Web App workshop. The previous codelab was From Tab to Taskbar. There are three more codelabs in this series.

What you'll learn

Create a custom in-app PWA install button

What you should know

JavaScript

What you will need

A browser that supports Service Workers

2. Get Set Up

Start by either cloning or downloading the starter code needed to complete this codelab:

If you clone the repo, make sure you're on the pwa04--prompt-measure-install branch. The zip file contains the code for that branch, too.

This codebase requires Node.js 14 or higher. Once you have the code available, run npm ci from the command line in the code's folder in order to install all of the dependencies you'll need. Then, run npm start to start the development server for the codelab.

The source code's README.md file provides an explanation for all distributed files. In addition, the following are the key existing files you'll be working with throughout this codelab:

Key Files

js/main.js - Main application JavaScript file

3. Set up Install Button

Before adding the install prompts and capturing the install events, there's some setup that needs to be done. First, create a file js/lib/install.js and add the following code:

export class Install {
  /**
   * @param {DOMElement} trigger - Triggering element
   */
  constructor(trigger) {
    this._prompt;
    this._trigger = trigger;
  }

  /**
   * Toggle visibility of install button
   * @param {string} action
   */
  toggleInstallButton(action = 'hide') {
    if (action === 'hide') {
      this._trigger.style.display = 'none';
    } else {
      this._trigger.style.display = 'block';
    }
  }
}

Then, in js/main.js at the bottom of the DOMContentLoaded event, add the following code:

// Set up install prompt
const { Install } = await import('./lib/install.js');
new Install(document.querySelector('#install'));

Explanation

This code sets up an Install class that will be used in the next step, and attaches it to the running application.

4. Add Install Prompt Listeners

In order to use the install button trigger to actually trigger your PWA to install, you need to capture the install prompt. When it's installed, you need to reset the captured install prompt. To do so, write code to do the following in the constructor in the Install class in js/lib/install.js:

Capture install prompt

Listen for the beforeinstallprompt event on window.
Prevent the event from firing
Capture the prompt
Show the install button trigger

Reset the prompt on install

Listen for the appinstalled event on window.
Reset the captured prompt
Hide the install button trigger

5. Trigger Install from In-App Button

Once the prompt is captured, the PWA's install button needs to be able to trigger it. To do so, add the following to the Install class in js/lib/install.js:

An async method to trigger install that
- Uses the captured prompt to prompt for install
- await the user's choice of the prompt
- Reset the prompt
- Hide the install button if the user accepted the install prompt
Add a click event listener to the install button in the class's constructor that calls the installation trigger.

6. Congratulations!

You've just learned how to trigger PWA installation from your own in-app install button.

The next codelab in the series is Empowering Your PWA