Service Worker到底是个什么鬼？

来源： SDK.cn 类型：技术文章发布：2016-12-12 14:40:18

me : "Service Worker, 你是个什么鬼？”
Service Worker: "我是一个可编程的网络代理。”
me : "... 什么玩意儿？”

2015年7月，我正在参加一个JavaScript大会。台上演讲的人是Jake Archibald，也就是那个对Service Worker设计贡献颇多的人。

就在那一天，他在台上向观众介绍了一个叫做Service Worker的东西，我的理解是，这个东西能把网站变成本地应用。

这个概念听上去不错，我也想在自己的web项目中使用Service Worker。但是问题是，这个东西有点儿难以理解……它不是库、不是一种新的HTML元素，也不是一个新的JavaScript语法。每当我读到类似《Service Worker介绍》这样的文章的时候，文中出现的“代理”、“缓存”这些词汇总会让我感到应接不暇。为了理解Service Worker的作用，我用了一种非常规的方式：涂鸦。这种理解方式效果还真不错，我终于理解了Service Worker这个东西：它就是一个外星人，你可以让它住在用户的浏览器上。还是听不懂？那就请听我慢慢道来。

Service Worker是Web浏览器宇宙中的外星人

我们将Web浏览器想象成一个星球（例如地区），而这个星球是计算机银河中的一部分。在这个星期上，人们使用各种各样的语言，例如HTML、CSS和JavaScript等，这些语言帮助人们的创建了一个巨大的社会，社会中的成员就是海量的网页。

这个星球发展出了一种和地外空间进行联系的方式，这种方式就是超文本传输协议（HTTP）。这个工具能让我们获取来自其他星系（服务器）的资源。正是这种方式，让浏览器变成了我们获取信息的窗口。也是因为这种方式，才会有数十亿的人每天都在使用互联网，无法自拔。

HTTP听上去就像是种魔法。但是在现实中，要想使用HTTP与其他星系沟通，你需要借助一个管道（互联网）。管道的直径和长度，取决于你给管道工（ISP）叫了多少钱，或者你所在的地区使用了哪种基础设施。当管道又细又长的时候，你从其他星系获取信息的时间就会更长，反之则更短。

问题是，这个管道有时候也会出现堵塞（网络断开），在这种情况下，我们就会突然回到史前时代，除了恐龙什么也看不到。

没关系！Service Worker来帮忙！

Service Worker就像是某种站在星球浏览器和互联网管道之间的东西。以前你是把请求直接通过管道发送到其他星系，而现在，你可以将请求发给Service Worker，让它去帮你跑腿，为你取回信息。在我看来，Service Worker就像是驾驶着UFO的外星人。

关于Service Worker你需要知道的3件事

1 Service Worker需要你对它进行召唤。如果不召唤，Service Worker就不会出现。当你让Service Worker为你提供帮助的时候，它们会立刻出现，直到它们觉得自己已经完成了你所交代的所有事情。它们不会干.terminate()这样的事情。

2 Service Worker住在页面之外的地方。在关闭了浏览器窗口之后，它们就会去睡觉。但是，在某些时候，即使在浏览器窗口关闭的时候，你也能把它们唤醒，或是让它们走开。但是总体来说，你（开发者）无法控制Service Worker的生命周期，也是出于这个原因，我才会觉得它们有点像外星人。

3 如上所述，Service Worker住在页面之外，也就是说它无法触碰到浏览器星球之内的元素。你无法在Service Worker代码内访问window或是document，也无法在这里修改DOM元素。

Service Worker能帮你完成哪些任务？

1. 与缓存进行交互

你可以让Service Worker扮演中间人的角色，让它来监控fetch事件。你还可以让Service Worker将特定的资源保存在缓存中。在用户请求缓存中的东西的时候，Service Worker能够立刻从缓存中获取数据，而不通过外部HTTP调用。只要缓存中有用户需要的数据，即使没有网络连接，浏览器也能显示内容。