What’s a Progressive Web App (And Why Should You Care)?

In 2016, mobile users first surpassed those accessing the web from desktop devices. Since then, mobile hasn’t shown any signs of slowing down.

As everyone looks for how to make websites, and web apps, more mobile-friendly, you’ll increasingly start to come across the phrase “Progressive Web App”. Today we’re looking at what this is, how it differs from other technologies like AMP, and how you can get started.

Mobile Isn’t Slowing Down

A study from Stone Temple demonstrates how this divide continues to grow with each passing year. Here is how those usage trends changed from 2016 to 2017 in the U.S. alone:

And mobile seems to be even more popular with global users:

As such, we have to ask ourselves, “How do we improve upon the mobile experience as it stands? Have we reached the pinnacle of mobile-friendliness?”

Google took it upon itself to answer that question with the introduction of the progressive web app in 2015. Let’s explore what the future of the mobile web looks like with progressive web apps and why you should care.

What Is a Progressive Web App?

A progressive web app (PWA) is one that bridges the gap between mobile websites and mobile apps. While it would be easy to describe a PWA as a mobile website wrapped inside an app shell, there’s much more to it than that.

Essentially, it takes the mobile experience users want, and amplifies it with all the good stuff that comes from having your own fully responsive native app. You can expect the following from a progressive web app:

App-like UI and navigation

Pagespeed

Reliability

Home screen presence

Offline capabilities

Telephony features (like push notifications and geolocation)

There are many types of websites that can benefit from having a PWA. Social networks like Twitter have already made the shift.

Media companies like Forbes, real estate sites like Housing.com, and hospitality services like Ele.me have successfully rolled out PWAs, too.

Each has experienced different results, although the outcome is always the same—faster loading times, enhanced user interface, and great convenience and access. Which all lead to more engaged users.

How Do You Build a Progressive Web App?

Unlike native apps which usually require the hiring of app developers to manage the process and a large investment of funds to do so, progressive web apps are much easier and are often cheaper to build.

A progressive web app consists of two parts: a web app manifest and service workers. Allow me to explain further.

Web App Manifest

This is a JSON file that defines the app-like elements of a PWA. It includes things like:

Name of the app

App icon

Navigation design and elements for the header and/or footer

Design of the splash screen

Other metadata

Service Workers

It’s the service workers that really give progressive web apps their power over the standard web experience.

Service workers are configured through a JavaScript file. What they do is make your app run as efficiently and lightning-fast as possible. Plus, whether your users are online or offline, they always have access to your content as service workers function much like caching proxies do.

In terms of building a progressive web app, you have a couple of options.

The first option is to utilize Google’s developer documentation and write your own PWA. But that option still requires an investment of your time and resources.

If you’re not prepared to handle that level of work, or would rather focus your energies elsewhere, you can use a tool like the Duda web design platform to easily convert your website into a progressive web app.

All it takes is one click to activate the feature, and just a few more to configure it to your liking!

How Is a Progressive Web App Different From a Website?

As you can see from comScore’s 2017 Digital Mobile App Report, most of the time mobile users spend on their phones is actually with apps and not with browser-based websites.

There are very good (and valid) reasons why mobile users prefer the app-like experience over the basic browser. And because the PWA helps users make that leap without having to commit to yet another resource-intensive download from the app store, you should pay close attention to the following differences and benefits.

Progressive web apps are the optimal choice over the mobile web because: