Progressive Web App(PWA)是由谷歌提出的一整套技术解决方案,它致力于为 Web 提供出色的用户体验,并完美体现了渐进增强原则。作为为数不多的实战入门用书,《PWA 实战:面向下一代的Progressive Web App》旨在通过大量清晰示例来介绍 PWA 的主要特性。全书一共由五个部分组成:第一部分介绍 PWA 的概念及解锁 PWA 应用的关键—Service Worker,第二部分介绍如何构建响应速度更快的 Web 应用,第三部分介绍如何构建更吸引人的 Web 应用,第四部分介绍如何构建应对各种复杂网络的 Web 应用,第五部分介绍 PWA 的发展前景。
《PWA实战:面向下一代的Progressive Web APP》适合Web 开发人员及前端技术爱好者阅读,稍有 HTML、CSS 和JavaScript 基础学习效果更佳。
Dean Alan Hume 是一名作者、博主、软件开发者,同时也是谷歌开发专家。他写过很多文章,并发表过几十篇演讲,同时还是Fast ASP.NET Websites(Manning, 2013)和Building Great Startup Teams(Blurb, 2017) 的作者。他还为A Career On The Web: On the Road to Success(Smashing Magazine, 2015)一书做出了贡献。作为一名软件开发人员,他对Web 性能调优充满热情,并且经常在他的博客 deanhume.com 上撰写软件开发相关的文章。他的爱好广泛,包括冲浪、滑雪、拳击和参加三项全能运动。目前,他正在学习啤酒酿造。
序 XIV
前言 XV
致谢 XVI
关于本书 XVII
第1部分 定义PWA
第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应用
第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应用
第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应用
第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的未来
第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
译者序
本书是Manning 出版社Progressive Web App 一书的中文版,同时也是国内首部关于PWA 技术的书籍。Manning 出版社的In Action 系列书籍一直是我所钟爱的,理论与实战相得益彰的结合总是让我能快速高效地学会各种新技术。这也是我选择翻译这本书的主要原因,它能让完全不了解PWA 的读者也可以快速上手并从中感受到PWA 的魅力所在。
在这里,我不想再重复介绍什么是PWA 以及其优势是什么,因为原书作者Dean Alan Hume 在为大家带来的这样一本如此经典的PWA 入门书籍中,对此已有详尽描述。在这里我更想给大家讲述的是本书的诞生过程,一场开源与侵权的博弈之旅。
我头一次接触PWA 是在2016 年,虽然只是短暂的接触,但已被PWA 所完全秉承的渐进增强思想以及Service Worker 的强大深深吸引,并坚信PWA 一定是Web的未来发展方向之一,就像当年的HTML5 一样。之后我便自然而然地开始学习PWA,直到接触到Progressive Web App,它让我对PWA 的认知又有了实战性的提升。
在这个时间点上我就萌生出将这本书翻译成中文的想法。其实当初想得非常简单,就是希望尽早地让更多的人看到此书,让更多的人接触PWA,感受它的神奇与力量。具体翻译工作于2017 年下半年启动(此时原书还处于MEAP 版本,正式发布是在2017 年12 月初),当时用了大概一个月的时间翻译出前三章,同时也在积极寻找这本书中文翻译版权的归属,很遗憾的是一直没有找到。当时有些气馁—没有拥有版权的出版社,又该如何继续呢?难道进行到这里就只能戛然而止?很庆幸没有放弃,因为初心尚在—让大家能尽早地看到这本书。
开源与侵权
后面的几个月我一直在间断性地进行翻译,时间来到2017 年的11 月28 日,此时我已经完成了前6 章的翻译与校对工作。其间为了庆祝女儿的一岁生日,在生日当天我将前6 章内容发布到GitHub 上供大家阅读学习。想必看到这里,很多同学会说:“你这不是侵权了吗?”没错,这肯定侵害了拥有中文版权的出版社的权益,我心里也很清楚这一点。但为什么还要这么做呢?原因主要有两点:一是在没有找到出版社的情况下,如果想让大家尽早地学习PWA,势必要有所行动;二是既然做出选择,就要做好最坏的打算,如果将来出版社追究我的侵权行为,我肯定会积极配合,对出版社造成的损失我也会悉数承担。但是无巧不成书,就在开源的当天,在印记中文的微信群里,热心而又神通广大的裕波老师看到我发布信息的当天,就找到本书中文版权方“博文视点”,并为我牵线搭桥,把我推荐给张春雨编辑,水到渠成般就有了这本中文书及这篇序中的故事。
故事到这里其实还没有结束,后面有一次在我与侠少(即张春雨编辑)的聊天中,我问道:“我擅自将这本书的译文放到GitHub 上,必定损害了出版社的利益,侠少你怎么看?”侠少答道:“是侵权了,但从某种意义上来说,你这种做法并不完全违背出版社的根本宗旨—更快地将国外好书呈现给国内的读者,而这正是我们长期以来不懈追求的。”听后,我不禁被博文视点和侠少所代表的这种开放包容、与时俱进的心态所折服。希望今后我还能为国内的技术发展贡献微薄之力,也希望能带动更多的人来为更多更多的人服务。
故事到此结束。
勘误反馈
由于个人水平有限,在翻译的过程中难免存在一些疏漏和错误,为了让后续读者看到一本更完善的技术书籍,欢迎各位读者不吝指正。
除博文视点官方勘误页面之外,我在GitHub 上专门创建了用来收集本书勘误问题的仓库,地址为:https://github.com/progressive-web-apps/book。
致谢
首先,感谢张春雨编辑在本书的翻译过程中对我的支持和信任。如果没有他的帮助,我是绝对没有办法完成这本书的翻译工作的。同时还要感谢博文视点各位编辑的辛勤劳动,让本书最终得以面世。
其次,感谢裕波老师的引荐,如果没有他的引荐,也就不会有这本书。同时还要感谢裕波老师带领的UC 国际浏览器的NewBee 团队,如果没有他们的审校,这本书将会大为失色。
最后,感谢我亲爱的妻子顺子,以及我的宝贝女儿柚柚。这本书是我牺牲无数个原本用来陪伴你们的周末翻译而完成的,可见没有你们无条件的支持,这项艰巨的工作根本无法完成,所以你们对于这本书厥功至伟。还要祝福我的小宝贝健康快乐地成长,在老爸心中你就是永恒的P(Perfect)W(Wonderful)A(Adorable)。
郑丰彧
2018 年 5 月 1 日于大连
页 数:196
开 本:16