On mobile devices running iOS 11.3+ and modern Chrome- so, basically everyone in the western world- you can have a PWA added to your phone's home screen. This is a great and admirable goal, but getting there can be challenging. 🤔

What if ...

What if you insist your users do this action before they receive you app? This would never make sense for content sites: wikis, news articles, etc al, and honestly is likely an anti-pattern in many cases; but it could make sense for cases such as:

• games
• 'app-like' experiences
• tools which you as a user are locked-in to (say, an expense reporting application for your company).

The last case is particularly interesting. By asking your users to "install" the app via the web, you may actually absolve some FUD along the lines of "oh, it MUST be an app".

Implementation Theory

There's a few ways to detect an installed PWA. On iOS, it's simple: we can look for the navigator.standalone property: it's truthy when a page is launched from the homescreen.

On Android, we have a couple of options. The first, and simplest, is to configure the URL that your site loads when it's installed. If you're building a PWA, you'll have a Web App Manifest- commonly named manifest.json or manifest.webmanifest. When a user is prompted to install your PWA, the URL that goes to the homescreen is actually set by the start_url field:

{
  "name": "You Must Install!",
  "short_name": "Installed!",
  "display": "standalone",
  "start_url": "/?homescreen=1",  // set a query we can detect
  ...
}

The second option is that if your site is display: standalone- which removes the URL bar, giving your PWA an app-like experience- you can check for this via CSS.

Implementation In Practice

Our final JS method looks like this:

function isInstalled() {
  if (navigator.standalone) {
    return true;  // iOS
  }
  if (window.matchMedia('(display-mode: standalone)').matches) {
    return true;  // Android with "display": "standalone" in Manifest
  }
  if (new URL(window.location).searchParams.has('homescreen')) {
    return true;  // fallback to check for "?homescreen=1"
  }
  return false;
}

Now, you could use this method to control site loading and actually insist that a user installs before continuing.

Practical Concerns

On both major platforms, we can't really force an install prompt, or know that we can reliably trigger its flow through a button or user interaction.

On iOS, it's (as of 2019) not technically possible at all.

On Android, an engagement metric is used to prompt a user to install, and your site can also use onbeforeinstallprompt to better control that prompt.

This metric is incredibly useful. As web users, we know that the endless "allow notification" prompts are incredibly frustrating. Adding "install" prompts, without any engagement control, would just be adding fuel to that fire. 🔥

What this boils down to is that on both platforms, this whole proposal would force you to display a message saying "click around on your platform's UI to 'Install' before use". So our thought experiment, while interesting, might not be practical. 👎

Thanks

Thanks for coming on this journey with me! 💭

14 👋