【现货速发】PWA入门与实践

【前　　言】

我初接触PWA是在2017年年初，当时参加了一个前端分享会，其中一个主题就是与PWA相关的，介绍了PWA的Service Worker和安装到桌面的能力，以及这门技术未来的发展趋势，听完这个分享后，我就为PWA的一些能力所吸引。

Web本身的优势就非常明显，如可分享，可搜索，无须下载，在任何设备上有相同的展示等，现在再加上PWA的能力，让Web在原有的基础上具备了类原生应用程序的功能，这对于Web开发者来说是一个福音，可以让Web提供更好的用户体验，也能带来更多红利。随后，我便开始了对PWA的学习和探索之路。

在实际工作中，有很多场景适合使用PWA，这也使我的PWA实践之路有了一个很好的前提条件。在实践的过程中，并没有想象的那么顺利，PWA的大多数概念都有一些理解成本，一不小心就会犯错，大多数情况下是一边“挖坑”一边“填坑”。当然，后在很多合适的场景中，我发现PWA的接入确实带来了非常好的效果，为业务产品带来了更多价值，提升了用户体验。

本书是一本PWA技术入门和实践的图书。通过本书，你可以对PWA有较深入的理解并进行一些项目实践。本书对PWA的核心技术做了比较透彻的讲解，对PWA中可能遇到的问题及一些注意事项也进行了充分说明。阅读过程中，所有的PWA知识点基本都可以在本书中找到说明。本书既可以作为一本PWA的入门图书，也可以作为一本PWA的使用手册。遇到关于PWA的问题时，请阅读这本书，相信本书可以让你找到问题的解决方法。

• 第1章介绍PWA的发展历程及生态环境，并为你开启个PWA应用示例，让你对PWA有一个基本了解。
• 第2章介绍PWA的一些前置技术及预备知识，让你后面的学习过程更顺畅，如果你对这部分知识已有所了解，则可以跳过这一章。
• 第3章开始对PWA核心的部分—Service Worker进行讲解，这一章详细讲解了Service Worker的各个知识点、注意事项及实践。
• 第4章开始进入 PWA的核心API部分，在这一章中，你可以学习PWA的一些核心API，包含安装到桌面、新一代网络请求、消息通知、后台同步、离线缓存、消息推送，该章中各小节属于并行知识点，可根据需求阅读任意一节。
• 第5章介绍PWA使用过程中的一些配套工具，包括调试工具、评测工具和提效工具，等等，让你的PWA开发过程更顺畅。
• 第6章为PWA的实践部分，针对不同的功能需求进行实践讲解。
• 第7章讲解Web的系统集成能力，让系统集成能力配合PWA，使Web可以和应用程序相媲美。

本书主要面向有一定Web开发基础的读者，以及想学习PWA或者需要一本全面的PWA手册的开发者。

本书中用到的项目代码可以通过GitHub下载，地址为https://github.com/lecepin/PWA-Book

==============================

【序　　言】

如今，互联网大流量早已进入了移动端，国内主流互联网产品的移动端流量已经普遍超过整体流量的80%。在移动端应用开发中，我们要面临为不同操作系统（Android、iOS、Windows 10）、不同设备（手机、平板）开发应用的问题，为此我们需要投入额外的成本应对这些差异。就算我们投入了成本，开发出了产品，在下载和安装环节，仍然存在很大的推广成本问题。统计学研究表明，安装烦琐是用户放弃尝试更多应用的主要原因之一。

PWA技术可以很好地解决这些问题。PWA运用现代的Web API能力为Web进行了扩展和增强，使Web具有与原生应用程序类似的体验度和能力。作为一种W3C的规范实现，PWA可以正常地运行在各个平台的浏览器中，真正做到一套代码解决所有平台一致性问题。同样，由于PWA具备安装成本几乎为0的特点，它非常适合实现Web端到应用端的过渡，提升转化率。

目前，国内外越来越多的网站对PWA进行了接入，如星巴克、优步、推特、脸书、淘宝、饿了么，等等，接入后的性能和转化率都有明显提升。如今谷歌、微软、英特尔等公司为PWA投入了技术支持和发展，Web的主流框架React、Vue等对PWA提供了快速接入方案，主流的浏览器厂商也紧跟其后，共同为PWA生态系统提供支持。

