Customizing the install prompt for your progressive web app

How to provide your own in-app install experience with pwafire library in a progressive web app.

05/30/2022

PWA, Install, Custom install prompt

Add custom in-app install experience

Provide your own in-app install experience with pwafire library in a progressive web app. This library is a wrapper for all new web capabilities apis also known us project fugu

Get the library, setup

You have to make sure that you have the latest version of the pwafire library installed first.

npm install pwafire --save

Custom in-app install flow with pwafire

• Listen for the before step's event.

• Save the beforeinstallprompt event, so it can be used to trigger the install flow later.

• Alert the user that your PWA is installable, and provide a button or other element to start the in-app installation flow.

Before we start

Using the Install api on pwafire is straightforward. You need to provide a step type which can be before, install or installed and a callback function which will be called when the Api step is triggered.

import { pwa } from "pwafire";

// Using the install api...
pwa.Install(step, (event) => {
  // Do something with the event...
});

Things to note with the installation steps

• For other apps, make sure the first two steps run on page load, and the third step is called inside a button click event.

• With a react js app the first two steps should be in a useEffect hook, and the third step should be called inside a button click event.

The installation steps

• Step installed => Check if the app can be installed, e.g for react it'd be:

  // 1. Check if app was installed...
  pwa.Install("installed", () => {
    // b) => Hide the app-provided install promotion custom button.
    setIsInstalled(true);
    // c) => Clear the deferredPrompt so it can be garbage collected.
    setSavedDefferedPrompt(null);
    // d) => Optionally, send analytics event to indicate successful install, e.g with custom analytics:
    analytics.track({
      event: "install",
      category: "pwa",
      label: "install",
    });
  });
  

Step before => Check if the app is installed, e.g for react it'd be

// 2. Before install prompt is shown.
pwa.Install("before", (event) => {
  // Prevent the mini-infobar from appearing e.g for mobile.
  if (window.matchMedia("(min-width: 767px)").matches) {
    event.preventDefault();
  }
  // a) => Stash the event so it can be triggered later on.
  setSavedDefferedPrompt(event);
  // b) => Update UI notify the user they can install the PWA.
  setIsInstalled(false);
  // c) => Optionally, send analytics event that PWA install promo was shown, e.g with custom analytics:
  analytics.track({
    event: "install",
    category: "pwa",
    label: "install-prompt",
  });
});

Step install => Install the app, e.g for react it'd be

// 3. Show the install prompt.
pwa.Install("install", async (event: string) => {
  // Event type is install.
  console.log(event);
  // a) => Show the install prompt.
  savedDefferedPrompt.prompt();
  // b) =>  Wait for the user to respond to the prompt.
  const { outcome } = await savedDefferedPrompt.userChoice;
  if (outcome === "accepted") {
    // c, i) =>  Optionally, send analytics event with outcome of user choice.
  } else {
    // c, ii) => Optionally, send analytics event with outcome of user choice.
  }
  // d) => We've used the prompt, and can't use it again, throw it away.
  setSavedDefferedPrompt(null);
});

Author : Maye Edwin Maye