第1部分 定义PWA 3
第1章 理解PWA 3
1.1 PWA有什么优势 3
1.2 PWA基础 5
构建PWA的业务场景 6
1.3 Service Worker: PWA的关键 8
1.3.1 理解Service Worker 9
1.3.2 Service Worker生命周期 10
1.3.3 Service Worker基础示例 11
1.3.4 安全考虑 13
1.4 性能洞察:Flipkart 14
1.5 总结 15
第2章 构建PWA的第一步 16
2.1 建立在现有基础之上 16
2.2 构建PWA的前端架构方式 18
2.2.1 应用外壳架构 18
2.2.2 性能优势 21
2.2.3 应用外壳架构实战 22
2.3 逐步剖析现有的PWA 23
2.3.1 前端架构 24
2.3.2 缓存 25
2.3.3 离线浏览 26
2.3.4 观感 27
2.3.5 最终产品 27
2.4 总结 28
第2部分 更快的Web应用 31
第3章 缓存 31
3.1 HTTP缓存基础 31
3.2 Service Worker缓存基础 34
3.2.1 在Service Worker安装过程中预缓存 34
3.2.2 拦截并缓存 38
3.2.3 整合所有代码 42
3.3 缓存前后的性能比对 45
3.4 深人Service Worker缓存 46
3.4.1 对文件进行版本控制 46
3.4.2 处理额外的查询参数 48
3.4.3 需要多少内存 48
3.4.4 将缓存提升到一个新的高度:Workbox 49
3.5 总结 51
第4章 拦截网络请求 52
4.1 Fetch API 52
4.2 fetch事件 55
Service Worker生命周期 56
4.3 fetch实战 58
4.3.1 使用WebP图片的示例 58
4.3.2 使用Save-Data请求头的示例 61
4.4 总结 65
第3部分 吸引人的Web应用 69
第5章 观感 69
5.1 Web应用清单 69
5.2 添加到主屏幕 71
5.2.1 定制图标 74
5.2.2 添加启动页面 75
5.2.3 设置启动样式和URL 76
5.3 添加到主屏幕的高级用法 77
5.3.1 取消提示 78
5.3.2 判断使用情况 78
5.3.3 推迟提示 79
5.4 调试清单文件 81
5.5 总结 82
第6章 推送通知 84
6.1 与用户互动 84
6.2 参与度洞见:Weather Channel 86
6.3 浏览器支持 87
6.4 第一个推送通知 88
6.4.1 订阅通知 89
6.4.2 发送通知 92
6.4.3 接收通知并与之互动 93
6.4.4 取消订阅 97
6.5 第三方推送通知 98
6.6 总结 99
第4部分 有弹性的Web应用 103
第7章 离线浏览 103
7.1 解锁缓存 103
7.2 提供离线文件 104
7.3 几个需要注意的问题 109
7.4 缓存是非永久性的 110
7.5 离线用户体验 110
7.6 跟踪离线使用情况 113
7.7 总结 114
第8章 构建更富弹性的应用 116
8.1 现代网站所面临的网络问题 116
理解lie-fi和单点故障 117
8.2 Service Worker的营救 119
8.3 使用Workbox 123
8.4 总结 125
第9章 保持数据同步 126
9.1 理解后台同步 126
9.1.1 准备开始 127
9.1.2 Service Worker 130
9.1.3 提供备用方案 132
9.1.4 测试 134
9.2 通知用户 134
9.3 定期同步 137
9.4 总结 138
第5部分 PWA的未来 141
第10章 流式数据 141
10.1 理解Web Stream 141
10.1.1 Web Stream有什么优势 142
10.1.2 可读流 143
10.2 基础示例 144
10.3 页面渲染加速 146
10.4 Web Stream API的未来 151
10.5 总结 152
第11章 PWA故障排除 153
11.1 添加到主屏幕 153
11.1.1 如何得知网站上有多少用户使用了添加到主屏幕功能 153
11.1.2 添加到主屏幕操作栏对我来说没有任何意义,如何禁用或隐藏它 154
11.1.3 求助,我的添加到主屏幕(A2HS)功能没效果 155
11.1.4 如果用户安装了我的Web应用到他们的主屏幕上,但他们又清除了Chrome的缓存,那么我的网站缓存的资源也会被清除吗 155
11.1.5 我不确定manifest.json文件是否正常工作,那么该如何进行测试 155
11.2 缓存 156
11.2.1 我在Service Worker文件中使用代码将资源添加到缓存中,但是当我更改文件时,缓存并没有更新,而且即使刷新了页面,看到的仍是旧版本的文件,这是为什么 157
11.2.2 如何对Service Worker代码进行单元测试 158
11.2.3 PWA可以使用用户设备上的多少内存 158
11.2.4 缓存的资源似乎每隔一段时间就会过期,如何确保它们永久性地缓存呢 158
11.2.5 如何处理查询字符串和缓存 159
11.3 调试Service Worker的具体问题 159
11.3.1 Service Worker文件多久更新一次 160
11.3.2 Service Worker文件出错,但我不知道出错的原因,那么如何调试它 160
11.3.3 求助,我做了各种尝试,但由于一些令人抓狂的原因,我的Service Worker逻辑似乎从未执行 161
11.3.4 我已经在Service Worker文件中添加代码来处理推送通知,但是如何在不写服务端代码的情况下进行快速测试呢 162
11.3.5 我已经构建了离线Web应用,但是现在无法得知用户是如何使用的,那么如何追踪用户的使用情况呢 162
11.4 总结 163
第12章 前程似锦 164
12.1 引言 164
12.2 Web蓝牙 165
12.3 Web分享API 166
12.4 支付请求API 169
12.5 硬件访问 172
12.6 硬件:形状检测API 172
12.7 接下来呢 173
12.8 总结 174