Awesome Progressive Web Apps

A curated collection of Progressive Web Apps resources.

Progressive web apps are a new breed of web apps. They combine the benefits of a native app with the low friction nature of the web. Progressive web apps start off as simple websites, but as the user interacts with them, they progressively gain new powers. They transform from a website into something much more like a traditional native app.

-- Building Progressive Web Apps - O'Reilly

If you want to contribute, please read the contribution guidelines.

Contents

• Must Reads
• Learning Resources
• Browser Support
• Videos
• Case Studies
• Sample Progressive Web Apps
• Specific Technologies
  • Service Workers
  • CacheStorage API
  • Background Sync
  • Push Notifications
  • IndexedDB
  • Installable Web Apps
    • App Icons
  • Web Share APIs
• Awesome Performance

Must Reads

• Building Progressive Web Apps - O'Reilly Media - A deep dive into progressive web apps, service workers, push notifications, background sync, IndexedDB, offline first and much more.
• Offline Web Applications Using IndexedDB & Service Worker - A free Udacity course introducing the basic concepts of building a progressive web app.

Learning Resources

• Google Developers - Your First Progressive Web App - A step-by-step guide to building a progressive web apps using the app shell pattern.
• Awesome Service Workers - A collection of awesome resources for learning service workers.
• Service Workers W3C Specification - The official service workers spec.

Browser Support

• Can I Use - Service Workers - Up-to-date browser support table of ServiceWorker API.
• Is Service Worker ready? - Current status of ServiceWorker support in different browsers.

Videos

• Instant Loading: Building offline-first Progressive Web Apps - Google I/O 2016 - A quick dive into the most common technologies and techniques for building progressive web apps.
• Intro To Progressive Web Apps - This free Udacity course by Google covers intro to PWAs, service workers and web app manifests.
• Offline Web Applications Using IndexedDB & Service Worker - This free Udacity course is a must if you're planning to dive deep into service workers.
• Progressive Web Apps (Chrome Dev Summit 2015) - An introduction to progressive web apps by Alex Russell and Andreas Bovens.
• Polymer and Progressive Web Apps: Building on the modern web - Google I/O 2016 - Using Polymer to build progressive web apps.

Case Studies

• Building the Google I/O 2016 Progressive Web App - Building and launching a progressive web app using web components, Polymer, and material design.
• AliExpress Case Study - AliExpress increases conversion rate for new users by 104% with new progressive web apps.
• eXtra Electronics Case Study - United eXtra Electronics grows eCommerce sales by 100% with Web Push Notifications.
• Jumia Case Study - Push Notifications help Jumia reverse cart abandonment and increase conversions by 9X.
• Konga Case Study - Konga cuts data usage 92% with new Progressive Web App.
• Suumo Case Study - Japan's top real estate site supercharges new listings with web Push Notifications and sees a 31% open rate for notifications.

Sample Progressive Web Apps

• PWA.rocks - A showcase of several progressive web apps, collected by the Opera Dev Relations team.
• SVGOMG
• Guitar Tuner
• Voice Memos
• Hacker News

Specific Technologies

Service Workers

• Awesome Service Workers - A curated collection of the finest service worker resources.

CacheStorage API

• Offline Storage for Progressive Web Apps - The current state of offline storage in the browser
• CacheStorage API - API docs, and sample code from Mozilla.

Background Sync

• Introducing Background Sync - A gentle introduction to background sync, along with some great videos and code samples.
• Background Sync Explained - The official "explainer" document for background sync, including one-off synchronization and periodic synchronization.
• Background Sync Spec - The WIP spec for Background Sync.

Push Notifications

• Can I Use - Push API - Up-to-date browser support table of Push API.
• Chrome Platform Status - Web Notifications - Implementation status for Chrome and other browsers.
• PWA Dev Summit 2016 codelab - Push Notifications Up-to-date getting started tutorial for Progressive Web App, Push Notifications and service worker basics.
• Using the Push API - An article introducing Push API.
• web-push-libs - A collection of useful libraries for web push in different technologies (Node.js, PHP, Python, etc.)

IndexedDB

• IndexedDB API - API docs, key concepts, and sample code from Mozilla.

Installable Web Apps

• Increasing Engagement with Web App Install Banners - An intro to App Install Banners and making sure Chrome offers your web app to your users.
• Installable Web Apps with the Web App Manifest in Chrome for Android - An introduction to installable Web Apps in Chrome for Android.

App Icons

• RealFaviconGenerator - A great way to generate all the images, favicons, and associated files needed to display your app icon across different browsers.
• Android Asset Studio - Launcher Icon Generator - Generate Android style icons.

Web Share APIs

• Introducing the Web Share API - High level introduction to the Web Share API.
• Web Share API explainer - An explanation of the API, along with some examples. Part of the proposal doc.
• Web Share Target API - The proposal for the Web Share Target API, as well as a high level explainer.

Awesome Performance

• Web Fundamentals - Performance - Google's performance learning portal, containing a wealth of knowledge on optimizing your web apps for perfomance.
• Introducing RAIL: A User-Centric Model For Performance - The seminal introduction to RAIL by the Gang of Pauls.
• Website Performance Optimization - A free Udacity course on optimizing websites for speed.
• Browser Rendering Optimization - A free Udacity course helping you create web apps that maintain jank-free 60fps performance.
• The PRPL Pattern - A new pattern for structuring and serving Progressive Web Apps, with an emphasis on performance.
• Browser Rendering Performance - Understand how HTML, JavaScript and CSS is handled by the browser, and how to optimize your page accordingly.