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

   <p>我 ： “Service Worker，你到底是个什东西”</p>    <p>Service Worker ： “我是一个可编程的网络代理”</p>    <p>我 ： “你说啥？”</p>    <h2>Service Worker 听起来非常酷炫，但是我一直弄不懂它个是什么东西。</h2>    <p>2015年7月，我坐在 Austin Texas 的一个剧院里参加 JavaScript 会议。那时候我还把站在台上的 Jake Archibald 当成一个在讨论浴室与 :toilet: 紧密联系有趣的英国小伙子，直到后来我才发现他是设计 Service Worker 细则的大人物™。</p>    <p>在舞台上，他在说关于公共浴室用户体验的奇闻轶事间隙里，介绍了这个新事物叫做 Service Worker，它可以使得你的网站像 native app 一样使用（至少我是这么理解的）。</p>    <p>这听起来非常有趣，使得我想要在我的 web 项目里使用。一开始这个概念很难去理解...它不是一个图书馆，不是一个新的 HTML 元素，也不是一个新的 JavaScript 语法。当我在读一些“介绍 Service Worker ”类的文章时，我总是会对像 “proxy” 和 “cache” 这些单词感到困惑。当我试图去理解 Service Worker 是干什么的，我在纸上乱涂乱画，并且最终幸运地弄懂了它，它就像一个你可以邀请住到用户浏览器里的外星人。听起来很奇怪？好吧，让我来解释给你听。</p>    <h2>Service Worker 是一个在 web 浏览器宇宙里的外星人</h2>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/a764c8b9133ec4253c1d95fd94b2a9c3.png"></p>    <p>想象你的 web 浏览器是一个星球（就像地球），是计算机星系里的一部分。在这个星球上，人们说着如 HTML、CSS 和 JavaScript 来创建 web 页面的社会。如果你是 web 开发者，你应该对这个社会中不同种类的元素到回收机制（垃圾回收）都有着非常深的认识。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/386de22b55d17cd09f58d2dfbcc1b5aa.png"></p>    <p>这个星球开发出一种可以与外界联系，叫做 <strong>超文本传输协议</strong> 的方法。这是一种从其他星系（服务器）请求数据的方法。这就是浏览器星球如何变成了猫猫动态图和推特聚集地的，也是使得浏览器星球这么的有趣以及数百万用户使用它的原因。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/e0de98d8aabb963e1c560094a2674ae2.png"></p>    <p>HTTP 听起来像是非常酷炫的魔术，但事实上，你需要在一个叫做 <strong>因特网</strong> 的管道里使用 HTTP 联系外部星系。管道的大小和长度取决于你支付给了因特网架构者（ISP）多少钱以及你所在区域的基础设施。对比非常短和宽的管道，非常窄或者长的管道会花费更多时间从其他星系获取资源。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/bd54c2d1429c63e84b13dd0528182a6b.png"></p>    <p>事情是这样的，对于我们的星球浏览器，这个因特网基础设施并不总是有效的。当浏览器无法连接上管道，它会把自己扔回到一个没有任何现代事物存在的时代，并且让恐龙来使我们回忆起过去美好的日子。</p>    <h2>但是等一等！Service Worker 就是来帮助我们的！</h2>    <p>Service Worker 是坐落于浏览器星球和因特网管道间的一个东西。与直接发送请求到其他星系不同，你可以发送请求到 Service Worker，并且让它们为你工作。它就像一个在 UFO 里的外星人（至少对于我来说是这样的）。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/99df3e11def989048e28190fd1219f4e.png"></p>    <h3>这里有你必需知道的，关于新朋友 Service Worker 的三个事情</h3>    <ol>     <li> <p>Service Worker 是由你调用起的。如果你不调用它，那就不会有 Service Worker。但是一旦使用了 Service Worker 来帮助你，它们就必须做完了所有事情才会结束。它没有像 Web Worker 的 .terminate() 方法。</p> </li>     <li> <p>Service Worker 驻扎在网页外。当你关闭了浏览器窗口，一般来说所有东西都会失效。你无法继续下载有趣的视频或者阅读书中的下一个章节。浏览器将会 :100: 休息。然而 <strong>即使你已经把浏览器窗口关闭</strong> ，通过一些浏览器的奇妙事情，在需要 Service Worker 的时候，它可以一直在唤醒状态，并且可以在不需要的时候结束！你（作为一个对浏览器星球感兴趣的 Web 开发者）无需控制 Service Worker 的生命周期（这就为什么我认为它有点像外星人）。</p> </li>     <li> <p>正如前面所述，Service Worker 驻扎在页面外，也就意味着它无法碰触到浏览器星球里的元素。你无法在 Service Worker 代码里使用 window 或者 document ，也无法修改 DOM 元素。</p> </li>    </ol>    <h2>那么你可以要求 Service Worker 干什么呢？</h2>    <h3>1. 与缓存交互</h3>    <p>你可以让 Service Worker 成为监听 fetch 事件的中间人。你也可以让 Service Worker 保存某些资源在缓存里。当缓存项被请求，Service Worker 无需发出额外的请求就可以返回缓存数据。只要资源被缓存，浏览器无需网络连接就可以展示内容。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/966f6a11147cf6ff406f1508e825c709.png"></p>    <h3>2. 发送推送通知</h3>    <p>在“当浏览器窗口被关闭，Service Worker 仍然是活着的”这样奇迹下，你可以实现诸如推送通知的事情。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/c34a5a11a0fc299497e023412d2e8c33.png"></p>    <h3>3. 后台同步运行</h3>    <p>活跃的意思是指浏览器没有打开的情况下，Service Worker 可以在用户不知情下后台工作。也就是说当你在浏览器离线时发送一些文件，Service Worker 会在网络连接有效时再把它们上传到外部服务器。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/bbe53a2b059db74eff44d376a456a943.png"></p>    <p> </p>    <p> </p>    <p>来自：http://www.zcfy.cc/article/service-worker-what-are-you-mariko-kosaka-1927.html</p>    <p> </p>