Progressive web apps (PWAs)

Draft
This page is not complete.

PWA community logoProgressive Web Apps are web apps that use emerging web browser APIs and features along with traditional progressive enhancement strategy to bring a native app-like user experience to cross-platform web applications. Progressive Web Apps are a useful design pattern, though they aren't a formalized standard. PWA can be thought of as similar to AJAX or other similar patterns that encompass a set of application attributes, including use of specific web technologies and techniques. This set of docs tells you all you need to know about them.

In order to call a Web App a PWA, technically speaking it should have the following features: Secure contexts (HTTPS), one or more Service Workers, and a manifest file.

Secure contexts (HTTPS)
The web application must be served over a secure network. Being a secure site is not only a best practice, but it also establishes your web application as a trusted site especially if users need to make secure transactions. Most of the features related to a PWA such as geolocation and even service workers are available only once the app has been loaded using HTTPS.
Service workers
A service worker is a script that allows intercepting and control of how a web browser handles its network requests and asset caching. With service workers, web developers can create reliably fast web pages and offline experiences.
Manifest file
A JSON file that controls how your app appears to the user and ensures that progressive web apps are discoverable. It describes the name of the app, the start URL, icons, and all of the other details necessary to transform the website into an app-like format.

PWA advantages

PWAs should be discoverable, installable, linkable, network independent, progressive, re-engageable, responsive, and safe. To find out more about what these mean, read Progressive web app advantages.

To find out how to implement PWAs, read through our PWA developer guide.

Documentation

<-- The temporary automatic list below will be replaced soon -->

Add to Home screen
Add to Home screen (or A2HS for short) is a feature available in modern browsers that allows a user to "install" a web app, ie. add a shortcut to their Home screen representing their favorite web app (or site) so they can subsequently access it with a single tap. This guide explains how A2HS is used, and what you need to do as a developer to allow your users to take advantage of it.
How to make PWAs installable
In this article, we learned about how we can make PWAs installable with a properly-configured web manifest, and how the user can then install the PWA with the "add to home screen" feature of their browser.
How to make PWAs re-engageable using Notifications and Push
Having the ability to cache the contents of an app to work offline is a great feature. Allowing the user to install the web app on their home screen is even better. But instead of relying only on user actions, we can do more, using push messages and notifications to automatically re-engage and deliver new content whenever it is available.
Introduction to progressive web apps
This article provides an introduction to Progressive Web Apps (PWAs), discussing what they are and the advantages they offer over regular web apps.
Making PWAs work offline with Service workers
In this article we took a simple look at how you can make your PWA work offline with service workers. Be sure to check out our further documentation if you want to learn more about the concepts behind the Service Worker API and how to use it in more detail.
Progressive loading
In previous articles we covered APIs that help us make our js13kPWA example a Progressive Web App: Service Workers, Web Manifests, Notifications and Push. In this article we will go even further and improve the performance of the app by progressively loading its resources.
Progressive web app structure
Now we know the theory behind PWAs, let's look at the recommended structure of an actual app. We will start with analyzing the js13kPWA application, why it is built that way, and what benefits it brings.
PWA developer guide
In the articles listed here, you'll find guides about every aspect of development specific to the greation of progressive web applications (PWAs).
Structural overview of progressive web apps
In this structural overview, we'll look at the features that make up a standard web application, as well as some design patterns you can follow when building your PWA.

Everything below this point is left over from the old version of this page and will be revamped as other content is overhauled.

Core PWA guides

The following guides show you what need to do to implement a PWA, by examining a simple example and showing you how all the pieces work.

  1. Introduction to progressive web apps
  2. Progressive web app structure
  3. Making PWAs work offline with Service workers
  4. How to make PWAs installable
  5. How to make PWAs re-engageable using Notifications and Push
  6. Progressive loading

Technology guides

Tools

  • localForage — A nice simple JavaScript library for making client-side data storage really simple; it uses IndexedDB by default and falls back to Web SQL/Web Storage if necessary.
  • ServiceWorkerWare — An Express-like microframework for easy Service Worker development.
  • oghliner — Not only a template but a tool for deploying Offline Web Apps to GitHub Pages.
  • sw-precache — A node module to generate service worker code that will precache specific resources.
  • workbox — Spiritual successor to sw-precache with more advanced caching strategies and easy precaching.
  • upup — A tiny script that makes sure your site is always there for your users.
  • The service worker cookbook — A series of excellent service worker/push recipes, showing how to implement an offline app, but also much more.
  • PWA VS Code extension - A collection of all essential code snippets you need to build Progressive Web Apps right there in your VS Code environment.