An Introduction to Progressive Web Apps

By Jake Rocheleau. in Web Design. Updated on May 24, 2019.

Most developers have at least heard some buzz around Progressive Web Apps. These are widely supported by tech companies such as Google and are quickly becoming the norm for multi-device web applications.

But, what’s exactly the difference between a typical and a progressive web app?

For developers, it’s a whole world of difference. Progressive Web Apps use modern web APIs to create native app experiences in the browser. This means developers can build fast-loading dynamic apps without using hybrid frameworks.

In this guide, I’ll cover the basics of Progressive Web Apps, some primary features, and how you can get started building your own.

What are Progressive Web Apps?

Progressive Web Apps (or PWAs) take advantage of web browser APIs to create native app experiences right in the browser on any device.

Ultimately, Progressive Web Apps encompass a handful of technologies that developers can use to create powerful native-like applications. Many come from Web APIs such as the Service Workers API or the Push API.

There are quite a few requirements to call something a PWA but these are the most important ones:

Is fully mobile responsive.
Adheres to progressive enhancement.
Able to install locally on smartphones and tablets.
Runs offline without Internet, using service workers.
Separates content from functionality using the app shell.
Builts on HTTPS for greater security.
Discoverable in Google search.
Has dynamic app-like pages but each still has its own URL.

If you’re thinking of building a small web app you might try creating a Progressive Web App instead. This comes with a bit of a learning curve but you have so much more control over the user experience as a result.

Let’s dive into the fundamentals of Progressive Web Apps and learn what makes them tick.

Service workers

Every single Progressive Web App needs service workers. These are like traffic officers who coordinate where traffic is going, where data is coming from, and how it all gets organized and cached.

In simple terms, the service worker operates as a JavaScript file and runs in the background of your web app. Whenever the user performs an event, it calls the service worker script to either pull data, save data, or both!

Using the Service Worker API is essential to running an offline-supported PWA. This is how you transmit data between views and how you can request data from a local database. But, this is mostly advanced stuff that you learn by working on a PWA project.

Take a peek at the Service Workers Cookbook for basic snippets and live demos. This is a fantastic way to learn by studying what others have done and cloning that in your own apps.

If you’re hoping to build a Progressive Web App start with the Service Worker API. Just tinker with it and set up a simple demo locally. This will set the groundwork for later building custom application features and pages that all run through service workers.

For beginners’ guides and detailed code snippets, I specifically recommend these resources:

The app shell

Most native apps follow an app shell architecture where the data and app code is completely separate from the UI. The application shell can be cached locally so each page loads incredibly fast.

This keeps with the same “native app” feeling where the interface always remains visible but the content/functionality loads differently each time. Check out this page on the Google Developers site to learn a bit more about the app shell model.

Most apps have a very simple app shell and you should design your architecture with simplicity in mind.

Typically, the app shell has these main elements:

Top navigation bar links.
Refresh button (optional).
Page background container.

You can find a nice case study here about Google’s I/O Progressive Web App shell architecture. They also offer some tips for building your own shell architecture, caching it, and pulling it automatically for every page.

Think of the shell architecture as all the static UI elements you’ll use on every single page. These should be separated from the rest of your code and cached for easy reuse. Also check out Google’s intro to the subject with plenty of code snippets to help you get started.

Online & offline support

Most native apps run fine without Internet. Progressive Web Apps are meant to follow this same behavior.

Through service workers, you can build local caches with JSON code for each page. This way users can browse your web app locally. You might also include a manifest file to define your icons, splash screen, and other launch settings.

If you’re using the Service Worker API take a peek at the Cache API which is part of the same framework. It’s generally the best way to store data locally and access it from service workers later.

You can also test any web app using Lighthouse, a free tool for checking feature compliance and support for PWA technologies.

PWAs always require offline support through the Service Worker API, so they can work in low-connectivity states. Lighthouse is the best way to test for offline support along with a host of other features.

Live examples

Studying live PWAs and seeing how they work is a great way to learn. However, the Progressive Web App market is still emerging, so many of the best ones are scattered into various corners of the Internet.

But, thanks to the PWA rocks gallery, I’ve curated a few amazing examples to show off what PWAs can really do.

1. Currency Converter

This fairly simple currency converter takes exchange rates and calculates the current differences between a ton of currencies worldwide.

You’ll notice this web app is fully responsive, supports touch, and auto-updates without any page refresh.

These are just some of the features you expect in any typical Progressive Web App. This app can also be saved locally to your phone to work offline, although it does connect to a JSON file to check current exchange rates.

2. English Accents

I simply adore this web app because it’s both unique and incredibly well-designed. The English Accents Map curates videos online where people carry accents from specific regions of the US and UK.

By clicking anywhere on the map, you can listen to how people pronounce certain words in different parts of the world. The app is lightning fast and it’s open-sourced on GitHub for anyone to check out.

The internals run on React/Redux with Firebase and an API connection to Google Maps. Definitely a great example of something fairly simple for beginners to study and learn.

3. Flipkart

Lastly and most surprisingly, let’s see the Flipkart website. This full e-commerce shop is, in fact, a Progressive Web App.

It’s fully responsive and loads pages dynamically. Page URLs are appended to the browser, so you can copy/paste and share them like a typical website.

This is easily the most complex PWA I’ve ever seen. I’m amazed the developers were able to create such a seamless experience on the web for all users, let alone supporting local offline storage, too.

And, while I couldn’t find a repo for the entire Flipkart source code, there is a Flipkart page on GitHub with smaller code snippets from their developer team.

Learning more

Progressive Web Apps are incredibly popular and will surely gain steam as more developers switch over from native/hybrid apps.

There’s a yearly summit called the Progressive Web App Summit and they publish videos on YouTube you can watch for free. This is a great way to pick up some pro knowledge without paying for a ticket.

But, if you’re looking for more detailed PWA coding guides definitely check out these tutorials: