Installing Progressive Web Apps

When I was testing the dConstruct Audio Archive—which is now a Progressive Web App—I noticed some interesting changes in how Chrome on Android offers the “add to home screen” prompt.

It used to literally say “add to home screen.”

Getting the “add to home screen” prompt for https://huffduffer.com/ on Android Chrome. And there’s the “add to home screen” prompt for https://html5forwebdesigners.com/ HTTPS + manifest.json + Service Worker = “Add to Home Screen” prompt. Add to home screen.

Now it simply says “add.”

The dConstruct Audio Archive is now a Progressive Web App

I vaguely remember there being some talk of changing the labelling, but I could’ve sworn it was going to change to “install”. I’ve got to be honest, just having the word “add” doesn’t seem to provide much context. Based on the quick’n’dirty usability testing I did with some co-workers, it just made things confusing. “Add what?” “What am I adding?”

Additionally, the prompt appeared immediately on the first visit to the site. I thought there was supposed to be an added “engagement” metric in order for the prompt to appear; that the user needs to visit the site more than once.

You’d think I’d be happy that users will be presented with the home-screen prompt immediately, but based on the behaviour I saw, I’m not sure it’s a good thing. Here’s what I observed:

  1. The user types the URL archive.dconstruct.org into the address bar.
  2. The site loads.
  3. The home-screen prompt slides up from the bottom of the screen.
  4. The user immediately moves to dismiss the prompt (cue me interjecting “Don’t close that!”).

This behaviour is entirely unsurprising for three reasons:

  1. We web designers and web developers have trained users to dismiss overlays and pop-ups if they actually want to get to the content. Nobody’s going to bother to actually read the prompt if there’s a 99% chance it’s going to say “Sign up to our newsletter!” or “Take our survey!”.
  2. The prompt appears below the “line of death” so there’s no way to tell it’s a browser or OS-level dialogue rather than a JavaScript-driven pop-up from the site.
  3. Because the prompt now appears on the first visit, no trust has been established between the user and the site. If the prompt only appeared on later visits (or later navigations during the first visit) perhaps it would stand a greater chance of survival.

It’s still possible to add a Progressive Web App to the home screen, but the option to do that is hidden behind the mysterious three-dots-vertically-stacked icon (I propose we call this the shish kebab icon to distinguish it from the equally impenetrable hamburger icon).

I was chatting with Andreas from Mozilla at the View Source conference last week, and he was filling me in on how Firefox on Android does the add-to-homescreen flow. Instead of a one-time prompt, they’ve added a persistent icon above the “line of death” (the icon is a combination of a house and a plus symbol).

When a Firefox 58 user arrives on a website that is served over HTTPS and has a valid manifest, a subtle badge will appear in the address bar: when tapped, an “Add to Home screen” confirmation dialog will slide in, through which the web app can be added to the Android home screen.

This kind of badging also has issues (without the explicit text “add to home screen”, the user doesn’t know what the icon does), but I think a more persistently visible option like this works better than the a one-time prompt.

Firefox is following the lead of the badging approach pioneered by the Samsung Internet browser. It provides a plus symbol that, when pressed, reveals the options to add to home screen or simply bookmark.

What does it mean to be an App?

I don’t think Chrome for Android has any plans for this kind of badging, but they are working on letting the site authors provide their own prompts. I’m not sure this is such a good idea, given our history of abusing pop-ups and overlays.

Sadly, I feel that any solution that relies on an unrequested overlay is doomed. That’s on us. The way we’ve turned browsing the web—especially on mobile—into a frustrating chore of dismissing unwanted overlays is a classic tragedy of the commons. We blew it. Users don’t trust unrequested overlays, and I can’t blame them.

For what it’s worth, my opinion is that ambient badging is a better user experience than one-time prompts. That opinion is informed by a meagre amount of testing though. I’d love to hear from anyone who’s been doing more detailed usability testing of both approaches. I assume that Google, Mozilla, and Samsung are doing this kind of testing, and it would be really great to see the data from that (hint, hint).

But it might well be that ambient badging is just too subtle to even be noticed by the user.

On one end of the scale you’ve got the intrusiveness of an add-to-home-screen prompt, but on the other end of the scale you’ve got the discoverability problem of a subtle badge icon. I wonder if there might be a compromise solution—maybe a badge icon that pulses or glows on the first or second visit?

Of course that would also need to be thoroughly tested.

Have you published a response to this? :

Responses

Šime Vidas

Note that Firefox for Android teaches the user about the new icon:

# Posted by Šime Vidas on Monday, November 6th, 2017 at 1:11pm

Alex Russell

Ambient Badging is very much the right direction. “Add” vs. “Add to homescreen” is ongoing debate.

Alex Russell

Note that you got promoted on visit because high site engagement. See chrome://site-engagement

Alex Russell

