The Ultimate Guide To Progressive Web Apps in 2021

The Ultimate Guide To Progressive Web Apps in 2021

Interested in building a progressive web app? This guide is going to tell you all you need to know – along with 50 examples of the best PWAs on the market! For years we’ve been preaching you need a native app. There were good reasons for that, and we still stand by it.

Table of Content

The Ultimate Guide To Progressive Web Apps in 2021

By converting existing websites and web apps into native iOS and Android apps, our customers vastly improve mobile UX, grew traffic, built more loyalty, and boosted their revenues. Native apps work amazingly well for businesses that want to build a destination for their loyal, repeat users. You can give them the optimal mobile experience, get a valued place on their home screens, and effectively communicate with them through push notifications.

It isn’t easy to get the average user to download an app from the App Store, and if you do there’s a decent chance they’ll delete it to save space after a while. Native apps are only relevant to those who, well, have the app installed. They do nothing for new visitors checking you out on the web for the first time, casual users who drop by now and again and aren’t yet committed enough to install the app, or customers who are on desktop.

These potential customers are absolutely crucial for success too, and native apps don’t really help that much to engage and retain them.

Where native apps fall short, progressive web apps (PWAs) shine. If you have a website, and it’s remotely important to you or your business – you need a PWA.

Read on to find out why. We’re going to define a progressive web app, look at their most important benefits, then break down 50 examples of the best PWAs on the internet right now.

We’ll wrap up with a discussion of native apps vs PWAs, and then tell you what you need to know to build a  great PWA for your own business.

Let’s dive in. By the end of this article, you’ll know everything you need to know to get started on your progressive web app project. Let’s begin with the fundamental question – what is a PWA?

PWAs are great to give a better experience to web visitors. But if you want to send push notifications across iOS and Android, if you want to be on the app stores and give your users the experience they want from a mobile app, they might fall short of expectations. MobiLoud helps you convert your website into native mobile apps, with solutions for news sites, blogs, ecommerce stores and any site or web app, whatever tech stack you use. Get a free demo to learn more and see how it can work for your site.

What Exactly is a Progressive Web App? Let’s define a PWA

Progressive web apps combine the best of the web with features that were previously only possible on native apps.

PWAs live in the browser like a traditional website and are fully connected to the web’s infrastructure of links and search engine indexes. Like native apps though they can be launched from a home screen icon, send push notifications to the user’s device, load in a split second, and be built to work offline.

Progressive web apps are not separate from your site. They are an enhancement of your site that brings it up to date with current best practices and leverages cutting edge web technology like service workers to provide an app-like experience from within a mobile browser.

Maybe you still aren’t sure exactly what they are though.

This is understandable, as the term is bandied about a lot but solid definitions are elusive. Let’s look at the history of the term to clarify things.

The Original Definition of a Progressive Web App

The term “Progressive Web App” was coined in 2015 by Francis Berriman and Google engineer Alex Russell. They had been observing the emergence of a new class of web applications, and over dinner decided to define and name them.

They came up with the following criteria:

  • Responsive: to fit any form factor
  • Connectivity independent: Progressively enhanced with Service Workers to let them work offline
  • App-like-interactions: Adopt a Shell + Content application model to create appy navigations & interactions
  • Fresh: Transparently always up-to-date thanks to the Service Worker update process
  • Safe: Served via TLS (a Service Worker requirement) to prevent snooping
  • Discoverable: Are identifiable as “applications” thanks to W3C Manifests and Service Worker registration scope allowing search engines to find them
  • Re-engageable: Can access the re-engagement UIs of the OS; e.g. Push Notifications
  • Installable: to the home screen through browser-provided prompts, allowing users to “keep” apps they find most useful without the hassle of an app store
  • Linkable: meaning they’re zero-friction, zero-install, and easy to share. The social power of URLs matters.

You can see how these criteria fulfill the “web app” part of the definition.

For many years companies like us and others created platforms that allowed businesses to create app experiences with web technologies. This works great to this day, but there are tradeoffs. In order to create great native app experience you lose the discoverability and linkability of the web.

New web technologies like service workers (we’ll get into those later) emerged and changed things – allowing developers to build experiences that took the best of native app UX and put that in the browser, thus retaining all the benefits of the web.

You no longer needed to accept a mediocre mobile web UX, while pushing people to download your native apps to get the real deal. You could provide a great mobile experience across the App Stores and the web, to everyone who interacted with your brand online.

This is what Berriman and Russell observed. They didn’t invent anything, they noticed a shift in the web and named it.

