liuqipeng

Service Worker, 你到底是个什么东西?

liuqipeng · 2016-12-07翻译 · 1426阅读 原文链接 十年踪迹审校

我 : “Service Worker,你到底是个什东西”

Service Worker : “我是一个可编程的网络代理”

我 : “你说什么?”

Service Worker 听起来非常酷炫,但是我一直弄不懂它是个什么东西。

2015年7月,我坐在 Austin Texas 的一个剧院里参加 JavaScript 会议。那时候我还把站在台上的 Jake Archibald 当成一个在讨论浴室与 🚽 紧密联系的有趣的英国小伙子,直到后来我才发现他是设计 Service Worker 规范的大人物™。

在舞台上,他在说着关于公共浴室用户体验的奇闻轶事间隙里,介绍了这个新事物叫做 Service Worker,它可以使得你的网站像 native app 一样使用(至少我是这么理解的)。

这听起来非常有趣,另我想要在 web 项目里使用它。一开始这个概念是很难去理解的...它不是一个库,也不是一个新的 HTML 元素,更不是一个新的 JavaScript 语法。当我在读一些“介绍 Service Worker ”类的文章时,我总是会对像 “proxy” 和 “cache” 这些单词感到困惑。通过纸上涂画,我试图去理解 Service Worker 是干什么的,并最终弄懂了它。我认为它就像一个你可以邀请住到用户浏览器里的外星人。听起来很奇怪?好吧,让我来解释给你听。

Service Worker 是一个在 web 浏览器宇宙里的外星人

浏览器星球

想象你的 web 浏览器是一个星球(就像地球),是计算机星系里的一部分。在这个星球上,人们说着如 HTML、CSS 和 JavaScript 来创建 web 页面的社会。如果你是 web 开发者,你应该对这个社会非常了解,从不同种类的元素(DOM)到回收机制(垃圾回收),你对它们都有着非常深的认识。

服务器星系

这个星球开发出一种可以与外界联系,叫做超文本传输协议(HTTP)的方法。这是一种向其他星系(服务器)请求数据的方法。这就是浏览器星球如何变成了喵星人动态图和推特聚集地的,也是使得浏览器星球这么的有趣以及数百万用户使用它的原因。

因特网管道

HTTP 听起来像是非常酷炫的魔术,但事实上,你需要在一个叫做因特网的管道里使用 HTTP 联系外部星系。管道的大小和长度取决于你支付给了因特网架构者(ISP)多少钱以及你所在区域的基础设施。对比非常短和宽的管道,非常窄或者长的管道会花费更多时间从其他星系获取资源。

离线

事情是这样的,对于我们的星球浏览器,这个因特网基础设施并不总是有效的。当浏览器无法连接上管道,它会把自己扔回到一个没有任何现代事物存在的时代,并且让恐龙来使我们回忆起过去美好的日子。

但是等一等!Service Worker 就是来帮助我们的!

Service Worker 是坐落于浏览器星球和因特网管道间的一个东西。与直接发送请求到其他星系不同,你可以发送请求到 Service Worker,并且让它们为你工作。它就像一个在 UFO 里的外星人(至少对于我来说是这样的)。

召唤 Service Worker

这里有你必需知道的,关于新朋友 Service Worker 的三件事

  1. Service Worker 是由你调用的。如果你不调用它,那就不会有 Service Worker 出现。但是一旦使用了 Service Worker 来帮助你,它们就必须做完了所有事情才会结束。它没有像 Web Worker 那样的 .terminate() 方法。

  2. Service Worker 驻扎在网页外。当你关闭了浏览器窗口,一般来说所有东西都会失效。你无法继续下载有趣的视频或者阅读书中的下一个章节。浏览器将会 💯 休息。然而即使你已经把浏览器窗口关闭,通过一些浏览器的奇妙事情,在需要 Service Worker 的时候,它可以一直在唤醒状态,并且可以在不需要的时候结束!你(作为一个对浏览器星球感兴趣的 Web 开发者)无需控制 Service Worker 的生命周期(这就为什么我认为它有点像外星人)。

  3. 正如前面所述,Service Worker 驻扎在页面外,也就意味着它无法碰触到浏览器星球里的元素。你无法在 Service Worker 代码里使用 window 或者 document,也无法修改 DOM 元素。

那么你可以要求 Service Worker 干什么呢?

1. 与缓存交互

你可以让 Service Worker 成为监听 fetch 事件的中间人。你也可以让 Service Worker 保存某些资源在缓存里。当缓存项被请求,Service Worker 无需发出额外的请求就可以返回缓存数据。只要资源被缓存,浏览器无需网络连接就可以展示内容。

cache

2. 发送推送通知

在“当浏览器窗口被关闭,Service Worker 仍然是活着的”的奇迹下,你可以实现诸如推送通知的事情。

push notification

3. 后台同步运行

在浏览器没有打开的情况下激活,也意味着 Service Worker 可以在用户不知情下在后台工作。也就是说当你在浏览器离线时发送一些文件,Service Worker 会在网络连接有效时再把它们上传到外部服务器。

后台同步

如果你仍然对 Service Worker 感到困惑,我希望这篇文章是引领你入门的一点光。想要深入代码?我建议你看一下 Jake Archibald 的 offline-cookbook ,那里面有更多代码示例。

Copyright © 2016 by Mariko Kosaka. All rights reserved.

相关文章