PWA Reference: Curated links for mastering PWA in 2018

This file aggregates popular links for learning how to implement Progressive Web Apps. More reference about ITCS can turn to Awesome Reference: Guide to Galaxy, which collects valuable, popular and up-to-date links for CS, including Programming Language, Software Engineering, Server Side Application, Infrastructure, InfoSecurity, Industrial Application, DataScienceAI, Frontend Technology(iOS, Android, RN, Electron), etc.

Overview

• 2016-Why Google Thinks You Should Start Building Progressive Web Apps

Case Study

• PWA.rocks: A showcase of several progressive web apps, collected by the Opera Dev Relations team.
• Sample APPs: SVGOMG, Guitar Tuner, Voice Memos, Hacker News, Building the Google I/O 2016 Progressive Web App
• 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.
• 2017-Twitter Lite and High Performance React Progressive Web Apps at Scale: A look into removing common and uncommon performance bottlenecks in one of the worlds largest React.js PWAs, Twitter Lite.
• 2017-Upgrading Ele.me to Progressive Web App: we at Ele.me (the biggest food ordering and delivering company in China) have been working on upgrading our mobile website to a Progressive Web App.
• 2017-A Pinterest Progressive Web App Performance Case Study: In this post we’ll cover some of their work to load fast on mobile hardware by keeping JavaScript bundles lean and adopting Service Workers for network resilience.
• 2017-HNPWA #Project#: Hacker News readers as Progressive Web Apps
• A Tinder Progressive Web App Performance Case Study: Techniques for JavaScript performance optimization, Service Workers for network resilience and Push Notifications for chat engagement.

Tool

• 2017-Progressive Web App Libraries in Production: This article is written by Addy Osmani. Two years ago, our team at Google started work on JavaScript libraries to reduce the friction for building Progressive Web Apps.
• Manifoldjs: PWA Builder: PWA Builder will give you an easy way to provide the missing pieces of your PWA, and not weigh down your site with data you don’t need or use.
• Offline-plugin for webpack: This plugin is intended to provide an offline experience for webpack projects. It uses ServiceWorker, and AppCache as a fallback under the hood. Simply include this plugin in your webpack.config, and the accompanying runtime in your client script, and your project will become offline ready by caching all (or some) of the webpack output assets. you can also turn to Easy Offline First Apps With Webpack’s Offline Plugin for further information.
• react-progressive-web-app: An opinionated React based repository which is optimized for Progressive Web App development.
• 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.
• pwmetrics #Project# : Progressive web metrics at your fingertipz

Tutorial

• 2017-A beginner’s guide to making Progressive Web Apps: Hopefully, this post will be all you need to get started in making your own PWA.
• 2017-A progressive Web application with Vue JS, Webpack & Material Design #Series#: The tutorial will be split in several parts, that will be published successively
• 2017-Progressive Web Apps (PWA) 中文版 #Book#: This book is written with stand-alone chapters, letting you learn about particular features of interest without having read previous chapters. By the end, you’ll be ready to build better web applications and improve the user experience.
• 2016-Progressive Web Apps with React.js #Series#: Progressive Web Apps take advantage of new technologies to bring the best of mobile sites & native apps to users. They’re reliable, fast, and engaging. They originate from a secure origin and load regardless of network state.
• 2016-Google Developers — Your First Progressive Web App : A step-by-step guide to building a progressive web apps using the app shell pattern.
• 2016-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 (disclaimer: written by the maintainer of this page).
• 2015-A Beginner’s Guide To Progressive Web Apps: Progressive web apps could be the next big thing for the mobile web. Originally proposed by Google in 2015, they have already attracted a lot of attention because of the relative ease of development and the almost instant wins for the application’s user experience.
• 2017-Progressive Web Apps — The Next Step in Responsive Web Design — Julian Gaviria
• 2017-Progressive Web Apps course #Course#

Installable Web App

• 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.

Push

• 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.)

Service Worker

• Service Worker Support in Browser: Can I Use — Service Workers, Is Service Worker ready?
• 2017 — Send messages when you’re back online with Service Workers and Background Sync: When you send an SMS message but your phone doesn’t have great signal it will continue to try to send the message in the background, even if you close the app. Pretty useful right? In this post we’re going to see how to replicate this behaviour in a web application using the Background Sync API from the Service Worker.
• 2017-Testing Service Workers:In this post we’ll be looking at some of the approaches being taken to test service workers in the latest service worker libraries the Chrome DevRel team have been working on.
• 2017-Service Worker Mock: A mock service worker environment generator.
• Awesome Service Workers #Collection# : A collection of awesome resources for learning service workers.
• Offline Web Applications Using IndexedDB & Service Worker : This free Udacity course is a must if you’re planning on building a progressive web app.
• Service Workers W3C Specification : The official service workers spec.
• 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.
• Service Worker, what are you ?
• ServiceWorker Specification
• Experimenting With The Background Fetch API: The service worker API is expanding as more ways to use the background dwelling worker emerge.

Offline Storage

• 2016-Offline Storage for Progressive Web Apps : The current state of offline storage in the browser
• IndexedDB API : API docs, key concepts, and sample code from Mozilla.
• CacheStorage API : API docs, and sample code from Mozilla.
• 2017-Redux Offline
• 2017-The Offline Cookbook: With ServiceWorker we gave up trying to solve offline, and gave developers the moving parts to go solve it themselves.