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)

5 Shares

# Shared by Daniel Appelquist on Monday, November 6th, 2017 at 7:17pm

# Shared by Sávio Mendes on Monday, November 6th, 2017 at 10:00pm

# Shared by Darren Lester on Monday, November 6th, 2017 at 10:09pm

# Shared by kuuuurija on Monday, November 6th, 2017 at 10:29pm

# Shared by Jonny Axelsson on Tuesday, November 7th, 2017 at 1:07am

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

Related posts

In between

Between the physical and the digital. Between native apps and the World Wide Web.

Web notifications on iOS

The number one feature request I have for mobile Safari is web notifications (even if I won’t personally use them).

A bug with progressive web apps on iOS

Opening an external link in a web view appears to trigger a reload of the parent page without credentials.

What is a Progressive Web App?

Defining the damn thing.

Choice

Progressive enhancement: it’s not just for web sites, y’know.

Related links

News from WWDC22: WebKit Features in Safari 16 Beta | WebKit

Good news and bad news…

The good news is that web notifications are coming to iOS—my number one wish!

The bad news is that it won’t happen until next year sometime.

Tagged with

For developers, Apple’s Safari is crap and outdated – Perry Sun | Blog

Apple dragged their feet in adding support for PWAs in Safari, and when they finally did, limited the capabilities of a PWA so that native-like app functionality wouldn’t be possible, like notifications or a home screen icon shortcut – to name just a few of the many restrictions imposed by Apple.

But it goes beyond that. On iOS, the only web rendering engine allowed is Apple’s own WebKit, which runs Safari. Third-party iOS browsers such as Chrome can only use WebKit, not their own engines (as would be permitted in Windows, Android, or macOS). And it’s WebKit that governs PWA capabilities.

Safari is very good web browser, delivering fast performance and solid privacy features.

But at the same time, the lack of support for key web technologies and APIs has been both perplexing and annoying at the same time.

The enormous popularity of iOS makes it all the more annoying that Apple continues to hold back developers from being able to create great experiences over the web that work across all platforms.

Tagged with

Local-first software: You own your data, in spite of the cloud

The cloud gives us collaboration, but old-fashioned apps give us ownership. Can’t we have the best of both worlds?

We would like both the convenient cross-device access and real-time collaboration provided by cloud apps, and also the personal ownership of your own data embodied by “old-fashioned” software.

This is a very in-depth look at the mindset and the challenges involved in building truly local-first software—something that Tantek has also been thinking about.

Tagged with

Competing by mimicking - Andy Bell

In my mind, the only way to “compete” with native apps is to do better than native apps—and with the web platform consistently improving and enabling us to produce app-like experiences, with Service Workers, ES6+ JavaScript, modern CSS and Web Components: we are very much on the path to do better than native apps.

Tagged with

PWA2APK- Convert PWA to APK file - Appmaker.xyz

This seems to work quite nicely: convert your progressive web app into an APK file that you can then submit to the Google Play store (you’ll still have to go through all the hassle of submitting the app, but still).

I tested this with The Session and sure enough, it looks like it’s available to download from Google Play.

Tagged with

Previously on this day

10 years ago I wrote Icon fonts, unicode ranges, and IE8’s compatibility mode

A tricksy browser issue raises a dark spectre from the past.

14 years ago I wrote Burge Pitch Torrent

Even more perfect pitch.

16 years ago I wrote Berlin, day 2

A panel, a presentation and two minutes of Roy Orbison wrapped in clingfilm.

18 years ago I wrote A quick turnaround

I’m back in Brighton for less than 24 hours.

22 years ago I wrote Bonfire night

Last night was bonfire night. In England, November 5th is celebrated in rhyme: