An introduction to Progressive Web Apps

The world of web development is currently getting very excited about something called the Progressive Web App (PWA). When a delegation from the Money Advice Service Front End team attended the Render Front End Conference earlier this year 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.

Firstly, 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 enhancement. In a world where we build our sites mobile-first (very much the philosophy at the Money Advice Service) 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 enhancement. 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.

Launching the Retirement Adviser Directory

On the 7th April we launched the Retirement Adviser Directory. This marked the culmination of over six months of work. The project aimed to provide people reaching retirement age with a directory they can use to search a list of regulated financial advisers who can help them plan for retirement. The project was split into […]

Contributing to Open Source Software Projects

This Saturday I participated in my first hackathon in Vienna, Austria. Along with roughly 60 other attendees we gathered for ROSSconf (Ruby Open Source Software Conference) in the fabulous Sektor5 offices to hear five speakers talk about the open source projects they are passionate about. They gave us an introduction to their project, and some […]

Bath Ruby Conference 2015

Friday, 13th March a small cadre of developers from the the Money Advice Service development team traveled to historic Bath to attend the first annual Bath Ruby conference. Organised by Simon Starr the conference was held in the beautiful chandelier-lit Assembly Rooms, generously donated to the conference by the Bath & North East Somerset Council. […]

A basic implementation of SVG sprites

As devices with high definition displays have become the norm the Money Advice Service development team has had to consider moving away from bitmap image formats to more flexible vector-based formats, such as scaleable vector graphics (SVG). However, the MAS website is required to support Internet Explorer 8 as part of our organisation’s browser matrix, […]

Speaking at RubyConfLT 2015 – Vilnius, Lithuania

Just a quick one! I’ll be speaking at Lithuania’s RubyConfLT, hosted in Vilnius just next week. So far it’s looking like another awesome lineup, and I’m honoured to represent the Money Advice Service as part of it. I hear it’s the first time this particular conference has invited international speakers too. So double honours. <3 […]

Open Source Inspiration at FOSDEM 2015

On 31 January I attended the Free and Open Source Developers’ European Meeting. FOSDEM is a collection of over 550 lectures, attended by over 5000 developers who have a passion for open-source software. Set in the Université Libre de Bruxelles which, astoundingly, provide the venue to the organisers free of charge, the conference runs over […]

Getting your stakeholders involved in agile processes

We recently launched the Your Money Advice blog, a companion website to the main Money Advice Service site with the aim to present content in a more conversational and accessible way. A notable difference with this project was that the key stakeholders attended the daily stand-ups, and there were some distinct benefits as a result. It allowed […]