The Future of the Web Is Here Already

And it’s called the Progressive Web App. Let me explain what a PWA is, how it came to be, what it can do, and why they are the future of the web.

Erik van Baaren
Nov 29, 2019 · 6 min read
Image for post
Image for post
Source: Google PWA site

You won’t find one single definition of a PWA, so I will define it in my own words:

The term Progressive Web App was coined by Frances Berriman and Alex Russell. Alex Russel first wrote about it on his blog and in a Medium post back in 2015, called “Progressive Web Apps: Escaping Tabs Without Losing Our Soul”.

In his article, he lists the distinguishing features of a PWA:

  • responsive
  • connection independent
  • has a native look and feel
  • can stay up-to-date using service workers (more on that later)
  • uses TLS
  • installable (e.g. to your home screen)
  • Re-engageable, through the use of push notifications
  • Discoverable through a web app manifest file and linkable from regular websites

What a PWA can and can’t do

PWAs can do surprisingly many things compared to actual native apps. You can see exactly what your current browser can offer a PWA on the website. You should check it out, it is a comprehensive website and includes demos and example code. If you rather just keep reading, here’s a non-exhaustive list:

  • Record video and audio
  • real-time communication
  • use touch gestures
  • use speech recognition
  • use the clipboard
  • work offline, store data offline (there are size limits on some browsers)
  • Detect the type, speed, and state of the network
  • Get the battery status
  • Use vibration
  • Use the current geolocation (with your permission)
  • Use device position and orientation (gyroscope and compass)
  • Use device motion (accelerometer)
  • Install to the home screen
  • Detect if the app is running in the foreground
  • Send push messages and local notifications

As you can see this is already a comprehensive list. You can imagine that a large portion of the current native apps could just as well be implemented as a PWA.

Industry support for PWAs

There is no use in creating a PWA if it only works fully in a few places. Luckily, the support for PWAs has grown tremendously, especially because of the efforts of Google and Microsoft.

Google

Google is at the forefront when it comes to PWA support. Starting in Chrome 73, PWAs are supported on desktop platforms, including Chrome OS, Linux, Mac, and Windows.

Apple

Apple seems to hesitantly follow the rest of the industry. Apple’s app store ecosystem is very profitable and there are many terrific iOS exclusive apps. You can imagine why they would rather see us making native apps for iOS. There are signs and complaints that Apple tries to slow down the adoption of PWAs. However, Apple has silently added support for the basic set of PWA technologies in iOS 11.3.

On the desktop, you can use Chrome and PWAs will work very well. Safari on macOS does not support some of the key features, like home screen installation. So out-of-the-box PWA support on macOS is still very poor.

Microsoft

Microsoft has a website dedicated to PWA development using Microsoft tools like Visual Studio. You can distribute a PWA through the Microsoft app store and Windows 10 offers full support for running PWAs. You could say Microsoft has embraced the PWA.

How a PWA works

All PWAs require at minimum a and a , which I’ll explain in more detail below. Without these, they would just be a regular website. Most PWAs will also use something called the cache API. Using this API, an app can store crucial files so the app will work regardless of connectivity. PWAs usually cache the basic files of the app (HTML, CSS, scripts) and the latest content. They will fetch the rest of the content from remote APIs per request of the user, just like a native app would do.

Manifest

The JSON-based manifest (usually called manifest.json) provides a centralized place to put metadata associated with a progressive web application, including:

  • The name of the web application
  • Links to the web app icons or image objects
  • The preferred URL to launch or open the web app
  • The web app configuration data
  • The default orientation of the web app
  • The option to set the display mode, e.g. full screen

This metadata is crucial for an app to be added to a home screen.

A minimal example of a manifest could look like this:

{   
"name": "Latest News App",
"description": "Get the latest news, whenever you want.",
"icons": [{
"src": "images/icon.png",
"sizes": "192x192"
}]
}

There are manifest generators available to make life easier.

Image for post
Image for post
The site generates a valid manifest and several versions of your icon automatically

Service worker

. The service worker is a background process that can exist even after closing the PWA. While running in the background it can perform the following operations:

  • send a notification to the user (re-engagement)
  • update content from a remote service so it is fresh as soon as the user opens the app again

The service worker is also the element of a PWA that takes care of caching files. Because of this layer, the app can gracefully handle situations where the network performance is degraded or even unavailable.

Frameworks and Libraries

Although you can create a PWA from scratch using plain old Javascript, most developers use a framework.

React

Yomi has written a nice post on creating a PWA using React:

Angular

Angular has built-in support for service workers, thus fully supporting PWAs.

Workbox

Workbox is a Google library that bakes in a set of best practices and removes the boilerplate every developer writes when working with service workers. It’s a library, not a framework, so you have the freedom to easily mix and match with other libraries/frameworks.

Notable Example PWAs

Spotify

Spotify has a well working PWA that you can install both on the desktop and on your phone. I’m actually using this one myself on Android and MacOS+Chrome. Spotify has written about the development of the PWA on their blog. To make it installable, you have to add ?pwa=1 to the URL, like this: https://open.spotify.com?pwa=1

Pinterest

Pinterest is an early adopter when it comes to PWAs. They’ve written an interesting article on the development of their web app. They explain the why and the how, and also dive into how they made the app blazing fast.

Twitter

The Twitter website (when you are logged in) is a progressive web application since July 2019. It offers you to install it on your home screen too and works flawlessly in my experience.

The future of PWAs

I believe PWAs will play a big role in the future. Just like we naturally moved from a static web to web 2.0, we will also move to more app-like websites.

Having said that, there will always be a place for native apps. A native app has the advantage of having full access to the system libraries and hardware. Many games, apps that work with specialized hardware, and apps that utilize the latest and greatest platform features will be better off with a native implementation.

Further reading

If you don’t mind getting your hands dirty, you should check out “Your first progressive web app” on Google code labs. Because they use vanilla Javascript, you’ll get a deep understanding of how PWAs work.

If you’re interested in something Cross-Platform, but still native, you should read my article on Flutter:


Tech Explained

Understandable, practical and useful explanations of…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store