PWA入门与实践

　　PWA是Google提出的移动Web应用程序方向，它为开发混合应用的开发者提供了一个新方向，它结合了Web和原生应用程序的优势，提供了更好的用户体验。PWA可以在几个小时内将你的网站或应用程序转换，从而提供 Web 和原生 APP 的便利。 本书系统介绍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.3　输入集成224
7.4　设备特性集成228
7.5　定位集成231
7.6　本章小结235