本文是 Progressive Web Apps 开发中搜集的一系列有价值的参考资料，关联父引用为 Web Reference。

Overview: 概览

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

• 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-PWA 入门 : 写个非常简单的 PWA 页面：Progressive Web Apps 是 Google 提出的用前沿的 Web 技术为网页提供 App 般使用体验的一系列方案。这篇文章里我们来完成一个非常简单的 PWA 页面。

• 2017-Progressive Web Apps — The Next Step in Responsive Web Design — Julian Gaviria

• 2017-Progressive Web Apps course 【 Course】

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- 百度搜索对 PWA 的探索和初步实践: 本文是百度搜索资深 Web 前端工程师沈洲在前端之巅微信群中的分享整理总结而成，介绍了百度天气 PWA 应用的开发实践，本周还分享了《PWA 实践：从一个简单的页面开始》与 《PWA 实践：理解和创建 Service Worker 脚本》等 PWA 相关内容 。

• 2017-PWA 在饿了么的实践经验：本篇旨在和大家分享「饿了么 M 站」（h5.ele.me/msite/）在 PWA 改造中的实践经验。涉及到的方面有：PWA 线上部署的准备工作、多页应用的 prerender 优化、实践过程中踩到的（和推进解决的）坑。( parg.co/bO7 )

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

Demo

• HNPWA #Project# : Hacker News readers as Progressive Web Apps

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

• Workbox #Project# ：Workbox 是来自 Google Chrome 团队的快速将现有应用转化为 Progressive Web Apps 的 JavaScript 库；Workbox 允许我们通过 Webpack 插件、Gulp 插件以及 npm 脚本的方式快速地为当前应用的资源创建对应加载 ServiceWorker。

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.

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

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