awesome-pwa

Useful resources for creating Progressive Web Apps

Inspired by the awesome list thing.

What is a Progressive Web App ?

A Progressive Web App uses modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, leveraging the web's low friction.

Source: Google Developers - Progressive Web Apps

Table of contents

• Apps
• Tutorials
• Articles
• Videos
• Tools
• Kits
• Courses

Apps

• A selection of Progressive Web Apps
• A fresher selection of Progressive Web Apps
• AirHorner
• AlarmDJ
• Aliexpress
• Chrome Developer Summit
• Colosseum
• Closerintime
• Currency Converter
• Datememe
• Demo PWA
• Dev.Opera
• DevSpace
• Expense Manager
• Exterium
• FF-Platfrom-Status
• Firefox Platform Status
• Flipkart Lite (eng blog post, case study)
• GitHub Explorer
• Google I/O
• GPA Calculator
• Housing Go
• Meat Scope
• Medium
• Memory Game PWA
• MoneyTracker
• Notella
• Notepad
• Paytm Lite
• Pokedex
• PokeQuest Wiki
• Polymon by Polymer
• PregBuddy
• Progressive Beer
• QR Code Scanner
• React HN
• Remember
• SVGOMG
• Smaller Pictures
• Soundslice
• SplittyPie
• Taskade
• TeamGrid
• Tinder
• Topple Trump!
• trivago
• Twitter
• Uber Web
• Washington Post
• Wave-PD1
• WeNeed
• Web Bluetooth (Intel® Edison) demo
• Web NFC enabled shopping cart
• X Sound
• abc.xyz
• ampproject
• chromestatus
• emojoy
• guitar-tuner
• jsfeatures
• offline-wikipedia
• sv-ginger
• voice-memos
• Resume Nation

Tutorials

• A progressive Web application with Vue JS, Webpack & Material Design [Part 1 / 6] by @charlesBochet and @KevinJean17
• Codelabs to build PWAs with Polymer 2.0
• Getting started with Progressive Web Apps by @addyosmani
• Google Developers - Progressive Web Apps
• Progressive Web Apps with React.js - 4 part series by @addyosmani
• Retrofit an Existing Website as a Progressive Web App
• Service Worker Cookbook - Mozilla
• SmashingMag’s Service Worker script, fully documented
• Web Powered SMS Inbox with Service Worker: Push Notifications

Articles

• Introducing Pokedex.org: a progressive webapp for Pokémon fans
• A Tinder Progressive Web App Performance Case Study
• Progressive web apps have leapfrogged the native install model ... but challenges remain/
• What Progressive Web Apps Mean for the Web
• The web app "discovery problem"
• Are Progressive Web Apps the Future?
• Service Worker - Revolution of the Web Platform
• Service Workers: Dynamic Responsive Images using WebP Images
• Is Service Worker ready?
• Progressive Web Apps: Escaping Tabs Without Losing Our Soul
• Progressive Web App: A New Way to Experience Mobile
• Support for theme-color in Chrome 39 for Android
• Installable Web Apps with the WebApp Manifest in Chrome for Android
• FLIP your animations
• IndexedDB, WebSQL, LocalStorage – what blocks the DOM?
• Say Hello to Offline First
• You’re Missing the Point of Server-Side Rendered JavaScript Apps
• Swift Migration to Progressive Web App
• What, Exactly, Makes Something A Progressive Web App?
• PWA Performance
• The Building Blocks Of Progressive Web Apps
• Integrating Progressive Web Apps deeply into Android
• Is PWA ready on Chinese browser?
• How I built a Progressive Beer App

Videos

