PWA: how - and why - to build a website on steroids.

PWA: how - and why - to build a website on steroids.

Progressive Web Apps

 

PWAs or Progressive web apps, at its core you could call them "websites on steroids". But what exactly is a PWA? What do you need to make them? And most importantly, why would you use them?

Let's start with some history. The term Progressive Web App was first coined in 2015 by Alex Russell from Google and Frances Berriman. In their article Progressive Web Apps: Escaping Tabs Without Losing Our Soul, they launched the idea of a PWA. They defined the attributes of this new class of applications as following:

  • Responsive

  • Connectivity-independent

  • App-like interactions

  • Fresh

  • Safe

  • Discoverable

  • Re-engageable

  • Installable

  • Linkable

Too difficult to remember? You can also opt for the shorter version launched by Google in its 2018 Google.io talkPWAs are FIRE!

In which FIRE stands for:

  • Fast

  • Integrated

  • Reliable

  • Engaging

Each of these attributes deserves some extra attention.

 

Fast

53% of users will abandon a site if it takes longer than 3 seconds to load. That's why the first requirement is: A website must load fast and feel fast.

On mid-range mobile devices with slow 3G connections, a good target would be 5 seconds or less to become interactive. For subsequent pages, a target of 2 seconds should be set. When browsing over a better connection, the goal for a first page load should be under 3 seconds.

There are many ways to achieve this goal, some involving more development work than others. Possible ways to achieve better speed are:

  • Optimizing assets such as images and video

  • Setting a performance budget

  • Avoiding large frameworks in your codebase. For example using Preact instead of React.

  • Caching resources of your website (we will come back to this later)

You can also create the perception of an even faster website by using loading spinners or showing placeholder content.

 

Integrated

A PWA should feel like it's part of your device. It should be integrated, which means it shows app-like behaviour and uses device capabilities.

The website should be able to run in its own shell. This can be achieved by the "add to homescreen" functionality all modern browsers offer. Each OS has a different way to handle this. Android is the most optimized for PWAs. When a site is installable, Android simply shows a dialog to add to the homescreen. On iOS and Google Chrome, it's a bit more hidden. For iOS, you need to access the "add to homescreen" functionality through the share button which is currently hidden in the options. On Chrome, a plus button is shown in the search bar when your web app is installable (if you are still using a version prior to Chrome 76, it is hidden in the options).

Besides a standalone app, there are also other app-like features that are present in a PWA, such as app icons, splash screens and theming. But there is still some way to go when it comes to these app-like features. To close this gap between web and native, Google has started Project Fugu to document and develop these missing features.

 

Reliable

A PWA should work in all circumstances and should not experience network flakiness. This means it should be able to handle all network connections such as very slow 3G and even conditions with no network.

This offline support can be made possible by caching (saving) the resources and serving them when the network doesn't respond. This method can be implemented in many different ways. From caching only the homepage and showing "no connection" messages on all other pages to caching all pages and their data.

Besides saving resources through caching and serving them when needed, you can also save data and perform actions while working offline. In this case, certain calls are put in a queue and executed as soon as possible. This method enables a user to make changes and have them processed once the network is back. 

 

Engaging

The last attribute is the fuzziest: A PWA should be engaging. This means a couple of things.

First, the app should have a good UX. It should be optimized for the device it is displayed on. On mobile, for example, this means responsiveness and optimization for touchscreens. It also means that there should be an appropriate back navigation when needed.

Push notifications can be placed in this group. This feature re-engages your users, pulling them back into the app.

Lastly, a PWA should be easily searchable and shareable on the web. Because a web app can be searched by a search engine or shared by its URL, the threshold to visit the website is lowered and chances of users engaging with your app increases. So measures should be taken to ensure search engine optimisation for your website.

 

 

m.uber

Let's summarize these attributes with an example. Uber’s Progressive Web App is called m.uber (pronounced moo-ber). They have rebuilt their web app from the ground up. Their mission was two-fold. Primarily, they wanted to enable all users to quickly request a ride, regardless of location, network speed, and device. Additionally, they wanted to update their web app to a viable alternative for their native app.

Let’s see how their PWA conforms to the FIRE attributes:

Fast

They have put a lot of focus on optimizing their app speed. It takes three seconds to interaction on a typical 2G connection. Uber made this possible by limiting the number of dependencies and by choosing small libraries. For example, they opted for the smaller Preact library (3kB GZip/minified) instead of the more popular React (45kB).

Integrated

M.uber is available as a standalone app through the use of the "add to homescreen" functionality.

Reliable

By caching the initial HTML response, m.uber can continue to serve content in the event of intermittent network loss. 

Engaging

They have good UX and their URL is easily searchable and shareable.

 

Other Companies

Of course Uber isn't the only company investing in PWAs. Among the other companies with Progressive Web Apps are:

  • AliExpress

  • Starbucks

  • Instagram

  • Twitter

  • Tinder

  • Pinterest

  • Telegram

 

 

Good places to discover PWAs are https://appsco.pe/ and https://pwa.rocks/.

 

