Progressive Web Apps Directory: The Best Collection of Resources

Get started with progressive web apps and learn things in depth, this page will list the best resources we know of to help you understand Progressive Web Apps (PWAs) .

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.

• Progressive Web Apps: the future of Apps: A 20 minute video of a presentation by Opera’s Bruce Lawson, introducing the overall “why” and “what” of PWAs.
• Progressive Web Apps (Chrome Dev Summit 2015): Alex Russell (Google) and Andreas Bovens (Opera) introduce the concepts, code and cross-browser nature of PWAs.
• Progressive Web Apps: Escaping Tabs without losing our soul: Alex Russell’s original blog post outlining the concept of PWAs. A must-read.
• Progressive Web Apps on Google Web Fundamentals: This is a comprehensive set of tutorials various aspects of developing PWAs from the Google Team.
• Getting Started with Progressive Web apps: Addy Osmani’s guide to getting started with PWAs
• A Beginner’s Guide to Progressive Web Apps: A good intro article by Smashing Magazine
• Progressive Web Apps: An interview with PWA expert, Henrik Joreteg, who’s been working with his clients to architect, build and train teams on building performant mobile web apps.

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.

• Adding to Home Screen: Bruce Lawson on adding your site to the mobile home screen.
• The Google Team’s Overview of Adding to Home Screen: A nice overview of the options available for various use cases when implementing ‘Add to Home Screen’ functionality.
• FLIP your animations: It’s important that your PWA runs smoothly. Paul Lewis explains how to implement smooth animations in your app.
• Jankfree: A collection of resources all about improving web UI performance and reducing ‘Jank’.
• 60fps on the Mobile Web: The Flipboard team discusses how to get 60fps performance for your web frontend on mobile devices.
• The Web App Manifest Specification.

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.

• What we need from the Web, and what it needs from us: A 43 minute video by Shwetank Dixit, introducing PWAs from the perspective of web users in India. Service Workers begins at minute 18.
• Instant Loading: Building offline-first Progressive Web Apps: A 45 minute video by Jake Archibald, one of the designers of Service Workers.
• Service Workers: An Introduction: A great intro by the Google Team on what you need to know to get started with Service Workers.
• The Offline Cookbook: Jake Archibald covers a variety of use cases for offline functionality along with helpful illustrations and code examples for the service wokers code. Very well worth a look!
• Service Worker: Santa’s Little Performance Helper: Phil Nash covers Service Worker through a practical example. Its also contains a great example of caching web fonts for offline use using Service Workers.
• Using Service Workers: The Mozilla team’s introduction to Service Workers on MDN. It contains some useful infographics on various parts of the Service Worker lifecycle, and more.
• Making a Service Worker: A fantastic article by Lyza Danger Gardner going in-depth with Service Workers.
• serviceworke.rs: Mozilla’s site detailing various caching strategies and use cases along with code examples.
• Offline Storage for Progressive Web Apps: Addy Osmani lists out a number of libraries and tools available for making web apps run offline.
• The Copy and Paste Guide to your first Service Worker: Remy Sharp writes about how to get started quickly.
• Designing Offline-first Web Apps: Besides giving helpful tips on good offline experiences, this article helps you think differently about offline as a user state in the first place.
• The Service Workers Specification

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!

• Towards better apps: the what & why of progressive web apps: A 43 minute video in which Andreas Bovens introduces PWAs, Service Workers and — around the 23 minute mark — Push Notifications.
• Web Push Notifications: Timely, Relevant and Precise: Google’s introduction to Web Push notifications.
• Push API documentation on MDN
• Keep Pushing it, with the Web Push API: Chris Mills explains the Web Push API.
• The Push API specification

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.

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.