At this stage, most of the major browsers support PWA but there are some differences on how they adopt it. With PWA getting more popularity and traction, I recently dealt with a proof of concept where I will need to offer a better UX in installing a.k.a “add to home screen”. Here are challenges that I have gone through:

• As of writing this, navigator.getInstalledRelatedApps() has very limited support and can only get results from Android: Chrome 84 or later.
• Browser compatibility for BeforeInstallPrompt which is the event where we can hook our own install prompt.
• Inconsistency of the install prompt because of the browser behavior that if it was ignored initially, it will be considered dismissed thus will not prompt again until the browser session has ended

Despite of all this challenges, let me walk you through on the solution I got

• Since we are looking for an explicit install rather than encouraging install, I thought about adding an additional parameter to the Login screen — Login?Install=True which is also easily accessible through a url myapp.com/install.
• I have to check for the browser OS by using GetOS from OutSystemsUI and have different prompt for iOS due to the limitation mentioned on the challenges. It’s just stating on how to manually do the process

• For other browsers, I was able to add a custom install prompt by unregistering the service worker and deferring the installation prompt to hook custom install.

OnInitialize when parameter Install is True, I use the following to have a clean installation

navigator.serviceWorker.getRegistrations().then(function(registrations) {
registrations.forEach(function(r) { 
    if (r.scope.indexOf(window.location.origin + '/MyApp') > -1) {
        r.unregister();   
    }
    });
});

Then OnReady:

var deferredPrompt;
var addBtn = document.querySelector('.btn-show-install');
var installBtn = document.querySelector('.btn-install');
window.addEventListener('beforeinstallprompt', function (e) {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault(); // Stash the event so it can be triggered later.
  deferredPrompt = e; // Update UI to notify the user they can add to home screen

  addBtn.click();
  installBtn.addEventListener('click', function () {

    deferredPrompt.prompt(); // Wait for the user to respond to the prompt

    deferredPrompt.userChoice.then(function (choiceResult) {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the prompt');
      } else {
        console.log('User dismissed the prompt');
      }

      deferredPrompt = null;
    });
  });
});

window.addEventListener('appinstalled', function (evt) {
  // Log install to analytics
  console.log('INSTALL: Success');
});

There are two hidden buttons on my screen that was defined with the ff class:

• btn-show-install — this is the button sets the local variable to show the popup
• btn-install — this is the “ADD” button on the popup below that’s hooked to the browsers installation

Some other consideration I had is to display spinner/loader while the Service Worker is unregistering because it takes time and the user might think nothing is happening. To battle the inconsistency dismiss behavior mentioned on the challenges above, I have added a message on the loader that says the following:

While this is not the best UX, this helps to unblock the user providing manual instructions while the API is still limited in doing automation.

In relation to this, Google and Microsoft store accepts PWA and it could be the answer to simplify how users will find and install the application. I haven’t gotten through the steps of submitting one but I think it’s worth trying if this UX isn’t enough.

The views expressed by the author above do not necessarily represent the views of it’s company.