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 follows:
Responsive
Connectivity-independent
App-like interactions
Fresh
Safe
Discoverable
Re-engageable
Installable
Linkable
What are the requirements for a PWA
1. Progressive web apps should be 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.
2. Progressive web apps have to be Integrated
A Progressive web app should feel like it's part of your device. It should be integrated, which means it shows app-like behavior and uses device capabilities.
The website should be able to run in its own shell. This can be achieved by the "add to home screen" 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 home screen. On iOS and Google Chrome, it's a bit more hidden. For iOS, you need to access the "add to home screen" 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.
Besides a standalone app, there are also other app-like features that are present in a PWA, such as app icons, splash screens, and themes. 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.
3. It's important to be 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.
4. Engaging Progressive web apps
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 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 Progressive web app 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 increase. So measures should be taken to ensure search engine optimization for your website.
Need a mnemonic for this? A PWA must be on FIRE.
Uber's PWA: 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 interact 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 home screen" 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.
Which other companies are investing in PWA's
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/. In the next blog, we'll take a deep-dive into the reasons why en when to choose for a PWA.
