Progressive Web Apps

6.2 More PWA Stuff

Determine if Website or PWA

We can actually determine whether our web app is running as a basic website that has a service worker or if it was launched as a PWA.

Use the following script to determine the load context and add any custom code based on those circumstances.

//check if the app was launched from installed version
if (navigator.standalone) {
  console.log('Launched: Installed (iOS)');
  APP.isStandalone = true;
} else if (matchMedia('(display-mode: standalone)').matches) {
  console.log('Launched: Installed');
  APP.isStandalone = true;
} else {
  // console.log('Launched: Browser Tab');
  APP.isStandalone = false;
}

There is also a way that we can listen for changes to the display-mode. We can add an event listener to the window.matchMedia method.

window.matchMedia('(display-mode: standalone)').addEventListener((evt) => {
  let displayMode = 'browser';
  if (evt.matches) {
    displayMode = 'standalone';
  }
  // Log display mode change to analytics
  console.log('DISPLAY_MODE_CHANGED', displayMode);
});

Launching Native Alternative

If you have a true Native application and you want to have the user be prompted to install a platform specific native version as an alternative to your PWA then you can update the web manifest file to have the mobile device prompt the user with their choices.

We have to add the following two settings in the web manifest file.

{
  "prefer_related_applications": true,
  "related_applications": [
    {
      "platform": "play",
      "url": "https://play.google.com/store/apps/details?id=com.example.app1",
      "id": "com.example.app1"
    },
    {
      "platform": "itunes",
      "url": "https://itunes.apple.com/app/example-app1/id123456789"
    }
  ]
}

If there is no native alternative then omit the prefer_related_applications setting or have it set to false.

Enhanced Install Experiences

With a Chrome based browser we have access to that deferred install prompt event discussed last week.

When we feel that it is a good time to ask the user to install we used this code to prompt them:

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

This will display the built-in install prompt.

However, other browsers have different mechanisms for allowing the user to add an app to the home screen called A2HS (install it).

We can add our own UI elements for the user to click to initiate the install. Fine for Chrome but on the other browsers we need to display instructions on how to Add to Home Screen.

On a desktop browser you can expect to see a small icon in the location bar. Here is an example of the Safari A2HS button on Safari desktop.

Note the small square with the upwards pointing arrow, on the right side of the image.

On iOS Safari

On Safari on iOS you will see a button in the menu that is similar to the Safari desktop one. Clicking this will give the user Sharing options dialog which includes Add to Home Screen.

On Firefox Mobile

On Firefox the user can open the browser menu like the one below, and find an item called either install or add to homescreen.

Or in the location bar when on Firefox desktop:

For Firefox there may also be an Add to Home Icon in the mobile version. It looks like a small house with a plus sign. It will depend on which version of Firefox that your users are using.

On Chrome Mobile

Similar to the the Firefox mobile menu you will find a button and label in the menu called Add to Home screen.

For Chrome, remember that you will also automatically be prompted to install a PWA if all the installation requirements are met.

This is what the banner would look like if you were not controlling the process on Chrome with the beforeinstallprompt event code.

How you can Ask Users to Install

There are a number of ways that we can encourage a user to install.

Remember, asking them too early will drive most people to ignore the option from that point onward.

1. A simple install button on the page. Put the button in an obvious location. Be sure to add some explanatory text about what install means. You can put this button near the bottom of the page or in a location that appears after they have already interacted with some content on your site.
2. An install button in the header of each page. Make it part of the navigation options.
3. If you have a slide out navigation menu, put it at the bottom of the menu.
4. A custom install banner. Have a look at the install banner that comes with chrome. Use this as a basis for creating your own styled banner that appears in any browser.
5. A dismissible Snackbar near the bottom of the page. Try not to interfere with any task that the user would be trying to accomplish. You want to be noticeable without being annoying. Remember to wait long enough before displaying.
6. If there is an ordering or checkout process in your app then having an install option here is an excellent choice. As they finish their order and you are thanking them and providing a tracking number, remind them that they can install your app and give them some reasons why they might want to.

For all of these options you have the ability to style the button to match the style of the rest of your site.

For any of these install prompts you will need to have a screen where you outline to users, who will nearly always be less technically savvy than you, how to actually install the app.

Read more about encouraging users to install on web.dev (opens new window) and more about building your own install ui (opens new window).

Read more about the install process for users on different platforms (opens new window)

What to do this week

TODO

Things to do before next week

• Read and Watch all the course content for 6.1, 6.2, and 7.2
• Watch the PWA playlist (opens new window)
• Finish working on Hybrid Three