Progressive Web Apps: ready for primetime
Four and a half years ago I was moaning (me!) about the state of Installable web apps and interoperability (TL;DR: laughably crap). Everybody listened to me, and made them better. Well, actually, they didn’t, because I was wrong; I still believed in the notion that it was a good idea to download a static snapshot of a site, thereby losing all the immediacy and linkability of web publishing.
Recently, Progressive Web Apps have come on the scene. Alex Russell wrote an excellent explainer Progressive Web Apps: Escaping Tabs Without Losing Our Soul, or if you prefer a video here’s Alex and Andreas Bovens, Product Manager of Chromium-based Opera for Android, explaining why Progressive Web Apps Are the Future.
At their simplest, Progressive Web Apps are application-like things hosted on your web server. If you’re as old as me, you might call them “web sites”. They also point to a manifest file, which gives some light metadata about icons, default orientation and the like. In conforming browsers (currently, Opera for Android, Chrome for Android and, forthcoming, Firefox too) you can “save” the app to your homescreen. The relevant icon from the manifest is placed on the device’s homescreen which can then be tickled into life with your digit, indistinguishably from a native app: over HTTPS, if you so define it in the manifest, it can open in a default orientation and with no browser UI; with Service Worker, it can work offline.
Crucially, in browsers that don’t support it, you have a normal website. It’s perfect progressive enhancement.
There are differences in implementation; Opera and Chrome are working closely to see what works best. Opera’s implementation currently differs from Chrome’s in four main ways:
- HTTP-hosted sites will only display with browser UI, regardless of what the manifest states, because they’re less secure.
- when the user follows a link that takes the user out of the domain of the installed app, a new tab is spawned, with browser chrome. (Chrome shows a small address at the top of a standalone-app. We prefer to make it more obvious to the user that they have gone outside your app.)
- Opera doesn’t (yet) support background_color; this will be added in a forthcoming release.
- Chrome has a mechanism to suggest to a user that they add a site to Home screen called App Install Banners, depending on certain heuristics primarily, a Service Worker so they work offline, responsiveness and demonstrated repeated engagement with a site.
Opera is still experimenting with heuristics (and Chrome are tweaking, too). I’m convinced by Stuart Langridge’s argument that requiring “repeated engagememnt” may slow adoption:
Native apps get to say “install our app without providing a link, a QR code, whatever: people know how to do that… [with Progressive Web Apps] I still can’t say it, because you have to come back twice over two days. How popular would Clash of Clans be if you couldn’t install it until the second day you played it, I wonder?
[Note that since Stuart wrote this, the criteria for “engagement” by a user in a site changed from twice in two days into twice, at least 5 minutes apart.]
I think there should be a mechanism for discreetly unspammily alerting a user that a site is a Progressive Web App on first visit. But I’m not King of Opera for Android; however, I know the man who is (Andreas Bovens).
But how good are Progressive Web Apps, anyway? Is it even possible to write a really good app using web technology without the Reactembengular Framework?
Yes.
Here’s the FlipKart Lite Progressive Web App (see their video at Chrome Dev Summit).
Nolan Lawson (great name, great guy) has written Pokedex.org: a progressive webapp for Pokémon fans and blogged about it in detail (it’s a fantastic blog post; I urge you to read it). Nolan writes
I am super excited about this app, because it demonstrates that you can build an offline, 60FPS mobile app using *only* web technologies. Of course it’s offline-first (PouchDB, LocalForage, ServiceWorker, Cloudant), so you can browse all your fav Pokémon without a connection.
I’m super excited, too. Soon, this will be possible on all three cross-platform browsers. It’s also possible to add tell an app to be homescreen-able in iOS. No news from Microsoft, but they’re doing good things with the W3C Manifest in their manifold.js.
Want some web standards retro fun? Go to this Inbox Attack game in Opera for Android, add it to homescreen (the + button in the URL bar) and then tap its homescreen icon. It’s made with manifest, SVG and the vibration API.
If you’re interested in making a Progressive Web App, here are some resources to get you started.
- The Web Manifest specification – an article i wrote with Marcos Cáceres, the spec author
- Manifest Generator. It’s very possible that your site already has much of the information that the manifest format needs. This generator that I wrote with Stuart Langridge will spider your site and attempt to construct a manifest file you can download and deploy.
- Introduction to Service Worker
- Service Worker Cookbook by Mozilla
Go forth and make great apps that don’t require installs or updates, are of the web, with URLs and which are progressively enhanced. Hurray!
Buy "Calling For The Moon", my debut album of songs I wrote while living in Thailand, India, Turkey. (Only £2, on Bandcamp.)
I’m interested in Progressive Web App, because I’m working in a french web agency.
thanks for this article.