What about the “progressive” part?

In this context it means that the apps are built with progressive enhancementThis is a design technique focused on building a “baseline” experience that works for everyone but that upgrades and enhances on more advanced devices. The experience of a progressive web app isn’t necessarily the same for all users, it adapts based on the power of their device as well as the permissions they grant.

So is Berriman and Russell’s definition enough? The problem is that few PWAs actually fulfil all of those criteria. They are more like a wish list, or a target to aim for, or a model case.

Google’s Definition of a Progressive Web App

Microsoft has been enthusiastic about PWAs for some time. Apple took some convincing and is now (mostly) in. Among big tech though, it was Google that really championed PWAs from the beginning.

That said, Google themselves don’t seem to be 100% sure about the definition. Back in 2015 they put out a list of 10 characteristics, then reduced that to six, then added three new ones.

Currently, Google’s definition of a progressive web app includes three pillars. In their introduction page, they state that PWAs are:

“Web applications that have been designed so they are capable, reliable, and installable. These three pillars transform them into an experience that feels like a platform-specific application”

This is more helpful, but not that helpful as it’s so broad. It hints at the key point though, that PWAs are bringing experiences to the web that were traditionally associated with native platforms exclusively.

The Technical Definition of a Progressive Web App 

A third way that we can define a PWA is by specifying the purely technical, rather than UX criteria.

This is what web developer and author Jeremy Keith attempted in his 2017 blog post What is a Progressive Web App?.

Keith thinks that the confusion about PWA definitions is unfounded and that basically, three criteria must be met:

  1. HTTPS – PWAs must run on secure servers employing HTTPS. Service workers are essential for their potential, and they can only be used if you have HTTPS in place.
  2. A Service Worker – essentially a JavaScript file that runs separately from the main browser “thread” and allows the developer control over how the app handles network requests and caching. This helps to drive the impressive speed and offline capabilities of PWAs.
  3. A Web App Manifest – a JSON file that provides a description of the application to the browser, including details like the name, author, icon, description, and resources to run it. This ensures that the application is discoverable.

Keith goes on to note that this is a minimal, bare-bones definition. PWAs are capable of a whole lot more, but they must fulfill these three technical criteria to make the cut.

So we’ve seen the original observational/aspirational definition, Google’s UX-driven definition, and a minimalist technical definition. What can we surmise? Although there may still be a little ambiguity, we now have a good idea of what a progressive web app is.

A PWA is a modern, secure, fast-loading website that uses cutting-edge web technologies to achieve these characteristics. Unlike traditional websites, it performs and feels to the user like a native app – and “escapes” the browser tab in the process.

“These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins”

This is a great way to put it. PWAs are the latest generation of the web. They are web apps that are able to leverage the potential of modern browser technology. By turning your own website into a PWA, you give it the “vitamins” necessary for it to perform optimally.

We’re now going to move on now to the benefits of building a progressive web app, before looking at 50 PWA examples to inspire your project.

Progressive Web App Benefits

We stated earlier that if you have a website, and it is in any way tied to the success of your business – you need to build a PWA.

That may seem like a bold statement, but it’s the truth. Why?

In a nutshell, by not building a PWA you are likely leaving customers, revenue and growth on the table. As Pete LePage and Sam Richard from Google’s web team put it:

“The numbers don’t lie! Companies that have launched Progressive Web Apps have seen impressive results. For example, Twitter saw a 65% increase in pages per session, 75% more Tweets, and a 20% decrease in bounce rate, all while reducing the size of their app by over 97%. After switching to a PWA, Nikkei saw 2.3 times more organic traffic, 58% more subscriptions, and 49% more daily active users. Hulu replaced their platform-specific desktop experience with a Progressive Web App and saw a 27% increase in return visits”

This just scratches the surface.

Let’s take a look at the results that other well-known brands have achieved as a direct consequence of launching PWAs.

How are all these amazing results possible? A lot of it boils down to the fact that PWAs provide a much better user experience, and great business results flow from that.

There’s more to it than that though. Let’s take a more detailed look at some of the key progressive web app benefits, starting with the most important one – speed. 

PWAs are Lightning Fast

Modern consumers expect instantaneous loading. If something doesn’t load in a heartbeat, many will lose interest, perhaps permanently. This is both self-explanatory, and supported by a ton of data:

  • Almost 50% of users say their top frustration on mobile is waiting for slow pages to load (source)
  • Pages that load within 2 seconds have a 9% bounce rate, pages that take 5 seconds have a 38% bounce rate (source)
  • A “sharp decline in conversion rate” is associated with average load times increasing from 1 to 4 seconds (source)
  • Every 1 second improvement in load time boosts conversion rate by 2%, while a 100 millisecond improvement generates up to 1% more incremental revenue (source)