然而，根据我近几年对国内业界和前端社区的观察，可以说PWA在国内还没有发挥出它应有的作用。在这里，我尝试分析一下其中的原因，以及未来趋势。

，至少近三年，国内前端领域的技术发展，除了跟随国外动向之外，总的趋势是业务属性较强的技术更受重视。其中，令人瞩目的小程序相关技术，以及低代码搭建相关技术，就是典型—两者分别迎合了国内头部互联网公司流量分发强管控的现实需求，以及中国互联网产业逐步转向企业服务的大背景。

PWA作为一个中立性很强的技术组合，尽管主要由Google推动，但其开放性以及主要着眼点在于优化具体的产品体验而非满足业务诉求的特点，导致它在国内主要由社区推动，声量明显不如商业推动力强的技术，处于一种“大家各取所需，却不知道别人也在各取所需”的微妙境地。

面对这种状况，作为技术人，我们要理性看待，而不是像一些跟风者一样片面地去肯定或者否定一项技术。事实上，PWA作为一个渐进式的技术组合，其中的若干技术，比如Service Worker、离线存储，乃至性能评估工具Lighthouse等，早已因其极强的实用性，在国内得到了广泛应用。

第二，一项工程技术的落地，除了原理论证以及各种功能点与性能指标的验证之外，还需要一个成本颇高的“踩坑”过程。这不是找一两个实习生通过Demo做个演示就可以解决的，而是需要实实在在的经验积累，其中既包含实现细节、性能优化、技术权衡、应对国内特殊场景的技巧等知识的积累，又包含开发、运维、数据统计等必不可少的开发工作链路上的基础设施建设与经验积累。

一直以来，PWA技术领域都缺乏优质、可靠的中文技术资料。对其做调研的团队，一方面直接参考官方文档，一方面只能通过各种技术博客等不可靠的渠道获取一些零散的信息，通过拼凑和尝试积累经验，这无形中推高了技术调研的成本。

而你现在看到的这本书可以作为一个好的开始。作为本出现在我视野中的中文PWA技术书籍，这本书的优点在于，它既不是文档翻译，也不是手把手教你敲命令，把开发技术写成“菜谱”，而是涵盖了从理论准备到实操流程，再到经验分享的一本“全链路书籍”。它可以帮你真正理解PWA，同时获得一些由作者亲自验证过的工程落地中“踩坑”的经验。从这个角度来说，这本书完全可以称为“PWA民间中文指南”，有了它，我们终于拥有了一些可靠的、系统化的、本地化的、开箱即用的PWA技术资产。

第三，PWA的定位在于让开发者快速开发出同时具备“优质的Web，轻盈的应用”两种属性的产品。而这样的属性，在粗放发展的互联网业态中，暂时没有得到应有的重视。

然而，事情正在发生变化。

在大家都在谈论“互联网下半场”的时代，我们有必要思考“下半场”对于我们而言有什么样的具体含义。我的个人理解是，所谓上半场，比的是人无我有，人慢我快；而下半场，比的是人有我优，人粗放我精致，我们现在正在见证这样的市场转变。而PWA，作为一种显著提高用户体验的技术，必然在这个过程中展现出它的优势，谁能更快更好地利用这种优势，谁就能在新阶段的前端技术竞争中占领先机。

综上，这是一本值得期待的书，它在一定程度上弥补了国内PWA领域技术书籍的空白，并且将这个任务完成得相当漂亮。如果有人请我分享前端技术书单，我想这本书应该会位列其中。

—知乎知名技术作者　欲三更

2020年4月于杭州

本书全面介绍PWA技术原理和实际应用。适合有一定Web开发基础，或想学习PWA、需要一本全面的PWA手册的开发者阅读。

主要内容包括:

