PWA实战:面向下一代的PROGRESSIVE WEB APP
相关资料
[
推荐序1
PWA 非常具有革新性，在国外已得到广泛的应用，取得非常好的效果，既为众多站长带来很大收益，也给用户带来很好的用户体验。可喜的是，PWA 在国内同样快速发展，许多知名站点已经拥有 PWA 的绝佳体验，如饿了么、微博等。
之前有几个枷锁束缚着传统 Web 的发展。首先受限于Web 端的首屏展现速度、渲染性能、动画流畅性等瓶颈，无论怎么进行优化，始终无法突破移动设备上浏览器给 Web 套上的用户体验枷锁。其次Web App 不像原生应用可以在桌面上创建入口，用户进入 Web 站点的主要渠道是搜索引擎，这无疑成本巨大，导致用户和站点之间的黏性很脆弱。*后，Web 端在原生能力上还有限制。
PWA 正是为解决这些问题而提出的概念—PWA 能被添加到手机的主屏幕，可以离线使用，还可以接收离线消息；采用 App Shell 设计模型配合 Service Worker，能让站点具有和原生应用相似的体验；并且 PWA 还包含诸多其他提升用户体验的技术和标准，比如 Credential Management API，可以让用户登录时无须输入密码。PWA 提出的这些新技术，如 Service Worker，无法兼容老的浏览器怎么办？正如本书第1 章所述，PWA 是渐进式的，在不支持新特性的浏览器上其网站仍可以作为一个普通的 Web 网站来运行，不需要花很大代价进行升级。通过详细的代码示例、直观的配图，本书一步步引导读者学会 PWA 的各项技术要点，学会如何搭建体验良好的 PWA 站点。作者不仅介绍 Web App Manifest、Service Worker 等PWA 基础知识，还发散地讲到Fetch API 等周边的新技术标准，甚至讲到如何使用第三方库Workbox 快速编写Service Woker，知识点覆盖非常全面。
无论是 PWA 初学者，还是已有一定经验的读者，这本书都非常值得一读。
——彭星，百度资深前端工程师
推荐序2
Progressive Web App 是既Ajax、响应式设计、HTML5 之后，Web 平台的又一次革命性突破。它在开放Web 标准的基础之上，突破了以往Web 应用只能依赖互联网分发与依赖浏览器作为入口的两大桎梏，瞬间打开了Web 应用从性能、架构到用户体验上的一系列可能性。
PWA 中非常引人注目的核心新特性是Service Worker，它实质上为Web 应用带来了一种安全且低功耗的后台处理能力。无论是用于实现离线Web 应用所需要的缓存读写与网络代理，还是用于提升Web 应用能力的推送通知、后台同步，其实都得益于这种新的并发能力。随着Edge 与Safari 的相继发布，Service Worker 已经历史性地得到了全浏览器的支持。
而这就要归功于Web 开放性的力量。相比于其他众多私有的“类Web”技术，PWA 技术完全属于开放Web 标准。PWA 因此具备了独一无二的跨平台能力，不止于移动端，Chrome 与Windows 已经让PWA 在桌面端也晋升为*公民。这使得使用一套代码发布可以同时跨移动桌面设备、跨操作系统、跨浏览器的超级应用真正成为可能。这里有非常大的想象空间，非常值得我们期待。
PWA 堪称“下一代Web 应用模型”，从2015 年*次发布，到2018 年年中，无论是国际上的谷歌、Twitter、Facebook、Instagram、FlipKart、Uber、Lyft、Pinterest、Tinder、Flipboard、Spotify，还是国内的AliExpress、饿了么、微博等，都已经在使用PWA 技术甚至发布了专门的PWA 产品。可以说PWA 从生态到工具链都已经逐渐成熟，接下来将会迎来更大的爆发。
在这个时间点里，很高兴能看到本书的翻译团队能在如此短的时间里将新颖的技术引入中文社区，这非常难能可贵。本人也做过一些PWA 的分享，但要对社区带来更大的推动，我们更需要这样完整和系统的作品。
本书涵盖了PWA 的方方面面。全书不仅通过一个案例将PWA 的各项技术串联起来，还系统地阐述了这些技术所要解决的问题与它们可以带来的产品价值。书中讨论到的策略与模式非常实用，既可以帮助你快速上手PWA，也能帮助你对Web应用的工程化有更好的理解。
在此，作为整个中文Web 社区的一员，我谨感谢团队的贡献！
——黄玄，Facebook 前端工程师，资深PWA 专家
推荐序3
我们很荣幸见证了Web 的又一次革新。
两年前向开发者提起 Progressive Web App 这个令人激动的“新东西”时，他们的*个反应都是摇着头说：“也就只是谷歌造的一个玩具，说不定明天就没了，其他浏览器都不兼容，在这方面投入成本不值得。” 对于国内开发者而言，当初我们面临的不仅是国内大量手机厂商对Android 4.4 系统版本的深度魔改（然而，PWA 的几个核心特性都需要Android 5.0 及以上版本才具有），还有国内百花齐放的定制化移动端浏览器，着实令开发者对PWA 望而却步，只能远远地羡慕和观望Android 在没有太多历史包袱的印度及东南亚的手机市场。毕竟时代是不断向前发展的，国内的手机厂商也在逐步地升级他们所依赖的Android 基础版本，时至今日，国内Android 手机中 5.0 以上的系统版本已经占了八成以上。不仅如此，2018 年年初，iOS 也宣布支持PWA 的几大核心特性。这就意味着，在国内的这一片土壤上，我们已经可以放心愉快地玩PWA 了。
我们团队很快着手把微博从HTML5 版本改造成PWA，各方反馈用户体验和加载速度都得到很大提升，在此基础上给产品带来的收益更是不容小觑。
对于新事物的探索，往往缺少详实的参考资料。大量碎片化的介绍性文章和晦涩难懂的标准文档，难免让人走弯路，我们在实践的过程中也并不是特别顺利。幸运的是，现在有了 Dean Alan Hume 的这一本书，它可以算是全球范围内*本完整介绍 PWA 一系列相关技术的书籍。书中不仅讲述概念和实践，还穿插性地介绍了它们的发散用法——不仅仅止步于做一个 Web App 。本书给读者提供了更多想象空间，PWA 给开发者提供了更多可能性，这是一件多么让人兴奋的事情！
感谢本书翻译团队和博文视点推出如此优秀的作品，给国内Web 技术社区注入一股强劲的暖流。正是因为有这样一群人，才让技术社区越来越丰富和美好。
——韦元悦，手机微博团队 微博PWA 负责人
序
对于包括Twitter 和福布斯在内的许多国际品牌来说，PWA 现在已经成为提供现代移动 Web 体验的默认方式。PWA 可以提供类似原生应用所能实现的快速、吸引人的体验，并将其带到移动Web 世界被所有人发现和访问。
通过使用推送通知和添加到主屏幕等功能，用户可以重新与 PWA 进行互动，像兰蔻自2016 年10 月推出 PWA 以来，同比收入增长了16%。对于重复访问，PWA 还支持即时和离线加载体验，即使在网络连接不稳定的情况下也可以提高生产力。
Dean Alan Hume 的这本书精彩绝伦，它采用实战为主、示例驱动的方式学习如何通过PWA 构建快速响应且吸引人的网站。你将会发现每个 PWA 功能都呈现在一个清晰、独立的部分当中，它突出了为什么这个功能能够为用户提供价值、如何使用它，以及从现实世界的 PWA 中所学到的*实践。
作为 PWA 的早期使用者，Dean Alan Hume 掌握了一些非常重要的技巧和诀窍，并可以让移动网站有效地使用这些新功能。我很高兴能为大家推荐此书，并希望它可以帮助你释放在移动设备上提供出色用户体验的潜力。
—Addy Osmani，谷歌PWA 项目技术经理
]
本书特色
[
Progressive Web App（PWA）是由谷歌提出的一整套技术解决方案，它致力于为 Web 提供出色的用户体验，并完美体现了渐进增强原则。作为为数不多的实战入门用书，《PWA 实战：面向下一代的Progressive Web App》旨在通过大量清晰示例来介绍 PWA 的主要特性。全书一共由五个部分组成：*部分介绍 PWA 的概念及解锁 PWA 应用的关键—Service Worker，第二部分介绍如何构建响应速度更快的 Web 应用，第三部分介绍如何构建更吸引人的 Web 应用，第四部分介绍如何构建应对各种复杂网络的 Web 应用，第五部分介绍 PWA 的发展前景。本书适合Web 开发人员及前端技术爱好者阅读，稍有 HTML、CSS 和JavaScript 基础学习效果更佳。
]
内容简介
[
Progressive Web App（PWA）是由谷歌提出的一整套技术解决方案，它致力于为 Web 提供出色的用户体验，并完美体现了渐进增强原则。作为为数不多的实战入门用书，《PWA 实战：面向下一代的Progressive Web App》旨在通过大量清晰示例来介绍 PWA 的主要特性。全书一共由五个部分组成：靠前部分介绍 PWA 的概念及解锁 PWA 应用的关键―Service Worker，第二部分介绍如何构建响应速度更快的 Web 应用，第三部分介绍如何构建更吸引人的 Web 应用，第四部分介绍如何构建应对各种复杂网络的 Web 应用，第五部分介绍 PWA 的发展前景。本书适合Web 开发人员及前端技术爱好者阅读，稍有 HTML、CSS 和JavaScript 基础学习效果更佳。
]
作者简介
[
DEAN ALAN HUME 是一名作者、博客作者、软件开发者，同时也是 Google 开发专家。他写过很多文章，并发表过几十篇演讲，同时还是《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) 一书中做出了贡献。作为一名软件开发人员，Dean 对 Web 性能充满热情，并且经常在他的博客 deanhume.com 上撰写软件开发相关的文章。他的爱好广泛，包括冲浪、滑雪、拳击和参加三项全能运动。目前，他正在学习啤酒酿造。
郑丰彧，前端工程师，喜欢学习与分享，崇尚开源，热爱前端新技术的推广与应用。创建了 RxJS 中文社区和知乎专栏《RxJS 学习》，翻译作品有《Angular权威教程》《RxJS中文文档》和 《MobX中文文档》。GitHub: @SangKa 。
]
目录
序…………………………………………………………………………………………….XIV前言………………………………………………………………………………………….XV致谢…………………………………………………………………………………………XVI关于本书………………………………………………………………………………….XVII
第１部分 定义PWA
第1章 理解PWA………………………………………………………………………….31.1 PWA有什么优势 ……………………………………………………………………………………..31.2 PWA 基础 ………………………………………………………………………………………………..5构建 PWA 的业务场景 ……………………………………………………………………………..61.3 Service Worker：PWA的关键 ……………………………………………………………………81.3.1 理解 Service Worker ………………………………………………………………………91.3.2 Service Worker 生命周期 ……………………………………………………………..101.3.3 Service Worker 基础示例 …………………………………………………………….. 111.3.4 安全考虑 …………………………………………………………………………………….131.4 性能洞察: Flipkart ………………………………………………………………………………….141.5 总结 ………………………………………………………………………………………………………15
第2章 构建PWA的**步……………………………………………………………162.1 建立在现有基础之上 ……………………………………………………………………………..162.2 构建 PWA 的前端架构方式 …………………………………………………………………….182.2.1 应用外壳架构 ……………………………………………………………………………..182.2.2 性能优势 …………………………………………………………………………………….212.2.3 应用外壳架构实战 ………………………………………………………………………222.3 逐步剖析现有的 PWA …………………………………………………………………………….232.3.1 前端架构 …………………………………………………………………………………….242.3.2 缓存 ……………………………………………………………………………………………252.3.3 离线浏览 …………………………………………………………………………………….262.3.4 观感 ……………………………………………………………………………………………272.3.5 *终产品 …………………………………………………………………………………….272.4 总结 ………………………………………………………………………………………………………28
第２部分 更快的Web应用
第3章 缓存……………………………………………………………………………….313.1 HTTP 缓存基础 ……………………………………………………………………………………..313.2 Service Worker 缓存基础 ………………………………………………………………………..343.2.1 在 Service Worker 安装过程中预缓存 …………………………………………..343.2.2 拦截并缓存 …………………………………………………………………………………383.2.3 整合所有代码 ……………………………………………………………………………..423.3 缓存前后的性能比对 ……………………………………………………………………………..453.4 深入 Service Worker缓存 ………………………………………………………………………..463.4.1 对文件进行版本控制 …………………………………………………………………..463.4.2 处理额外的查询参数 …………………………………………………………………..483.4.3 需要多少内存 ……………………………………………………………………………..483.4.4 将缓存提升到一个新的高度：Workbox ……………………………………….493.5 总结 ………………………………………………………………………………………………………51
第4章 拦截网络请求…………………………………………………………………..524.1 Fetch API ……………………………………………………………………………………………….524.2 fetch 事件 ………………………………………………………………………………………………55Service Worker 生命周期 ………………………………………………………………………..564.3 fetch实战 ……………………………………………………………………………………………….584.3.1 使用WebP 图片的示例 ………………………………………………………………….584.3.2 使用 Save-Data 请求头的示例 ……………………………………………………..614.4 总结 ………………………………………………………………………………………………………65
第３部分 吸引人的Web应用
第5章 观感……………………………………………………………………………….695.1 Web 应用清单 ………………………………………………………………………………………..69
5.2 添加到主屏幕 ………………………………………………………………………………………..715.2.1 定制图标 …………………………………………………………………………………….745.2.2 添加启动页面 ……………………………………………………………………………..755.2.3 设置启动样式和 URL ………………………………………………………………….765.3 添加到主屏幕的高级用法 ………………………………………………………………………775.3.1 取消提示 …………………………………………………………………………………….785.3.2 判断使用情况 ……………………………………………………………………………..785.3.3 推迟提示 …………………………………………………………………………………….795.4 调试清单文件 ………………………………………………………………………………………..815.5 总结 ………………………………………………………………………………………………………82
第6章 推送通知…………………………………………………………………………846.1 与用户互动 ……………………………………………………………………………………………846.2 参与度洞见：Weather Channel ……………………………………………………………….866.3 浏览器支持 ……………………………………………………………………………………………876.4 **个推送通知 …………………………………………………………………………………….886.4.1 订阅通知 …………………………………………………………………………………….896.4.2 发送通知 …………………………………………………………………………………….92
6.4.3 接收通知并与之互动 …………………………………………………………………..93
6.4.4 取消订阅 …………………………………………………………………………………….97
6.5 第三方推送通知 …………………………………………………………………………………….98
6.6 总结 ………………………………………………………………………………………………………99第４部分 有弹性的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第５部分 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 逻辑似乎从未执行 …………………………………….16111.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
封面
书名:PWA实战:面向下一代的PROGRESSIVE WEB APP
作者:（美）Dean Alan Hume（迪恩
页数:196
定价:¥69.0
出版社:电子工业出版社
出版日期:2017-06-01
ISBN:9787121341946
PDF电子书大小:31MB 高清扫描完整版