作者：郑丰彧
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
PWA实战：面向下一代的Progressive Web APP试读：
前言
我有幸成为一名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 [1]Benny！
我也非常感谢帮助完善和改进本书的所有技术审校者Addy Osmani、Jake Archibald 和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。
最后，我要感谢购买本书的读者！我衷心地希望你们能够享受阅读的过程，正如我享受编写本书的过程。[1] 英国的一种早餐。—译者注关于本书
本书旨在帮助你使用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/progressive-web-apps进行下载，代码同样也可以在GitHub上找到：https：//github.com/deanhume/progressive-web-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）。“诗”一样的技术：
我们追求有品味的代码、优雅深邃的思想、轻灵并蓄的方案、清新文艺的态度！
梦想的“远方”：
相互扶持和兄弟姐妹们一起走向远方，成人之美、相互欣赏、切磋技艺、炼成大牛！
使命：
快乐前端释放创新能力！
叫兽、科海、俊鑫、衍良、必隆参与本书审校。
读者服务
轻松注册成为博文视点社区用户（www.broadview.com.cn），扫码直达本书页面。
■ 提交勘误：你对书中内容的修改意见可在提交勘误处提交，若被采纳，将获赠博文视点社区积分（在你购买电子书时，积分可用来抵扣相应金额）。
■ 交流互动：在页面下方读者评论处留下你的疑问或观点，与我们和其他读者一同学习交流。
页面入口：http：//www.broadview.com.cn/34194第1部分 定义PWA
2015年，国际电信联盟预估到2015年年底全球上网人数将达到32亿，也就是说全球将近一半的人都在上网。想象一下每秒钟的上网人数—32亿。大约32000个足球场才装得下这么多人！这几乎是一个大到无法理解的数字。当这些人上网时，他们使用的设备不尽相同、他们的网速也各不相同，甚至同一个人的网速也会变化。作为Web 开发者，试图满足所有这些不同的场景似乎令人望而生畏。这正是PWA出现的契机。它们赋予了开发者构建速度更快、富有弹性并且更吸引人的网站的能力，这些网站能够被全球数十亿人访问。本书第1部分将直接深入地定义到底什么才是PWA以及它们能做什么。
第1章将介绍PWA所带来的好处。然后，展示那些已经利用PWA的功能来改善用户浏览体验的企业。接下来，还会详细分析一个现实世界中的PWA，并了解像Twitter和Flipkart这样的公司是如何建立自己的PWA的。PWA的关键组成部分是Service Worker，该章将深入介绍此主题，以及它在Web浏览器中加载时所经历的生命周期。
第2章首先介绍构建PWA时可以使用的不同架构方法，以及如何最佳地组织代码。我们将研究两种不同的方法：“汲取功能”与“应用外壳架构”，这两种方法都可以满足项目的需要。PWA最棒的一点就是你无须重写已存在的Web 应用便能开始使用PWA的功能，只要你觉得这些功能会使用户受益并提升他们的体验，就可以添加它们。最后，该章会剖析一个现有的PWA，该PWA是Twitter团队开发的Twitter Lite（精简版Twitter）。
在第1部分结束之际，你应该对PWA是什么，以及它们能带给用户的好处有一个清晰的认知。第1部分将为本书下一部分奠定基础，下一部分将直接进入编码环节，并讲述如何从头开始构建PWA。1 理解PWA
想象一下，你有能力去构建一个完全离线的网站，为用户提供几乎瞬间加载的体验，同时它对于不可靠的网络又是安全及富有弹性的。这听起来既不可能，又不可思议。无论你是否相信，绝大部分现代浏览器都已经内置提供了这些功能，只需要释放它们。当你利用这些强大的功能构建网站时，你便已经拥有了所谓的PWA （Progressive Web App）。
本章将介绍是什么让Web应用成为渐进式的，以及如何释放浏览器中已经存在的强大功能。在本章的结束之际，你会对PWA为用户带来的好处，以及为什么它会是Web的颠覆者有一个清晰的认知。最后，结合一个现实世界中的例子，展示一个已经从使用PWA中受益的公司。1.1 PWA有什么优势
回溯到1990年的圣诞节，Tim Berners-Lee 爵士和他在CERN 的团队创建了使Web正常工作所需的所有工具。他们创建了HTTP、[1]HTML和WorldWideWeb（全世界第一个网页浏览器）。WorldWideWeb只能运行具有超链接的简单纯文本组成的网页。事实上，这些第一代的网页仍然在线，并且可以浏览。
从几十年前回到现在，我们所浏览的网页并没有变化。当然，现在我们有了像CSS和JavaScript这样的功能，但网页的核心依旧是使用HTML、HTTP以及其他一些模块来构建，这些都是Berners-Lee和他的团队在多年前所创建的。这些辉煌的构建模块意味着Web已经能够以惊人的速度增长。然而，我们用来访问网页的设备数量也在不断增长。无论你的用户是在旅途中还是坐在书桌前，他们都无时无刻不在获取信息。我们对于Web的期望从未如此之高。
虽然移动设备变得愈发强大，但移动网络并不是总能满足需求。如果你使用智能手机，你就会知道移动连接有多么脆弱。2G、3G或4G本身都很不错，但是它们时常会无法连接，或者网速变得很差。如果你的业务是与Web相关的，这就是你需要解决的问题。
从历史上来说，原生应用（安装到手机上的） 已经能够提供更好的整体用户体验，下载完应用，它便可以立即加载。即使没有网络连接，也并非是完全不可用的，因为设备上已经存储了供客户使用的绝大部分资源。原生应用提供有弹性、吸引人的体验的能力使得它的数量已经呈爆炸式增长。目前，在苹果和谷歌的应用商店中，已经有[2]超过400万个原生应用。
同样从历史上来说，Web无法提供原生应用所具备的这些强大功能，比如离线能力、瞬时加载和更高的可靠性。这也正是PWA成为Web颠覆者的契机。主要的浏览器厂商一直在努力改进构建Web的方式，并创建了一组新功能以使Web开发者能够创建快速、可靠和吸引人的网站。PWA应该具备以下特点：
■ 响应式
■ 独立于网络连接
■ 类似原生应用的交互体验
■ 始终保持更新
■ 安全
■ 可发现
■ 可重连
■ 可安装
■ 可链接
这是Web开发者构建网站传统方式的一种转变。这意味着我们可以开始构建能应对不断变化的网络状况或无网络连接的网站。这还意味着我们可以建立更吸引人的网站来为用户提供一流的浏览体验。
读到这里，你可能会想，这太疯狂了。那些不支持这些新功能的老浏览器怎么办？PWA最棒的一点就是它真的是渐进式的。如果你构建一个PWA，即使在一个不支持的老旧浏览器上运行，它仍然可以作为一个普通的网站来运行。驱动PWA的技术就是这样设计的，只有在支持这些新功能的浏览器中才会增强体验。如果用户的设备支持这些新功能，那么他将获得所有额外的好处和更多的改进功能。无论怎样，这对你和你的用户来说都是双赢。1.2 PWA基础
那么PWA到底是由什么组成的呢？我们一直在讨论它们的功能和原理，但真正使某个网站成为PWA的到底是什么呢？最简单的PWA其实只是普通的网站。普通网站是由Web开发者所熟悉和喜欢的技术所创建的，即HTML、CSS和JavaScript。然而，PWA却更进一步，它为用户提供了增强的体验。我非常喜欢谷歌Chrome 团队的开发人员Alex Russell的描述方式：这些应用不通过应用商店进行打包和部署，它们只是汲取了所需要的原生应用功能的网站而已。
PWA会指向一个清单（manifest）文件，其中包含网站相关的信息，包括图标、背景屏幕、颜色和默认方向。（在第5章中，你将学习到如何使用清单文件来使网站更加吸引人。）
PWA使用了叫作Service Worker的重要新功能，它可以令你深入网络请求并构建更好的Web体验。随着本章的深入，我们将进一步了解它们以及它们带给浏览器的改进。PWA还允许你将其“添加”到设备的主屏幕上。它会像原生应用那样，通过单击图标便可让你轻松访问一个Web应用（更多内容请参考第5章）。
PWA还可以离线工作。使用Service Worker，可以选择性地缓存部分网站资源以提供离线体验。如果你现在在没有网络连接的情况下浏览网站，那么对于绝大多数网站，你所看到的屏幕应该类似于图1.1。
用户无须再面对恐怖的“无网络连接”屏幕了。使用Service Worker，可以拦截并缓存任何来自网站的网络请求。无论是为移动设备、桌面设备还是平板设备构建网站，都可以在有网络连接或没有网络连接的情况下控制如何响应请求。（我们将在第3章中深入了解缓存，并在第8章中构建一个离线网页。）
PWA不仅仅是一组非常棒的新功能，它实际上是构建更好的网站的一种方式。PWA正在迅速成为一套最佳实践。构建PWA所采取的步骤将有利于访问你网站的任何人，无论他们选择使用何种设备。
一旦你掌握了开始构建PWA所需的基本构建模块，很快就会发现，比较高级的例子并没有看上去那么高级。一旦你熟悉了构建PWA的过程，会发现一切都是如此的简单。
构建PWA的业务场景
作为一名开发者，我当然知道当一项新技术或一系列功能出现时，是多么令人兴奋。但为网站发掘并引进最新最好的库或框架的强烈欲望往往会掩盖其为企业带来的价值。无论你是否相信，PWA能为你的用户带来真正的价值，并使网站更具吸引力、更有弹性，甚至更快。图1.1 如果你迫切需要获取这些信息，离线页面可能会非常令人沮丧
PWA最棒的一点是可以渐进增强现有的Web 应用。本书所讨论的整套技术可以应用于任何现有的网站，甚至是你正在构建的新的Web应用。无论你选择何种技术栈来开发网站，PWA都将与你的解决方案紧密结合在一起，因为它只是简单地基于HTML、CSS和JavaScript。
既然你对PWA已经有了基本的了解，就先暂时停下脚步，想象一下用PWA来构建的各种可能性。假设你的在线业务是报纸，人们通过它来了解更多当地的新闻。如果你知道有人经常访问你的网站并浏览多个页面，为什么不提前缓存这些页面，这样他们就可以完全离线地浏览新闻？或者假设你的Web 应用服务于一个慈善机构，志愿者在这个网络连接不稳定或压根无网络连接的区域进行工作。PWA的功能将允许你构建一个离线应用，使他们在没有网络连接的现场也能收集信息。一旦他们回到办公室或有网络连接的区域，数据就可以同步到服务器。对于Web开发者来说，PWA是颠覆者，并且我个人对它将带给Web的功能感到兴奋不已。
前文提到过可以将PWA添加到设备的主屏幕上。一旦添加后，它的图标便会出现在主屏幕上并可以通过单击图标来访问你的网站。
2015年，印度最大的电商网站Flipkart 开始构建Flipkart Lite，它是Web 和Flipkart原生应用完美结合的PWA。如果你在浏览器中打开flipkart.com，你会明白为什么这个网站是如此成功。它的用户体验令人印象深刻，网站的速度很快，可以离线工作，并且用起来使人愉悦。通过将它的网站构建成PWA，Flipkart 能够显示ADD TO HOME SCREEN操作栏（参见图1.2）。通过ADD TO HOME SCREEN图标到[3]达的用户最终在网站上购买的可能性高达70%。图1.2 ADD TO HOME SCREEN 功能是重新与用户接触的好方法
任何进入苹果或谷歌应用商店的新原生应用就像沙滩上的一粒沙。截至2016年6月，每个应用商店中始终保持将近200万个应用。如果你开发了一个原生应用，那么它很容易就被应用商店中的海量应用所掩盖。然而，由于PWA是汲取了丰富功能的网站，因此可以通过搜索引擎轻松发现它们。人们可以通过社交媒体链接或浏览网页发现PWA。构建PWA可以让你接触比单独使用原生应用更多的人，因为它们是为任何能够运行浏览器的平台而构建的。
我在一家小型创业公司工作，我知道编写一个可以在多个平台（iOS、Android和网站）上运行的应用是多么昂贵。有了PWA，你只需要一个了解Web语言的开发团队即可。它使得招聘更容易，而且肯定便宜得多。这并不是说你不应该构建原生应用，因为不同的用户会有不同的需求，但只要你想，你就可以专注于为网络上的用户营造一个相当好的体验并使他们留下来。
当使用为Web构建的应用时，用户可以轻松访问你网站服务的一部分，而无须先下载庞大的安装文件。使用正确的缓存技术的PWA可以保存用户数据并立即为用户提供功能。随着世界各地越来越多的用户开始上网，不断为10亿规模的新用户构建网站变得格外重要。PWA通过构建快速、精简的Web应用来帮助你实现此目标。
如果你在当今的网络上阅读过一些关于软件开发的文章，一定见过围绕原生应用与Web应用的争论。哪个更好？各自的优势与劣势是什么？原生应用本身是非常好的，但事实上PWA不仅仅是将原生应用的功能引入Web。它解决了企业面临的真正问题，旨在为用户创造一个名副其实的可发现、快速和有吸引力的体验。1.3 Service Worker：PWA的关键
如上所述，释放PWA功能的关键在于Service Worker。就其核心来说，Service Worker只是在后台运行的worker脚本。它是用JavaScript编写的，只需短短几行代码，便可使开发者能够拦截网络请求、处理推送消息并执行许多其他任务。
最棒的一点是，如果用户的浏览器不支持Service Worker，也只需简单地降级，你的网站仍将作为普通网站使用。正是由于这一点，PWA堪称“完美的渐进增强”。渐进增强是指你可以先创建能在任何地方运行的体验，然后为支持更高级功能的设备增强体验。1.3.1 理解Service Worker
Service Worker 是如何工作的呢？为了尽可能地简单易懂，我喜欢谷歌的Jeff Posnick的描述方式：“将你的网络请求想象成飞机起飞。Service Worker是路由请求的空中交通管制员。它可以通过网络加载，甚至通过缓存加载。”
作为“空中交通管制员”，Service Worker可以让你全权控制网站发起的每一个请求，这为许多不同的使用场景开辟了可能性。空中交通管制员可能将飞机重定向到另一个机场，甚至延迟降落，Service Worker的行为方式也是如此，它可以重定向你的请求，甚至彻底停止。
虽然Service Worker是用JavaScript编写的，但它们与标准JavaScript文件略有不同。Service Worker有以下几个特点：
■ 运行在它自己的全局脚本上下文中
■ 不绑定到具体的网页
■ 无法修改网页中的元素，因为它无法访问DOM
■ 只能使用HTTPS
你无须成为JavaSript 专家后才可以开始尝试Service Worker。它们是事件驱动的，你可以选择想要进入的事件。当你对这些不同的事件有了基本的了解后，开始使用Service Worker要比你想象中简单。
图1.3说明了Service Worker是如何工作的。图1.3 Service Worker能够拦截进出的HTTP请求，从而完全控制你的网站
Service Worker 运行在worker上下文中，这意味着它无法访问DOM，它与应用的主要JavaScript 运行在不同的线程中，所以它不会被阻塞。它们是完全异步的，因此你无法使用诸如同步XHR和localStorage之类的功能。在图1.3中，你可以看到Service Worker 处于不同的线程中，并且可以拦截网络请求。记住，Service Worker 就像是空中交通管制员，它可以让你全权控制网站中所有进出的网络请求。这种能力使它们极其强大，并允许你决定如何响应请求。1.3.2 Service Worker生命周期
在深入代码示例之前，先来看看Service Worker 在其生命周期中经历的不同阶段。想象一下一个使用了Service Worker的基础网站。该网站是一个流行的博客平台，数以百万计的作家每天都使用它来分享内容。
简单点说，该网站不停地在接收包括图像和视频的内容请求。要了解Service Worker生命周期是如何工作的，让我们从每天数百万次在网站间往返的交互中挑选出一个。
图1.4展示了 Service Worker 生命周期，它会在用户访问该网站的博客页面时发生。图1.4 Service Worker生命周期
将图1.4分解来看，从而一步步地了解Service Worker生命周期是如何工作的。当用户首次导航至URL时，服务器会返回响应的网页。在图1.4中，你可以看到在第1步中，当调用register（）函数时，Service Worker开始下载。在注册过程中，浏览器会下载、解析并执行Service Worker （第2步）。如果在此步骤中出现任何错误，register（）返回的Promise都会执行reject操作，并且Service Worker会被废弃（马上会解释JavaScript中的promise）。
一旦Service Worker成功执行了，安装事件就会激活（第3步）。Service Worker很棒的一点就是它是基于事件的，这意味着你可以进入这些事件中的任意一个。第3章会使用这些不同的事件来实现超快速缓存技术。
一旦完成安装，Service Worker便会激活（第4步）并控制在其范围内的一切。如果生命周期中的所有事件都成功了，Service Worker便已准备就绪，随时可以使用。
一种记住Service Worker 生命周期的方法就是把它当成一组交通信号灯。在注册过程中，Service Worker处于红灯状态，因为它还需要下载和解析。接下来，它处于黄灯状态，因为它正在执行，还没有完全准备好。如果上述所有步骤都成功了，Service Worker将处于绿灯状态，随时可以使用。
当第一次加载页面时，Service Worker还没有激活，所以它不会处理任何请求。只有当它安装和激活后，才能控制在其范围内的一切。这意味着，只有刷新页面或者导航到另一个页面，Service Worker内的逻辑才会启动。1.3.3 Service Worker基础示例
到目前为止，你一定迫切地想看看代码应该是怎么样的，所以下面给出示例代码。
因为Service Worker是运行在后台线程中的JavaScript文件，所以在HTML页面中可以像引用任何JavaScript文件一样来引用它。假设创建了一个Service Worker文件，并将其命名为sw.js。要注册它，需要在HTML页面中使用代码清单1.1中的代码。
代码清单1.1 基础HTML网页
在script标签内，首先检查浏览器是否支持Service Worker。如果支持，就使用navigator.serviceWorker.register（′/sw.js′）函数注册，该函数又会通知浏览器下载Service Worker文件。如果注册成功，它会开始Service Worker生命周期的剩余阶段。
在代码清单1.1中，你或许会注意到JavaScript代码并没有使用回调函数。那是因为Service Worker使用JavaScript中的Promise，Promise以一种十分整洁、可读的方式来处理回调函数。Promise表示一个操作还未完成，但是期待它将来会完成。这使得异步方法返回的值如同同步方法那样，并使编写的JavaScript 更整洁，也更容易阅读。Promise 可以做很多事情，但就目前而言，你所需要知道的就是，如果某些函数返回Promise，你可以在后面附加.then（），then 里面包含成功的回调、失败的回调等。接下来的章节将更详细地介绍JavaScript中的Promise。
navigator.serviceWorker.register（）函数返回Promise，如果注册成功，我们可以决定如何继续进行。
之前提到过Service Worker 是事件驱动的，而且Service Worker 最强大的功能之一就是允许你通过进入不同的事件来监听任何网络请求。fetch便是其中一个关键事件。当一个资源发起fetch事件时，你可以决定如何继续进行。可以将发出的HTTP请求或接收的HTTP响应更改成任何内容。这相当简单，但同时非常强大。
假设下面的代码出现在Service Worker文件中。
代码清单1.2
在代码清单1.2中监听了fetch事件，如果HTTP请求的是JPEG文件，就拦截请求并强制返回一张独角兽图片，而不是原始URL请求的图片。代码会为该网站上的每幅JPEG 图片请求执行同样的操作。虽然独角兽的图片非常酷，但是你可能不想在真实的网站上这样做；你的用户可能不满意这样的结果。上面的示例可以让你了解Service Worker 的能力。只是短短几行代码，就在浏览器中创建了一个强大的代理。1.3.4 安全考虑
为了让Service Worker能在网站上运行，需要通过HTTPS来提供服务。虽然这让使用它们变得有些困难，但这样做有一个很重要的原因。还记得将Service Worker比喻成空中交通管制员吗？能力越大，责任越大，对于Service Worker 而言，它实际上也可能用于恶意的用途。如果有人能够在你的网页上注册一个狡诈的Service Worker，他们将能够劫持连接并将其重定向到恶意端点。事实上，破坏者可能会利用你的HTTP请求做任何他们想要做的事情。为了避免这种情况发生，你只能在通过HTTPS提供服务的网页上注册Service Worker。这确保了网页在通过网络的过程中没有被篡改。
如果你是一个想要构建PWA的Web开发者，读到这里可能会有点沮丧。千万别！传统上，为你的网站获取SSL证书可能会花费相当多的钱，但不管你是否相信，现在有许多免费的解决方案可以供Web开发者使用。
首先，如果你想要在自己的计算机上测试Service Worker，你可以通过localhost提供的页面来执行此操作。它已经创建了这个功能，以使开发者在部署应用之前轻松进行本地调试。
如果你准备好将你的PWA 发布到网上，那么你可以使用一些免费的服务。Let’s Encrypt（https：//letsencrypt.org）是一个新的证书授权，它是免费、自动和开放的。可以使用Let’s Encrypt 来让你的网站快速通过HTTPS 提供服务。如果你想了解关于Let’s Encrypt的更多信息，请访问它的新手入门页面https：//letsencrypt.org/getting-started/。
如果你像我一样，使用GitHub进行源代码控制，那么你可以使用GitHub Pages来测试Service Worker，如图1.5所示。通过GitHub Pages，可以直接在GitHub 仓库中托管基础网站，而无需后端。图1.5 GitHub Pages允许你通过SSL直接在GitHub仓库中托管网站
使用GitHub Pages 的优点是，默认情况下，网页是通过HTTPS 来提供的。当我第一次开始试用Service Worker 时，GitHub Pages 允许我快速地启动一个网站，并随时验证我的想法。1.4 性能洞察：Flipkart
本章前面介绍过一个名为Flipkart的电子商务公司的案例，Flipkart决定将它的网站构建成PWA。Flipkart是印度最大的电子商务公司，一个快速、有吸引力的网站对于他们业务的成功至关重要。在像印度这样的新兴市场，移动数据包的成本可能相当高，并且移动网络可能是不稳定的。出于这些原因，许多新兴市场中的电子商务公司都需要构建轻便、精简的网页，以满足任何网络上的用户需求。
2015年，Flipkart采用了仅使用原生应用的策略，并决定暂时关闭它的移动网站。后来公司发现，在原生应用中提供快速和有吸引力的用户体验变得愈发困难。所以Flipkart 决定重新思考他们的开发方式。通过引入可立即运行的移动Web 应用、离线工作和重新吸引用户的功能，使其开发人员重新回到移动Web开发工作之中，这些引入的功能都是PWA所提供的。
当他们实现了自己的新的PWA后，便看到了立竿见影的效果。不仅网站几乎是瞬时加载的，而且当用户离线时还能够继续浏览分类页面、查看以前的搜索结果和产品页面。数据使用量是Flipkart 的关键指标，这也是现在最令人满意的地方，Flipkart Lite使用的数据量只有原生应用的三分之一。
构建PWA给予了他们更多的好处，因为网站速度很快并且很吸引人，用户在网站上的停留时间增加了3倍，并有高达40%的参与度[4]。这些都是令人印象非常深刻的改进。要亲自见证效果，请访问flipkart.com。1.5 总结
在用户体验方面，相比于传统Web网站，原生应用可以提供更好的体验。
Web正在发展，我们没有任何理由不为用户提供快速、有弹性和吸引人的Web应用。PWA能够为用户提供这一切。
Service Worker是释放浏览器功能的关键。可以把它当作能够拦截HTTP请求的空中交通管制员。
Web的功能一直都很强大，但是我们没有理由不改进它，并向用户提供更多的功能。每一天，我们都要为用户多创造一些惊喜。[1] https://en.wikipedia.org/wiki/History_of_the_World_Wide_Web[2] www.statista.com/statistics/276623/number-of-apps-available-in-leading-app-stores/[3] www.recode.net/2016/6/8/11883518/app-boom-over-snapchat-uber[4] https://developers.google.com/web/showcase/2016/pdfs/flipkart.pdf
试读结束[说明：试读内容隐藏了图片]