Why use a PWA?

So we know what a PWA is. Now comes the most important question. Why would you use a PWA?

Work reliably

A first reason is: to make a web app work reliably regardless of the network connection.

By focusing on fast and reliable apps, PWAs are more user-friendly in low-connection circumstances. Even if you lost your connection for a while.

When your network connection is good, you still get the benefit of a faster website compared to a classic web app. Forbes improved its load time from 6.5 seconds on the old app to 2.5 seconds on its new PWA.

 

Increased conversions

Working reliably is a good feature, that also contributes to the second benefit: the increase of conversions. To clarify: conversion rates are the percentage of prospective customers who perform a specific desired action. For Uber that would be ordering a ride, for Tinder it would be looking at profiles and swiping left or right, and for Pinterest visiting your board and pinning stuff.

A lot of companies have already signalled that their move to PWAs caused an increase in conversions, user engagement, and average time spent on the web app. Here are some examples:

  • Treebo: Year over Year conversion Rate increased by 4 times

  • Lancôme: 17% increase in conversions

  • Pinterest: 44% increase in user-generated ad revenue

  • Trivago: Increased engagement led to a 97% increase in click-outs to hotel offers

A good place to look for more statistics about this is https://www.pwastats.com/

The reason for this is simple. PWAs remove a lot of obstacles that would cause users to leave your site. By being more user-friendly, fast and reliable, people are more inclined to visit more pages and stay longer.

 

 

Alternative for native apps

There are also companies that are looking into PWAs as an alternative for native apps. While we are still a long way from PWAs being an equal competitor, there are some promising benefits.

The first argument is that PWAs have lower commitment. By that, we mean that it has a smaller app size and that it is easily discoverable and shareable. For example, Pinterest has an iOS app of 56MB while the PWA only needs 150KB to load the home page. While the PWA loads code for new routes on demand, it still doesn't cost as much data as the app download. This makes it more likely for users that are minding their storage to keep your app. Users are also far less likely to download an app merely to browse some pages. This is something that is done way more easily on a web app (which you can then add to your homescreen once you notice that you're using it often).

 

A second argument is that you are not tied to the app store and play store (and possibly their restrictions). You can simply deploy a new version without much fuzz.

But if you still feel that availability on the store is important for your app, you can add it to the play store as a TWA (Trusted Web Activity). For iOS, there is currently no plan to incorporate PWAs in the app store. But this isn't that bad, since it isn't really the main objective of a PWA, but rather an added bonus.

The last argument is that there is no (or less) development needed for multiple platforms. You could view it as the ultimate hybrid solution, developing web and mobile in one go. But it is important to remember that each browser possibly needs some fine-tuning.

Looking at it from the native app fan club's side, you may argue that PWAs currently have less device capabilities and that some of the available capabilities are not supported on all browsers yet. To give some examples:

  • Push notifications are not yet possible on iOS.

  • Contact picker has just been added to Chrome and is not available on other browsers yet.

So the least you can say is that it is a relatively new technology. You should, as always, look at it case by case. A messenger app with contacts and push notifications is probably not the best fit for a PWA. But an app that can also work as a website and would benefit from the features of a PWA? Perfect!

 

Technology

Let's end with a look at what we need to make a PWA and what is possible.

Requirements

 

  • The website needs to be served from a secure domain.

  • A service worker needs to be registered to make the app work offline. (This is currently only required  by Chrome for Android )

  • A web manifest needs to be added to list all information about the website.

Let's take a closer look at those last two, service workers and the web manifest.

 

Service workers

A service worker is a script that your browser runs in the background, separately from a web page. For PWAs it is mostly used as a virtual proxy between browser and network. It improves page speed and adds offline capabilities by caching assets.

The service worker also enables features such as push notifications and background syncs.

 

App manifest

The web app manifest defines the behaviour when installed on the device. With fields like:

  • Name

  • Icons

  • Background color

  • Orientation

  • Display (going from normal browser look-and-feel to a full screen native-like experience)

Thanks to the manifest, a PWA can function and look like a stand-alone app.

 

Browser support

Let's conclude with an overview of the browser support.

Mobile

 

 

PWAs are really mobile-first. Most browsers are fully supported. iOS is the odd one out. While they have made some improvements towards PWA's in more recent versions, push notifications are still not available and the manifest doesn't enjoy full support (but there are ways around it by adding custom logic for iOS).

Desktop

 

 

On desktop it is a different story. It is clear that Chrome is trying to be the forerunner for the desktop PWA. A standalone app is currently only possible on Chrome. Push notifications are possible on all browsers, but for Safari you need to implement a proprietary solution.

As expected, Internet explorer has none of the PWA features. But that's where the P (Progressive) in PWA comes into play. You can implement it for all browsers and just have a lesser, but still sufficient, experience on IE.

 

Conclusion

So in conclusion, PWAs are a promising technology that can either be used as a means to improve existing websites or as an alternative for native apps (though this is on a case-by-case basis). This won't be the last you've heard of them, so keep an eye open. Or even better, start making them!