Progressive Web Apps: The definitive collection of resources

Introduction

Want to get started with progressive web apps, but not sure where to start? This page will list the best resources we know of to help you understand Progressive Web Apps (PWAs), get started and learn things in depth.

Make sure to bookmark this page, as this is a living document that we’ll be adding to from time to time.

Progressive Web Apps: The what, how and why

These articles introduce the concept of Progressive Web apps and serve as a jumping point to learn more about them.

UI Concepts

One of the best things about PWAs are that they can be added to the home screen of your Android device, just like native apps can. This section contains relevant articles covering the ‘Add to Home Screen’ capability, as well as a few articles on how to make your web app UI running smoothly.

Offline

Progressive Web Apps are capable of running offline just like native apps. This is primarily through a feature called ‘Service Worker’. Service Workers are great, and besides being used to make web apps run offline, are also required for other functionality like Push Notifications and Background Sync.

Push Notifications

Push notifications are helpful in notifying the user of important, relevant or timely events, even if your site isn’t open in the browser, or even when the browser is closed. With the Push API spec and Service Workers, you can finally implement this in your progressive web app too. Be careful not to spam your users!

Tools and Libraries

This section lists out a number of tools which might end up saving you a lot of time and effort when coding up for your PWAs.

  • sw-toolbox: A helpful library with account for a lot of different caching use-cases.
  • sw-precache: A tool to pre-emptively cache all static resources for offline use.
  • Lighthouse: Auditing and performance metrics for Progressive Web Apps.
  • Manifest Generator: A tool which automatically generates a web manifest file for you.
  • manifest-json: Another tool (this is using the command line) to generate a web manifest file for you.
  • generator-pwa: A yeoman generator for a basic PWA app.
  • UpUp: Read the article by the library’s author on how to use it.
  • Web Starter Kit: A boilerplate for web development including sw-toolbox and sw-precache libraries.
  • Fetch-sync: Fetch Sync allows you to proxy fetch requests through the Background Sync API so that they are honoured if made when the UA is offline.
  • Msgr: Nifty service worker/client message utility.

Showcases, case studies and more

Take a look at what others are doing with Progressive Web Apps. Get inspiration and see how it has benefitted others in key business metrics.

  • PWA.Rocks: The showcase for the best Progressive Web Apps in the world. It’s maintained by the Opera Developer Relations team, and we accept Pull Requests if you have a great-looking responsive PWA. Remember, sites aren’t “mobile-only” so the best PWAs look great on desktop and devices.
  • Google PWA Showcase: Google’s showcase of companies which have befitted from PWAs.
  • The Business Case for Progressive Web Apps: Jason Grigsby writes a compelling case for the business benefits of PWAs.
  • PWAs: An African Perspective: We interview two great developers from Nigeria and Kenya about PWAs. Read their thoughts on how PWAs can help solve problems in that region.

Books

Books to help you learn about PWAs.

  • Progressive Web Apps: This book teaches you PWA design and the skills you need to build fast, reliable websites by taking you step-by-step through real world examples.