Service Worker 101

Service Worker 是什么？

Service Worker 是在浏览器后台运行的用 JavaScript 编写的 worker 脚本。

Service Worker 能做什么？

Service Worker 本质充当了 web 应用和后台服务器之间的代理服务器，你也可以把它作为一个浏览器扩展来理解。它可以拦截网络请求、处理推送通知、处理后台同步以及其他各种任务。
通过下面的图，可以清楚看出 Service Worker 的作用。

Service Worker 不能做什么？

Service Worker 是事件驱动 worker，它的一切都是异步的，所以在 Service Worker 中你不能访问同步的 API，如：XHR、localStorage。
另外在 Service Worker 不能访问 DOM 和 window，和页面之间的通信可以使用 postMessage、Message Channels、Broadcast Channels。
另外，为了保证安全，Service Worker 只能在 HTTPS 中使用。

如何使用 Service Worker

目前，大部分浏览器已经支持 Service Worker，在 can i use 中可以查看。

在网站中要使用 Service Worker，首先需要使用 navigator.serviceWorker.register 注册。比如我们命名 Service Worker 文件名为 sw.js，则在 HTML 中进行注册，代码如下：

if ('serviceWorker' in navigator) { // 检查浏览器是否支持 Service Worker
  navigator.serviceWorker.register('./sw.js').then((reg) => { // 注册 Service Worker 文件 sw.js
    // 注册成功
    console.log('Registration succeeded. Scope is ' + reg.scope);
  }).catch((error) => {
    // 注册失败
    console.log('Registration failed with ' + error);
  });
}

在注册开始时，浏览器会去下载 Service Worker 文件，并解析和执行其中的代码，之后 Service Worker 再经历安装、激活步骤后，就可以控制页面并处理各种事件。下面举个简单的例子，看 Service Worker 如何拦截一个资源请求：

self.addEventListener('fetch', function(event) { // 监听 fetch 事件
  if (/\.jpg$/.test(event.request.url)) { // 如果 http 请求的 url 以 .jpg 结尾
    event.respondWith(fetch('/images/cat.jpg')); // 使用一张 cat.jpg 图片代替响应请求
  }
});

最后

这篇文章介绍了 Service Worker 的一些概念和简单使用，后续会继续介绍 Service Worker 的常用操作和更多强大的功能。