You won’t find one single definition of a PWA, so I will define it in my own words:
A Progressive Web App is a web application running inside a browser, build using common web technologies. It will progressively adapt to the browser features it’s given. A PWA often provides a native look and feel and can be installed without the need for an app store. It is a top-level activity in the OS’s application switcher.
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:
- 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 is at the forefront when it comes to PWA support. Starting in Chrome 73, PWAs are supported on all desktop platforms, including Chrome OS, Linux, Mac, and Windows.
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 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 service worker and a manifest, 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.
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.",
There are manifest generators available to make life easier.
The service worker is what allows a PWA to become an app-like. 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. It is a layer between the app and the network. Because of this layer, the app can gracefully handle situations where the network performance is degraded or even unavailable.
Frameworks and Libraries
Yomi has written a nice post on creating a PWA using React:
Build a Realtime PWA with React
Create an app to display the current and past price information of BTC, LTC, and ETH
Angular has built-in support for service workers, thus fully supporting PWAs.
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 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:
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.
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. There are simply too many advantages to PWAs to not become ubiquitous.
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.
If you’re interested in something Cross-Platform, but still native, you should read my article on Flutter:
If you liked this article please subscribe to my substack newsletter.