Saturday 29 October 2016

An introduction to Progressive Web Apps

The world of web development is currently getting very excited about something called the Progressive Web App (PWA). I recently attended the Render Front End Conference where it was the subject that dominated throughout. Bruce Lawson, Deputy Chief Technology Officer at Opera, set the scene in the conference’s opening talk.

Bruce’s starting point was the old adage that in every industry the customer is always right. And over the last few years users of the mobile web have been voting with their fingers and moving away from mobile sites towards native apps. The statistics he showed us demonstrated this trend. In 2013 users in the USA were dividing their time browsing roughly 80% to 20% in favour of native apps over the mobile web. A year later the gap had widened to 86% against 14%. That’s quite a large difference and one that is still expanding. The fear is that, as mobile use increases, the web as we know it is in terminal decline.

So what lies behind this trend? Well, it turns out that what customers in our industry really want is a better user experience. An experience like they find in native apps in fact.

In response, the three main cross-OS browsers (Chrome, Firefox and Opera) have been working together to bring the feel of native apps to the user on the web. The goal is to bring to the web browser a number of features that give the user that native app feel, achieved through a number of new and existing technologies.

The result is the concept of the PWA, which can be defined as having the following characteristics.

They are based on the principles of progressive enhancement and responsive design. This means they work for all users on all devices.

An app built on this model feels like a native app because it is built on the model of the app shell—more on which later.

Because they live on the web not the device, there is no need for the user to visit an app store to get updates. In this model the developer deploys updates to the server and the user gains the benefit of this immediately on their next visit. And because they are web-based PWAs are searchable, linkable and indexable.

With a PWA loaded in their browser the user can install an icon—created under control of the developers and designers of the site—to their home screen from which it can be launched next time.

But the major change—in Bruce Lawson’s words the “big game changer”—is that PWAs function offline. It is a technology that fits firmly into—and extends—the concept of progressive enhancemenent. In a world where we build our sites mobile-first we should now also be thinking offline-first. If you have ever been on a train trying to access a site through a weak or absent network signal (what Jake Archibald has called “Lie-Fi”) the PWA concept brings the user a baseline experience which is then enhanced by content from the network when it becomes available.

This ability to function offline lies behind the concept of the app shell: elements such as the user interface can be loaded into the browser from the device’s cache before further data is added from the network. This in turn leads to much improved performance, notably much faster load times especially when the user is is experiencing the Lie-Fi effect.

Additionally, the user can be kept engaged with the app when they are no longer actively viewing it through features such as push notifications.

That’s what a PWA looks and feels like. So how does it work?

There are two main technologies behind it: the Manifest and the Service Worker.

The manifest is a JSON file containing metadata that provides the device with information such as the app’s name, a set of launch icons and a preferred URL to use when the app is launched. Via this file the developer is also able to declare other properties such as the default orientation and the display mode—whether the app appears with or without the browser chrome and URL bar for instance. The full spec of the manifest is available here.

The Service Worker powers offline working. This can be thought of as a proxy that sits between the browser and the network. It has the ability to intercept requests and responses and manipulate these in various useful ways. Most commonly it is the means by which the device can cache content received from the network and serve it up as requested in future without the need for a further network request. The draft Service Worker Specification can be found here.

As the technology evolves the Service Worker will expand the capabilities of the web browser beyond this. Alongside push notifications they are currently able to update data in the background, while the user is away from the app and handle device data such as geolocation.

The PWA is an extremely exciting development in the web, and a logical extension of the concept of progressive enhancemenent. It is still early days for the technology and there is much up for grabs. A best set of working practices are yet to be established but much like the concept of Responsive Design, which first emerged around 2010, we can expect it to evolve into the established way of building for the web in the very near future.

This is a version of a post that originally appeared on the Developers’ Blog at the Money Advice Service.

Add a comment

Recent posts

Wednesday 9 November 2016

It’s President Trump, OMG

Saturday 29 October 2016

An introduction to Progressive Web Apps

Friday 24 June 2016

How the EU Referendum was won

Thursday 16 June 2016

The EU Referendum: why the “bosses’ club” argument fails

Tuesday 14 June 2016

The EU Referendum: a left case to remain

Monday 21 September 2015

Why piggate is not funny

Saturday 5 September 2015

Should the left be worried by Jeremy Corbyn’s foreign policy?

Sunday 30 August 2015

Jeremy Corbyn confuses the left

Tuesday 25 August 2015

Ricoh Arena railway station: farce upon farce

Saturday 15 August 2015

Will Jeremy Corbyn make Blairism extinct?

Friday 19 December 2014

Russell Brand and the spoiled paella

Thursday 4 December 2014

New porn restrictions should worry us all

Friday 19 September 2014

Scotland votes, Cameron quivers

Tuesday 3 December 2013

Spotify bites back

Sunday 24 November 2013

Ed Miliband spins his Desert Island Discs

Thursday 7 November 2013

Russell Brand on revolution

Saturday 2 November 2013

A response to Supporters Direct

Sunday 8 September 2013

Reflections on the Sixfields boycott

Thursday 23 August 2012

The Assange debate leads down a blind alley

Saturday 18 August 2012

The Responsive Manifesto

Sunday 26 February 2012

Why I won’t be buying The Sun on Sunday

Sunday 12 February 2012

Racism in football—how much has changed?