PWA Links: Curated links for mastering PWA

This file aggregates popular links for learning how to implement Progressive Web Apps. More reference about ITCS can turn to AwesomeList: 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

• 2018-Progressive Web Apps: Bridging the gap between web and mobile apps: So this article is a summary of the concepts and approaches that Progressive Web Apps follow.

Case Study

• 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 站(https://h5.ele.me/msite/)在 PWA 改造中的实践经验。涉及到的方面有：PWA 线上部署的准备工作、多页应用的 prerender 优化、实践过程中踩到的(和推进解决的)坑。

• 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 : Hacker News readers as Progressive Web Apps

• 2017-A React And Preact Progressive Web App Performance Case Study: Treebo: They recently shipped a new Progressive Web App as their default mobile experience, initially using React and eventually switching to Preact in production.

• 2017-A Tinder Progressive Web App Performance Case Study: Techniques for JavaScript performance optimization, Service Workers for network resilience and Push Notifications for chat engagement.

Tutorial

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

• 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) 中文版》📚: 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-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

• 2018-Installable Web Apps: A Practical Introduction To PWAs with JavaScript and Node.js

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.

Service Worker

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

• 2018-Workbox 3：Service Worker 可以如此简单: 不过到了现在有了 Workbox 3，一切关于 Service Worker 的担心都不再是问题。

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

• 2018-Web 推送通知: 本系列文章是翻译自谷歌开发者网站，我们的主要目的，是让对 Web 推送服务有兴趣的开发者，能够通过阅读本系列的文章而初步掌握 Web 推送的一些基本原理和实现方式，从而在实际工作中可以应用起来。