Progressive web apps take traditional web sites/applications — with all of the advantages the web brings — and adds a number of features that give them the many of the same user experience advantages as native apps. This set of docs tells you all you need to know.
Progressive web apps should have all of the advantages listed in the sections below.
The eventual aim is that web apps should have better representation in search engines, be easier to expose, catalog and rank, and have metadata usable by browsers to give them special capabilities.
Some of the capabilities have already been anabled on certain web-based platforms by proprietary technologies like Open Graph, which provides a format for specifying similar metadata in the HTML
<head> using meta tags.
The relevant web standard here is the Web app manifest, which defines features of an app such as name, icon, splash screen, and theme colors in a JSON-formatted manifest file. This is for use in contexts such as app listings and device home screens.
A core part of the apps experience is for users to have app icons on their home screen, and be able to tap to open apps into their own native container that feels nicely integrated with the underlying platform.
Modern web apps can have this native app feel via properties set inside the Web app manifest, and via a feature available in modern smartphone browsers called Add to home screen.
One of the most powerful features of the Web is to be able to link to an app at a specific URL — no app store needed, no complex installation process. This is how it has always been.
Modern web apps can work when the network is unreliable, or even non-existent. The basic ideas behind network independence are to be able to:
- Revisit a site and get its contents even if no network is available.
- Browse any kind of content the user has previously visited at least once, even under situations of poor connectivity.
- Control what is shown to the user in situations where there is no connectivity.
This is achieved by a combination of technologies — Service Workers to control page requests (for example storing them offline), the Cache API for storing responses to network requests offline (very useful for storing site assets), and client-side data storage technologies such as Web Storage and IndexedDB to store application data offline.
Modern web apps can be developed to provide a super cool experience to fully capable browsers, and an acceptable (although not quite as shiny) experience to less capable browsers. We've been doing this for years with best practices such as progressive enhancement.
One major advantage of native platforms is the ease with which users can be re-engaged by updates and new content, even when they aren't looking at the app or using their devices. Modern web apps can now do this too, using new technologies such as Service Workers for controlling pages, the Web Push API for sending updates straight from server to app via a service worker, and the Notifications API for generating system notifications to help engage users when they're not in the browser.
Responsive web apps use technologies like media queries and viewport to make sure that their UIs will fit any form factor: desktop, mobile, tablet, or whatever comes next.
The web platform provides a secure delivery mechanism that prevents snooping and ensures content hasn’t been tampered with — as long as you take advantage of HTTPS and develop your apps with security in mind. In addition, you can verify the true nature of a PWA by confirming that it is at the correct URL, whereas apps in apps stores can often look like one thing, but be another (example).
- Client-side storage — a lengthy guide showing how and when to use web storage, IndexedDB, and service workers.
- Using service workers — a more in-depth guide covering the Service Worker API.
- Using IndexedDB — the fundamentals of IndexedDB, explained in detail.
- Using the Web Storage API — the Web storage API made simple.
- Instant Loading Web Apps with An Application Shell Architecture — a guide to using the App Shell coding pattern to create apps that load quickly.
- Using the Push API — learn the essentials behind the Web Push API.
- Using the Notifications API — web notifications in a nutshell.
- The building blocks of responsive design — learn the basics of responsive design, an essential topic for modern app layout.
- Mobile first — often when creating responsive application layouts, it makes sense to create the mobile layout as the default, and build wider layouts on top.
- Add to home screen guide — learn how your apps can take advantage of Add to home screen (A2HS)
- 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.
- 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.
- Progressive web apps on Google Developers
- Progressive Web Apps: Escaping Tabs Without Losing Our Soul by Alex Russell
- Progressive Web Apps Check List
- The Lighthouse Tool by Google
- Tools for building progressive web apps with Angular
- React PWA Guide Kit
- Offline-capable Pokédex web site