PWA实战：面向下一代的Progressive Web APP

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 上撰写软件开发相关的文章。他的爱好广泛，包括冲浪、滑雪、拳击和参加三项全能运动。目前，他正在学习啤酒酿造。

网站可以离线工作，近乎瞬时的加载速度，在各种带宽条件下平滑切换——不使用 PWA 的话，这一切都只是幻想。PWA 使用诸如推送通知、智能缓存和 Service Workers 这样的现代浏览器功能来管理数据、减少服务端使用、适应不稳定链接，并让你拥有更多控制权利以取悦客户。更棒的是，构建 PWA 只需要 JavaScript、HTML 和 本书中所能学到的易于掌握的技术。

通过本书，可以学习到 PWA 的设计，以及用来构建快速、可靠网站的技术。使用 PWA 技术的方式有很多种，本书的实战教程提供了有趣的独立示例，你完全可以挑选自己感兴趣的部分阅读。你还将学习到 Service Worker 是如何极大地提升网站的加载速度，如何有效地使用推送通知，以及如何创建可以离线工作的网站。本书包括：

√ 使用 Service Worker 改进缓存

√ 使用清单文件和 HTML 标记

√ 推送通知

√ 离线优先的 Web 设计

√ 数据同步技术

　　推荐序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 项目技术经理
　　前言
　　我有幸成为一名 Web 开发人员已经将近15 年了。自从我开始从事 Web 开发以来，Web 已经发生了翻天覆地的变化，年复一年，它一直在让自己变得更好。
　　大约5 年前，我坐在会议厅中聆听谷歌的 Alex Russell 讨论 Service Worker 以及它们是如何成为 Web 的颠覆者的。在场的许多观众（包括我）都对这个新颖的特性以及它将带给 Web 的好处缺少信心。但是，他的话已成真，Service Worker 和现在的 PWA（Progressive Web App）确确实实就在我们身边，并且不断地使Web 更加完美。
　　我还记得自己第一次尝试 PWA 的情景。起初，事情似乎有些复杂，但随着我写出了第一个可以运行的 Service Worker 时，一切都走向了正轨。在那个“顿悟”的瞬间，我意识到这些功能有多么强大。从那以后，我便迷上了 PWA 。
　　我对 Web 性能充满热情，并且乐于制作速度快的网页以取悦用户。为此，多年以前，我与Manning 出版社合作，写了一本关于Web 性能和ASP.NET 网站的书。（谁知道这本书？）对我个人而言，PWA 最棒的一点就是它能帮助你构建快速、富有弹性、吸引人的Web 应用，从而取悦用户。当你读完本书的时候，我衷心地希望你也能同样拥有那个“顿悟”的时刻，以及像我一样对PWA 充满热情。
　　致谢
　　首先，我要感谢我的好妻子 Emily 在我编写本书时给予我的所有鼓励。我喜欢她的想法，重视她的意见。我经常带着疯狂、轻率的想法奔向她，她却总是耐心地倾听一切。
　　编写本书真的是一次非常愉快的体验，我要特别感谢 Jennifer Stout 给予我的所有帮助。在编辑的过程中，Jennifer Stout 的超级冷静使得一切都变得简单，也十分有趣。我们就像是写作领域中的汉· 索罗和楚巴卡（我是楚巴卡）。这是我们共同合作的第三本书，希望将来我们还会合著更多的书。
　　如果没有 Marius Butuc 的帮助，本书中很多技术方面的问题都将无法解决。感谢Marius 的真知灼见、技术指导，以及各种好建议，看到他和我一样因这本书而激动，真是太欣慰了。
　　一如既往，我还要特别感谢我的兄弟 Robin Osborne 。如果没有他的鼓励，清晨的早餐和灵感就不一样了。请给我两个 Huevos al Benny1 ！
　　我也非常感谢帮助完善和改进本书的所有技术审校者Addy Osmani、JakeArchibald 和 Patrick Haman，感谢他们的帮助，他们提供了反馈意见，给出了想法，简直太棒了。还要感谢本书技术校对 Alexey Galiullin 和所有审校者，他们是 Al Pezewski、Birnou Sébarte、David Krief、Devang Paliwal、Evan Wallace、Goran Ore、Kamal Raj、Keith Donaldson、Ken W. Alger、Kim Lok?y、Laura Steadman、Michal Paszkiewicz 和 Ron Chloupek 。
　　最后，我要感谢购买本书的读者！我衷心地希望你们能够享受阅读的过程，正如我享受编写本书的过程。
　　关于本书
　　本书旨在帮助你使用 PWA 超酷的功能来构建快速、吸引人和富有弹性的 Web应用。本书首先重点介绍 PWA 的基础知识，然后深入讨论其核心功能，并演示如何在你自己的网站上实现它们。在各个章节中，本书将剖析世界各地一些大型组织所建立的现有 PWA，并探讨可用于改进自己的 PWA 的不同技巧和窍门。
　　PWA 是为那些希望将 Web 开发提升到更高层次的 Web 开发人员量身打造的。无论是初学者，还是经验老道的 Web 开发者，都将会了解到 PWA 的全貌及如何使用 PWA 的功能来增强他们的网站。尽管网上已经有大量关于PWA 的文章和文档，但是本书将所有内容以清晰易懂的形式融汇到一起，这将有益于任何想深入了解 PWA 的人。在阅读本书的各个章节时，具有一定的 Web 开发基础将会有所帮助，但总体来说，并不需要你是一名专家。在本书的引导下，你首先会拥有一个基础的Web 应用，然后慢慢在上面添加 PWA 的新功能。
　　本书的组织结构
　　本书共12 章，分为五大部分。
　　第1 部分首先从基础入手，说明了关于 PWA 基础你所需要了解的一切。
　　第1 章讨论了 PWA，并从业务案例入手，解释了为什么 PWA 对于现代 Web开发者来说如此重要。该章还介绍了 Service Worker，它在创建 PWA 的过程中发挥了关键作用。
　　第2 章介绍了构建 PWA 的第一步，并讨论了构建 PWA 时可以使用的不同架构方式。该章还逐步剖析了一个现有的 PWA，并展示了世界各地的组织如何开始从 PWA 的功能中获益。
　　第2 部分介绍如何使用 Service Worker 的能力来构建快速的 Web 应用。
　　第3 章介绍了 Service Worker 缓存的基础，然后介绍了 Web 中一些更高级的缓存用例。
　　第4 章探讨了 Fetch API 并解释了如何使用它来提升 PWA 的加载速度。该章还介绍了两种巧妙方法，使用 WebP 格式的图片和 Save-Data 请求头来使网页“瘦身”。
　　第3 部分介绍的功能有助于你创建吸引人的 PWA 。
　　第5 章介绍了如何使用 Web 应用清单文件来构建迷人的 PWA。该章还介绍了“添加到主屏幕”功能，并讲述一些更高级的技术，以便充分利用此功能。
　　第6 章介绍了什么是推送通知，以及如何使用它来真正地与用户进行互动。该章通过示例逐步演示如何实现自己的推送通知。
　　第4 部分介绍的技术可以用来构建富有弹性的 PWA。
　　第7 章介绍了离线浏览并解释了如何在浏览器中解锁缓存以开始构建真正的离线应用。
　　第8 章讨论了如何构建 PWA，以应对用户网络连接出现问题的情况。你将从该章学习到构建富有弹性的 Web 应用的最佳实践，以应对较差或不可靠的网络连接。
　　第9 章介绍了构建离线 Web 应用的技术，它可以确保当应用重新连接到网络时能够同步数据。该章还介绍了名为“后台同步”的API，并演示了如何使用这项强大的功能来构建 PWA 。
　　第5 部分介绍了 PWA 的未来，以及目前可供开发人员使用的许多超棒的新功能。
　　第10 章介绍了Web Stream API，并解释了它为什么如此强大。该章还演示了如何使用此 API 来加快页面的加载速度。
　　第11 章总结了一些经常被问到的问题，并试图尽可能清楚、彻底地解答它们。
　　第12章（也是最后一章）探讨了 PWA 的未来以及一些正在开发或正在进行试验的新 API 。
　　通常，对 PWA 完全陌生的开发者应该阅读前两章，以了解 PWA 的内部工作原理以及如何正确地设置开发环境。在本书的开头你将创建一个示例应用，然后每章都在其基础上进行构建。也就是说，阅读本书的过程中，你可以在不同的章节之间进行切换，并挑选你感兴趣的主题进行阅读。但是为了全面了解 PWA 的许多重要功能，建议阅读所有章节。
　　代码
　　本书所有带有标号的代码清单都可以从 www.manning.com/books/progressivewebapps 进行下载，代码同样也可以在 GitHub 上找到: https://github.com/deanhume/progressiveweb-apps-book 。
　　作者
　　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 上撰写软件开发相关的文章。他的爱好广泛，包括冲浪、滑雪、拳击和参加三项全能运动。目前，他正在学习啤酒酿造。
　　封面图片
　　本书的封面图片名为“埃塞俄比亚人的习惯（1581）”。这张图片取自 Thomas Jefferys 的《从古至今不同国家穿着大全（共四卷）》（在1757 年到1772 年之间于伦敦出版）。从读书扉页可以看出，书中的内容都是手工上色的铜板雕刻，使用阿拉伯胶黏合而成。Thomas Jefferys（1719—1771）被称为“乔治三世的地理学家”。
　　Thomas Jefferys 是当时有名的英语地图绘制专家，他为政府和其他官方机构雕刻和印刷地图，并且出版了许多商用地图和地图册，其中又以北美洲地图居多。在制作地图的过程中，他对当地人的穿着产生了兴趣。这种兴趣最终催生了这套共四卷的书。
　　18 世纪晚期，人们对遥远的大陆充满了兴趣，因此类似的书也变得流行起来，无论是旅行者还是足不出户的人都可以从书中了解其他城市的风土人情。Thomas Jefferys 的书中展示了多种多样的穿着，生动地描绘了二三百年前世界各国人民的样子。从那以后，人们的穿着就开始发生变化，地区和国家带来的多样性逐渐消失。
　　现在已经很难在不同大陆的人们身上看到不同点了。往好的方面看，我们牺牲了文化和视觉多样性，换来了丰富多彩的个人生活—或许是说丰富多彩并且非常有趣的思想和科技生活。
　　在这个计算机图书高度同质化的时代，Manning 希望通过 Thomas Jeffreys 的图片中丰富多样的生活来表现计算机能带来的创造性和积极性。
　　审校者介绍
　　NewBee 团队是Alibaba-Group 文化娱乐集团旗下UC 事业群的多元化技术团队（我们的网址：https://plus.ucweb.com/newbee）。
　　“诗”一样的技术：
　　我们追求有品味的代码、优雅深邃的思想、轻灵并蓄的方案、清新文艺的态度！
　　梦想的“远方”：
　　相互扶持和兄弟姐妹们一起走向远方，成人之美、相互欣赏、切磋技艺、炼成大牛！
　　使命：
　　快乐前端释放创新能力！
　　叫兽、科海、俊鑫、衍良、必隆参与本书审校。

序 XIV

前言 XV

致谢 XVI

关于本书 XVII

第１部分 定义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

第２部分 更快的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

第３部分 吸引人的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

第４部分 有弹性的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 逻辑似乎从未执行 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