• 第1章介绍PWA的前世今生及生态环境；
• 第2章介绍PWA的一些前置技术和预备知识，为后面的学习打下基础；
• 第3章详细讲解PWA核心的部分Service Worker的各个知识点、注意事项及实践；
• 第4章介绍PWA的API，包含安装到桌面、新一代网络请求、消息通知、后台同步、离线缓存、消息推送等；
• 第5章介绍PWA使用过程中的一些配套工具，包括调试、评测、提效等；
• 第6章开始PWA的实践部分，针对不同的功能需求，按功能划分进行案例讲解；
• 第7章介绍Web的系统集成能力。

王乐平

前端工程师，W3C成员，CSDN博客专家，目前就职于阿里巴巴。专注于Web技术，参与过许多高流量Web项目的设计和开发，拥有丰富的Web前端开发经验，对PWA有比较深入的理解和实践经验。

前　言

• 第1章　初识PWA1

1.1　背景1

1.2　PWA概述4

1.2.1　快速5

1.2.2　集成5

1.2.3　可靠6

1.2.4　有吸引力7

1.2.5　PWA的布局结构7

1.3　应用程序与PWA8

1.3.1　能力8

1.3.2　开发成本8

1.3.3　安装包大小9

1.3.4　推广成本9

1.3.5　系统结构9

1.3.6　综合10

1.4　PWA的生态支持10

1.4.1　浏览器对PWA的支持11

1.4.2　PWA的生态11

1.5　成功案例12

1.5.1　Twitter12

1.5.2　HOUSING.com12

1.5.3　兰蔻13

1.5.4　星巴克13

1.6　环境准备13

1.6.1　浏览器13

1.6.2　Node.js环境13

1.6.3　HTTP Server14

1.6.4　调试工具14

1.7　个 PWA16

1.7.1　创建首页16

1.7.2　注册 Service Worker17

1.7.3　网络层拦截图片19

1.7.4　定制 404 页面19

1.7.5　离线可用21

1.7.6　添加到主屏幕22

1.8　本章小结24

• 第2章　预备知识25

2.1　JavaScript Module25

2.1.1　JavaScript 模块化历史25

2.1.2　什么是 JavaScript Module26

2.1.3　浏览器中使用 JavaScript Module29

2.1.4　为什么要用JavaScript Module31

2.2　Promise31

2.2.1　背景31

2.2.2　概念32

2.2.3　构造函数32

2.2.4　实例方法33

2.2.5　静态方法35

2.2.6　实例39

2.3　async / await40

2.3.1　async40

2.3.2　await42

2.3.3　async / await的优势43

2.4　Web Worker44

2.4.1　背景44

2.4.2　简介44

2.4.3　主线程 API46

2.4.4　Worker线程API48

2.4.5　实例49

2.5　本章小结51

• 第3章　PWA的核心桥梁：Service Worker52

3.1　Service Worker的结构52

3.1.1　ServiceWorkerContainer 接口53

3.1.2　ServiceWorkerRegistration 接口58

3.1.3　ServiceWorker 接口60

3.1.4　ServiceWorkerGlobalScope接口62

3.2　Service Worker 的生命周期68

3.2.1　脚本的生命周期68

3.2.2　线程的生命周期69

3.2.3　线程退出70

3.2.4　更新Service Worker文件的条件71

3.2.5　调试生命周期71

3.3　本章小结72

• 第4章　核心技术73

4.1　Manifest 应用清单73

4.1.1　简介73

4.1.2　字段说明74

4.1.3　安装条件78

4.1.4　显示安装横幅78

4.1.5　自定义安装时机80

4.1.6　应用的更新81

4.1.7　iOS 上的适配82

4.1.8　兼容适配库83

4.2　Fetch 网络功能83

4.2.1　Fetch简介83

4.2.2　Request86

4.2.3　Headers88

4.2.4　Response93

4.2.5　Body95

4.2.6　实例95

4.3　Notification 消息通知98

4.3.1　简介98

4.3.2　接口信息99

4.3.3　实例102

4.4　Sync后台同步104

4.4.1　SyncManager接口104

4.4.2　Sync 流程105

4.4.3　使用场景107

4.5　Cache离线存储110

4.5.1　简介110

4.5.2　CacheStorage111

4.5.3　Cache112

