What are Progressive Web Apps?

Google is on a mission. They’re big advocates of Progressive Web Apps and they want everyone else to share their enthusiasm for a new ‘application model for the web.’

The phrase Progressive Web App (PWA for short) was first coined back in 2015 by freelance designer Frances Berriment and Google Chrome engineer Alex Russell.

Whilst the name may be relatively unknown and not altogether that popular, the idea behind it, certainly is.

And the phrase has at least helped people unite around a name that has sparked discussion and raised awareness of an approach that is set to shake up the web as we know it.

So we know the name, but what is a Progressive Web App?

The idea behind PWAs appears to be as much about the user experience they can deliver as the technology that they’re built on. That’s why you’re unlikely to find a consensus online over exactly what qualifies as a PWA.

Simply put, Progressive Web Apps harness the capabilities of modern browsers to deliver an app-like experience. In doing so, they take the best of the web (accessed via browser) and the best of applications (accessed by app stores). That’s the theory. And a lot of it is theory. PWAs are a model and whilst it is based upon a few concrete foundations, the nuts and bolts are largely open to interpretation.

So, if a PWA marries websites with apps, presumably it does away with the limitations of both and leaves us with just the good stuff? Correct (in theory!).

One of the key advantages that websites have over apps is the ability to update them without being at the mercy of an app store. There are no lengthy review processes or restrictions. Nor are they subject to third-party rules and regulations.

Whilst websites are easier to update, apps do generally benefit from higher rates of engagement. To a user, installing an app is more of a commitment, it requires greater buy-in and with that comes a greater inclination to make use of it. Websites that live in the browser don’t have that luxury. Visits can be fleeting and attention-spans are short.

Broadly speaking, Google considers that a Progressive Web App should be reliable, fast and engaging. They should load instantly, respond quickly to user interactions and provide an immersive user experience. But that’s quite broad and you might argue that uptime, speed and interaction are all prerequisites of any good, traditional website - so does that make it PWA?

In order to understand what really qualifies as a PWA, we need to look beyond the broad definition and look instead at the practical requirements. Again, Google has taken a lead on this by first outlining the ‘baseline’ requirements - essentially these are the things that must be implemented as a minimum to be considered a PWA. Beyond the baseline, there are the “nice to haves” - things that aren’t necessarily a requirement, but will help to deliver the kind of user experience that Google believes makes for an ‘exemplary’ PWA.

Baseline user experience

• Progressive - works cross-browser with no discernible difference from one browser to another. Users should not be expected to use a particular browser
• Responsive - capable of working across all devices including desktop, tablet and mobile
• Connectivity independent - functions as expected irrespective of the quality of the connection and some (if not all) content is available offline
• Kept up to date - the PWA is well maintained with frequent updates and improvements

Baseline functionality

• Installable - users can save an app to the homescreen on their mobile or the desktop on their computer, without needing to visit an app store
• Served over HTTPS - should be served over a secure connection
• Discoverable - the PWA can be recognised by browsers through the use of a Web Manifest file (this tells the browser that the user can add it to their homescreen or desktop)

Beyond the baseline user experience and functionality, Google also makes a number of recommendations on how you can create an ‘exemplary’ Progressive Web App. These include:

• Content doesn’t jump as the page loads
• Pressing back from a page retains the scroll position on the previous page
• App install prompts are not used excessively
• Fast first load (even on 3G)
• Site uses cache-first networking
• Use of push notifications

Case Study: Twitter Lite

A good example of a PWA and the benefits it can bring is Twitter Lite.

First introduced in 2017, Twitter Lite is a stripped-back version of the fully-fledged app and is available via the browser. Twitter’s decision to create a PWA was born out of a desire to better serve users who were otherwise hindered by slow mobile networks, expensive data plans or even a lack of mobile phone storage.

Twitter Lite “minimises data usage, loads quickly on slower connections, is resilient on unreliable mobile networks, and takes up less than 1MB.”

Twitter Lite is a PWA in action. It is fast, accessible, and retains all of the key functionality that Twitter users have come to expect. It does a great job of highlighting why there is merit in committing to turning your existing website into a Progressive Web App. And the stats support Twitter’s decision to build Lite. They saw a 65% increase in pages per session and a 20% decrease in bounce rate.

Does my current website qualify?

If you are familiar with Google Chrome development tools, you can use Lighthouse to run an audit. The audit will scan your website to test how fast, installable and optimised it is, before presenting a checklist of the requirements that the website meets and where changes need to be made in order for it to be considered a PWA. Your existing website won’t qualify as a PWA ‘out of the box’ because of the requirements outlined above. But running a Lighthouse audit is a good starting point.

Summary

Progressive Web Apps are still in their infancy but, as with anything in the web, it’s about awareness. At the moment there is still uncertainty over precisely what PWAs are, which isn’t helped by a phrase that is open to misinterpretation and a definition that even its pioneers (Google) have left intentionally obtuse. But the foundations are there and there is a commitment from the likes of Google, Apple, Facebook and Twitter to either harness the power of PWAs for themselves or to help others to do so.

We’re certainly keen to see how the principles and ideas behind Progressive Web Apps will change the landscape for websites and web apps. Watch this space!