Progressive Web Apps — What Are They and Why Should You Use Them?

You’ve probably heard of Progressive Web Apps, or PWAs as the next thing to replace Native Mobile Apps, but many of us still have the question… what even is a Progressive Web App? This is the exact question I had three months ago, when a colleague suggested I build my website as a PWA, instead of a native mobile app or desktop site.

My next questions were: Why would I create a PWA instead of a desktop site or native mobile app? Will I need to learn a new technology? How will this change the structure of my app? Where do I even start?

I was excited to find that the answers to these questions were much simpler than I had expected, and the benefits of creating a Progressive Web App were huge. In this article, I’ll provide clarity and guidance for people with the same questions I had.

So, first things first — What is a Progressive Web App?

Is this a new technology? Well, not really. A Progressive Web App is a normal web application built with existing technologies, in a way that gives it a similar look and feel to a native mobile app. That’s not so complex, right?

The term was coined in 2015, and it describes web apps with a certain set of features that give it an native app-like appearance. To be considered a PWA, an app should:

• Be designed with progressive enhancement: emphasizes core webpage content first
• Be responsive: suitable for desktop, mobile, tablet and other devices
• Have offline functionality: uses service workers to control caching and improve offline experience for users
• Have app-like look and feel: when PWA criteria are met, users are prompted to download app to home screen, so it’s accessible from the desktop like a native app

This might sound somewhat vague, but like I said, a PWA really is just a normal web application that adheres to a set of guidelines. We’ll get into how to specifically meet this criteria in a later section.

I get what a PWA is, but why should I make one?

There are a ton of benefits to building a Progressive web app, and most revolve around improving the user experience of your application. After all, Google defines a PWA as an app that is “reliable, fast and engaging”, and that sounds pretty great. Here are a few benefits of PWAs:

Photo by Rahul Chakraborty on Unsplash

• Users can download the web app to the home screen on their phone. Users don’t have to open a browser to access the site, they can access it directly from the home screen as if it were a native app.
• Because of criteria for service workers and offline functionality, PWAs work better in low connectivity and offline. PWA’s work reliably and load more seamlessly, even in bad network conditions. This point is huge, because slow loading causes users to lose interest. A study by DoubleClick found that “53% of mobile site visits are abandoned if pages take longer than 3 seconds to load”
• Progressive Web Apps can be preferable to native mobile apps in many situations (see below).

Okay, but why wouldn’t I just make a native app?

Traditionally, native apps were preferable to mobile websites because they had more features and better user experience.

Unlike a web app, native apps had access to the phone’s hardware (like the camera and mic), could be accessed directly from the home screen, and they had offline functionality. But, thanks to improvements in Javascript, web browsers and other technologies, this functionality gap is closing.

Not only have PWA’s matched many capabilities of native mobile apps, but they also have these added benefits:

• No app store: Users don’t have to go from your website to the app store, search for the app, install the app, then open the app. Reducing this friction is important because each step will cost you 20% of users. Instead, users can download the app directly from your website and open it on their home screen.
• Immediate updates: You can update your app directly, and don’t have to go through process of sending updates through the app store.
• You only need to build one app: As Dan Dascalescu points out, traditionally, you would have to build 1) Mobile/Desktop website, 2) native iOS app, and 3) native Android app. Today, you just have to build 1) PWA 2) native iOS app. In the future, as apple adds full PWA support, you’ll just have to create 1) PWA.

In short, PWAs are already awesome, and with new features and support on the way, they’re going to become even more powerful.

At this point, hopefully you see the benefit of PWA’s and you’re wondering, How do I make one? Where do I get started?

I see the benefits — Now how do I make a PWA?

Thankfully, building a Progressive Web App is very similar to making a normal web app, with a few more steps involved. You can essentially build your web app as you normally would, but take a few extra steps like making pages responsive, configuring service workers, ensuring that your site is served over HTTPS and adding a web app manifest. You should keep this checklist in mind and use the criteria as a guideline. If you’ve met the criteria, Google Chrome will prompt users to add the app to the home screen.

I would suggest checking out this Google code lab to get started. Also, you can use a boilerplate like Create React App, which does a lot of the heavy lifting for you by pre-configuring service workers and a web-app manifest.

Finally, test it with Lighthouse! Lighthouse is an automated tool by Google for auditing any website against PWA guidelines. Lighthouse will give you a report of how well your app fits the criteria, and suggestions for how to improve.

How about a few examples?

Grab your phone and check out some awesome examples at pwa.rocks!

Also, if you’d like to see the project that inspired my journey into Progressive Web Apps, check out my web app here.

I hope this article has been helpful, if you have any questions or comments, please post them below!