4.5.4　缓存空间问题115

4.5.5　opaque 响应缓存问题115

4.6　Push消息推送117

4.6.1　简介117

4.6.2　接口117

4.6.3　订阅实现121

4.6.4　推送协议124

4.6.5　VAPID 密钥的生成126

4.6.6　实例128

4.6.7　常见问题129

4.7　本章小结130

• 第5章　配套工具131

5.1　PWA工具箱：Workbox131

5.1.1　CLI模式131

5.1.2　手写模式138

5.1.3　Workbox 路由139

5.1.4　Workbox 插件141

5.1.5　实例141

5.2　离线数据库：IndexedDB145

5.2.1　接口145

5.2.2　操作146

5.2.3　在Service Worker 中使用IndexedDB157

5.2.4　更简单的 IndexedDB158

5.3　评测报告：Lighthouse160

5.3.1　简介160

5.3.2　打开 Lighthouse161

5.3.3　测试 PWA161

5.3.4　测试结果161

5.4　调试工具：DevTools163

5.4.1　在Chrome上调试163

5.4.2　在Safari上调试169

5.4.3　在Firefox上调试170

5.4.4　调试小结171

5.5　本章小结171

• 第6章　实践方案172

6.1　接入Service Worker 172

6.1.1　注册方案172

6.1.2　状态同步方案175

6.1.3　Service Worker 开关方案176

6.1.4　错误收集177

6.2　安装网站到桌面178

6.2.1　为网站增加桌面能力178

6.2.2　新闭环方案180

6.2.3　新闭环方案实现181

6.3　消息通信182

6.3.1　窗口向 Service Worker 线程通信182

6.3.2　Service Worker线程向窗口通信186

6.4　数据离线189

6.4.1　离线处理时机189

6.4.2　离线策略193

6.5　推送通知197

6.5.1　Web Push 库的选择197

6.5.2　应用服务器后端搭建198

6.5.3　前端页面搭建200

6.5.4　效果202

6.5.5　无法推送/订阅203

6.6　改造网站为PWA203

6.6.1　准备203

6.6.2　PWA检测204

6.6.3　PWA改造204

6.6.4　重新评测网站215

6.7　本章小结215

• 第7章　系统集成216

7.1　系统集成项目组Fugu216

7.2　摄像头和麦克风集成217

7.2.1　音频和视频的捕获217

7.2.2　视频流的截图219

7.2.3　视频流下载221

7.3　输入集成224

7.3.1　语音识别224

7.3.2　剪切板操作226

7.4　设备特性集成228

7.4.1　网络类型及速度信息229

7.4.2　网络状态信息229

7.4.3　电池状态信息230

7.4.4　设备内存信息230

7.5　定位集成231

7.5.1　地理定位231

7.5.2　设备位置233

7.6　本章小结235

本书全面介绍PWA技术原理和实际应用。适合有一定Web开发基础，或想学习PWA、需要一本全面的PWA手册的开发者阅读。

主要内容包括:

• 第1章介绍PWA的前世今生及生态环境；


• 第2章介绍PWA的一些前置技术和预备知识，为后面的学习打下基础；


• 第3章详细讲解PWA核心的部分Service Worker的各个知识点、注意事项及实践；


• 第4章介绍PWA的API，包含安装到桌面、新一代网络请求、消息通知、后台同步、离线缓存、消息推送等；


• 第5章介绍PWA使用过程中的一些配套工具，包括调试、评测、提效等；


• 第6章开始PWA的实践部分，针对不同的功能需求，按功能划分进行案例讲解；


• 第7章介绍Web的系统集成能力。

王乐平

前端工程师，W3C成员，CSDN博客专家，目前就职于阿里巴巴。专注于Web技术，参与过许多高流量Web项目的设计和开发，拥有丰富的Web前端开发经验，对PWA有比较深入的理解和实践经验。

★本书从PWA的概念说起，包括从商业视角的推广成本到体验视角的秒开、离线体验等，配合实例代码，能够让读者从快速了解到快速上手。PWA技术体系是Web应用的方向，希望通过这本书，能够让更多的读者了