We raise engagement score for sites you go to directly (type into the omnibox) vs. those you navigate to via link.

Alex Russell

Either way, you should be able to get the prompt on the first load if site installs SW quickly & user engages w/ content.

Jeremy Keith

This is such a thorny (and interesting) challenge—fascinating stuff!

Ben Francis

With WebAPK meaning app in the app drawer etc., is it even “add to homescreen” any more, or actually “install”? (Personally I like “pin”).

# Posted by Ben Francis on Monday, November 6th, 2017 at 6:15pm

Andreas Bovens

Also: Firefox has “Add page shortcut” in overflow menu > Page. Creates Home screen shortcut to current page, which opens full browser UI.

Martin Pitt

This is such an important issue. PWAs will not happen if this showstopper is not resolved. Unsolicited popups are really bad. Ambient Badging is a step forward. Goal is (a) subtly inform the user of PWA, (b) allow user to promote it to first class citizen at their own comfort.

# Posted by Martin Pitt on Monday, November 6th, 2017 at 10:52pm

Alex Russell

Chrome’s menu item does a similar thing. I’d like to see these badged when the site is detected to be a PWA.

Andreas Bovens

Firefox’ implementation is really shortcut only (PWA or not). Allows users to deeplink to specific section (e.g. news site’s sports page)

41 Likes

# Liked by Ada Rose Cannon on Monday, November 6th, 2017 at 10:11am

# Liked by Youssouf Ousmana on Monday, November 6th, 2017 at 10:11am

# Liked by Flaki on Monday, November 6th, 2017 at 10:12am

# Liked by Juan Daniel Flórez on Monday, November 6th, 2017 at 10:12am

# Liked by Amber Wilson on Monday, November 6th, 2017 at 10:12am

# Liked by Matt Theakston on Monday, November 6th, 2017 at 10:46am

# Liked by Scott Mallinson on Monday, November 6th, 2017 at 10:46am

# Liked by Paul Lloyd on Monday, November 6th, 2017 at 10:46am

# Liked by Marco Hengstenberg on Monday, November 6th, 2017 at 10:47am

# Liked by 🦄 Colin on Monday, November 6th, 2017 at 11:44am

# Liked by Jay Gilmore on Monday, November 6th, 2017 at 11:44am

# Liked by Josh Vogt on Monday, November 6th, 2017 at 12:39pm

# Liked by Michael R. Lorek on Monday, November 6th, 2017 at 12:39pm

# Liked by John F Croston III on Monday, November 6th, 2017 at 1:30pm

# Liked by Adrian Low on Monday, November 6th, 2017 at 1:32pm

# Liked by Andreas Bovens on Monday, November 6th, 2017 at 2:28pm

# Liked by Andy Davies on Monday, November 6th, 2017 at 4:00pm

# Liked by Ben Seven on Monday, November 6th, 2017 at 4:00pm

# Liked by Pelle Wessman on Monday, November 6th, 2017 at 4:27pm

# Liked by Nicolas Bregenzer on Monday, November 6th, 2017 at 6:01pm

# Liked by JimDabell on Monday, November 6th, 2017 at 6:01pm

# Liked by Owen Campbell-Moore on Monday, November 6th, 2017 at 6:35pm

# Liked by Matteo Fogli on Monday, November 6th, 2017 at 6:35pm

# Liked by Alan Dalton on Monday, November 6th, 2017 at 6:35pm

# Liked by Ben Kelly on Monday, November 6th, 2017 at 7:10pm

# Liked by Daniel Appelquist on Monday, November 6th, 2017 at 7:44pm

# Liked by https://j4y.co/ on Monday, November 6th, 2017 at 7:44pm

# Liked by Samsung Internet Dev on Monday, November 6th, 2017 at 7:44pm

# Liked by Brad Frost on Monday, November 6th, 2017 at 9:07pm

# Liked by Jonathan Surmacz on Monday, November 6th, 2017 at 9:32pm

# Liked by Jenny Gove on Monday, November 6th, 2017 at 9:59pm

# Liked by Rafael Silva on Monday, November 6th, 2017 at 9:59pm

# Liked by rustan on Monday, November 6th, 2017 at 10:36pm

# Liked by Arthur Stolyar on Monday, November 6th, 2017 at 10:36pm

# Liked by Darren Lester on Monday, November 6th, 2017 at 10:37pm

# Liked by Fabio Venni on Monday, November 6th, 2017 at 11:07pm

# Liked by Hugo Rodger-Brown on Monday, November 6th, 2017 at 11:08pm

# Liked by Martin Pitt on Monday, November 6th, 2017 at 11:09pm

# Liked by nhducit on Tuesday, November 7th, 2017 at 2:00am

# Liked by Gokul on Tuesday, November 7th, 2017 at 4:30am

# Liked by Andrew Hudson on Tuesday, November 7th, 2017 at 12:54pm