• Progressive Web Apps: the future of Apps
• Progressive web apps and what's next for mobile
• Interview with Google Software Engineer Alex Russell - O'Reilly Fluent Conference 2016
• Progressive Web Apps (Chrome Dev Summit 2015)
• Building and deploying a Progressive Web App at scale with Flipkart (Chrome Dev Summit 2015)
• Building Progressive Web Apps with Polymer (Chrome Dev Summit 2015)
• Progressive Web Apps and What's Next for Mobile
• Progressive Web Apps with Alex Russell
• Building a Progressive Web App - Aditya Punjani
• The Service Worker is Coming - Look Busy (vid)
• The applied science of runtime performance (vid)
• Breaking the 1000ms Time to Glass Mobile Barrier (vid)
• Search and the mobile content ecosystem - Google I/O 2016
• The Mobile Web: State of the Union - Google I/O 2016
• Building the Google I/O Web App: Launching a Progressive Web App on Google.com - Google I/O 2016
• Polymer and Progressive Web Apps: Building on the modern web - Google I/O 2016
• Great libraries and tools for great Progressive Web Apps - Google I/O 2016
• Angular 2 and Progressive Web Apps - Google I/O 2016
• Fireside Chat with the Progressive Web Apps Crew - Google I/O 2016
• Progressive, Performant, Polymer: Pick Three - Google I/O 2016
• Progressive Web Apps on Firebase - Google I/O 2016
• Progressive Web Apps across all frameworks - Google I/O 2016
• Instant Loading: Building offline-first Progressive Web Apps - Google I/O 2016
• AMP + Progressive Web Apps: Start fast, stay engaged - Google I/O 2016
• V8, modern JavaScript, and beyond - Google I/O 2016
• Service workers at scale with Facebook and Flipkart - Google I/O 2016
• Houdini: Demystifying the Future of CSS - Google I/O 2016
• Who are you, really: Safer and more convenient sign-in on the web - Google I/O 2016
• Fast and resilient web apps: Tools and techniques - Google I/O 2016
• Building for billions on the web - Google I/O 2016
• Opening Keynote (Progressive Web App Summit 2016)
• Summit Report: The Web Developers swarm! (Progressive Web Apps Summit 2016)
• Instant-loading Offline-first (Progressive Web App Summit 2016)
• Summit Report: Checking in with Paul Lewis and Jake Archibald (Progressive Web Apps Summit 2016)
• Mythbusting HTTPS (Progressive Web App Summit 2016)
• Summit Report: Talking HTTPS with Emily Schechter (Progressive Web App Summit 2016)
• Instant loading with HTTP/2 (Progressive Web App Summit 2016)
• Summit Report: Why's it called a Progressive Web App? (Progressive Web App Summit 2016)
• Deep Engagment with Push Notifications (Progressive Web App Summit 2016)
• Summit Report: What do I need to know about HTTP2? (Progressive Web App Summit 2016)
• UI Elements at 60fps (Progressive Web App Summit 2016)
• Summit Report: Progressive Web Apps for any occassion! (Progressive Web App Summit 2016)
• Progressive Web Apps in any context (Progressive Web App Summit 2016)
• Summit Report: Making Progressive Web Apps accessible, at scale! (Progressive Web App Summit 2016)
• Putting the Progressive in Progressive Web Apps (Progressive Web App Summit 2016)
• Summit Report: Reach, acquisition and conversion (Progressive Web Apps Summit 2016)
• Using Web Components to Build PWAs (Progressive Web App Summit 2016)
• Summit Report: Building for billions with Progressive Web Apps (Progressive Web App Summit 2016)
• To the Lighthouse (Progressive Web App Summit 2016)
• Building for Billions (Progressive Web App Summit 2016)
• Tools for Success (Progressive Web App Summit 2016)
• The Future of Progressive Web Apps (Progressive Web App Summit 2016)
• Konga (Progressive Web App Summit 2016)
• Samsung internets progressive web app commitment (Progressive Web App Summit 2016)
• Polymer Summit 2016 Youtube Playlist
• PWA Training Course 2017 Playlist with Sarah Clark, Google Developers India

Tools

• Workbox: Javascript Library for building progressive web apps
• sw-precache: A node module to generate service worker code that will precache specific resources
• sw-toolbox: A runtime caching library
• platinum-sw-register: handles service worker registration for Polymer applications
• offline-plugin: Offline plugin (ServiceWorker, AppCache) for webpack (http://webpack.github.io/)
• serviceworkerware: An Express-like layer on top of ServiceWorkers to provide a way to easily plug functionality
• msgr: Nifty service worker/client message utility
• UpUp: Makes sure your users can always access your site's content, even when they're on a plane, in an elevator, or 20,000 leagues under the sea
• fetch-sync: Proxy Fetch requests through the Background Sync API
• FetchManifest: Fetch a parsed manifest from a manifest or site URL (online service)
• fetch-manifest-json: Fetch the mainfest.json from an URL.
• manifest-json: CLI tool for creating mainfest.json.
• PWAify: CLI tool to convert your PWA into a cross-platform desktop app.
• Manifest Generator: This simple page will generate the manifest file for you.
• sw-delta: An incremental cache for the web.
• DSW: Generate your Service Worker dynamically, webmanifest, rules for requests, redirects, etc.
• sw-precache-webpack-plugin: SW Precache Webpack Plugin
• serviceworker-webpack-plugin: Simplifies creation of a service worker to serve your webpack bundles.
• serviceworker-rails: Plugin to integrate Service Worker with the Rails asset pipeline.

Kits

• Angular Mobile Toolkit: Tools for building progressive web apps with Angular.
• Web Starter Kit: A workflow for multi-device websites.
• Progressive Web Application skeleton: A simple set of skeleton files for shipping a Progressive Web App.
• pwabuilder: All the tools you need to build and deploy your Progressive Web Apps.
• pwa-starter-kit: Starter templates for building PWAs

Courses

• Getting Started with Progressive Web Apps (paid)
• Progressive Web App Fundamentals (paid)
• Intro to Progressive Web Apps (free)