Install This PWA To Continue
Tags: javascript, pwa
Published: 2019-06-14 13:38:32

---
title: Install This PWA To Continue
published: true
description: In your JS, we can ask whether your site was loaded by tapping on an installed homescreen icon. Could we use this to prompt an install?
tags: javascript, pwa
series: Blog-A-Day in June
---

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. 🤔

![Santa Tracker as a PWA](https://developers.google.com/web/showcase/2017/images/santa/phone.png)

# 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".

![Must Install](https://thepracticaldev.s3.amazonaws.com/i/ewnhagfk4weezt9c1ket.png)

## 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](https://developer.mozilla.org/en-US/docs/Web/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:

```js
{
  "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:

```js
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`](https://developer.mozilla.org/en-US/docs/Web/API/Window/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 👋