Essentially the faster your site loads, the better. If you make your customers/readers/users wait then a decent % of them will bounce and not give you their money.

Improving site speed drives better results across the board. That’s all there is to it.

So how can a PWA help you to achieve this? Progressive web apps are fast. Really fast.

Pinterest for example, managed to cut their “time to interactive” loading time down from a sluggish 23 seconds to just 5.6 seconds. This was on average Android hardware over a slow 3G connection. This had a welcome knock-on impact on key metrics.

Not bad at all. Pinterest’s results are not unusual at all though.

Streaming platform ZEE5 tripled site speed and halved buffering time by building a PWA. Uber’s PWA loads in less than 3 seconds on 2G networks. Forbes cut mobile loading times from 6.5 seconds on its previous mobile site to just 2.5 seconds with its PWA.

Speed improvements are guaranteed when you build a good, well-designed progressive web app.

Why are Progressive Web Apps so Fast?

PWAs are so fast thanks to the all-important service workers. As Jason Grigsby puts it in his excellent book Progressive Web Apps:

“Progressive web apps use service workers to provide an exceptionally fast experience. Service workers allow developers to explicitly define what files the browser should store in its local cache and under what circumstances the browser should check for updates to the cached files. Files that are stored in the local cache can be accessed much more quickly than files that are retrieved from the network”

Grigsby goes on to explain that:

“When someone requests a new page from a progressive web app, most of the files needed to render that page are already stored on the local device. This means that the page can load nearly instantaneously because all the browser needs to download is the incremental information needed for that page”

One of the traditional advantages of native apps is that they can be lightning fast. They achieve this in a similar manner – all the files necessary to run the app are downloaded when you install it, and it only needs to retrieve new data. Service workers allow progressive web apps to bring a similar impressive performance to the web!

PWAs Provide an App-Like UX on the Web

Speed, which we’ve already discussed, is obviously a huge part of UX. There are other important factors though and PWAs help out here too.

Native mobile apps were long the gold standard for mobile UX. They still are (in some ways at least), but PWAs can now match much of their feel and functionality straight from the browser.

For example, PWAs can:

  • Work offline or in poor network conditions (more on this next)
  • Be installed on the user’s device and accessed via a home screen icon like a native app
  • Send push notifications to the device’s lock screen (unfortunately only on Android)
  • Be developed to deliver a full screen, “immersive” experience with a navigation structure that mimics a native app
  • Make use of animations like a native app
  • Be developed to access the device’s hardware like the camera and GPS

The early mobile web was pretty rough. The old paradigm of a desktop browser was “bolted onto” smartphones where it didn’t really fit. The responsive design era improved this significantly, but there was always something lacking.

Native apps were unambiguously built for smartphones. They always fitted the experience of the device better. PWAs have blurred this line though, the distinction in terms of experience can be hard to pinpoint.

For example – have you ever used Instagram Lite, Google Maps Go or Twitter Lite?

You can download them on the Google Play store and check them out – and see how they feel like any other native apps.

You would be forgiven for assuming that these are lighter, leaner versions of their main native apps. As you might have guessed though – they are progressive web apps. 

This goes to show the potential of PWAs for recreating the native app experiences we all know and love. When we get onto the examples a little later, you’ll see exactly what we mean!

Note: you may have noticed that these PWAs are live on the Google Play store. Google opened the Play Store to PWAs in early 2019! This shows how confident they are about the future of PWAs as truly cross platform applications. You have to jump through a few hoops to get your PWA on there, but it is certainly possible. As of now, there is no information from Apple about whether this will ever be possible on the iOS App Store.

PWAs are Reliable 

We’ve all had the experience of trying to use a website or web app on a shaky mobile connection. It isn’t fun.

Thanks again to service workers, that define specifically what the browser should cache locally – PWAs can be built to offer a fast, full experience even when the user has poor connectivity.

This can be taken a step further too. Through “precaching”, which is when the whole application is downloaded and stored on first visit, PWAs can also function completely offline!

This is really important, when you consider how many people still live in rural and poorly served areas, and the billion or so people coming online for the first time over the next few years – many of whom will not enjoy flawless connectivity.

Leave a Reply

Your email address will not be published. Required fields are marked *