我们在 Service Worker 简介 中介绍了 Service Worker 的背景和兼容性等内容，然后在 Service Worker 生命周期 中介绍了 Service Worker 的生命周期以及所有的事件和 API, 但是我们还是不清楚如何才能使用 Service Worker， 以及在什么场景下使用什么 API 等等，这将是这篇文档所要提到的内容。

前提条件

Service Worker 出于安全性和其实现原理，在使用的时候有一定的前提条件。

• 由于 Service Worker 要求 HTTPS 的环境，我们通常可以借助于 github page 进行学习调试。当然一般浏览器允许调试 Service Worker 的时候 host 为 localhost 或者 127.0.0.1 也是 ok 的。

• Service Worker 的缓存机制是依赖 Cache API 实现的

• 依赖 HTML5 fetch API

• 依赖 Promise 实现

注册

要安装 Service Worker， 我们需要通过在 js 主线程（常规的页面里的 js ）注册 Service Worker 来启动安装，这个过程将会通知浏览器我们的 Service Worker 线程的 javaScript 文件在什么地方呆着。

先来感受一段代码：

123456789101112131415if ('serviceWorker' in navigator) {    window.addEventListener('load', function () {
        navigator.serviceWorker.register('/sw.js', {scope: '/'})
            .then(function (registration) {                // 注册成功
                console.log('ServiceWorker registration successful with scope: ', registration.scope);
            })
            .catch(function (err) {                // 注册失败:(
                console.log('ServiceWorker registration failed: ', err);
            });
    });
}

• 这段代码首先是要判断 Service Worker API 的可用情况，支持的话咱们才继续谈实现，否则免谈了。

• 如果支持的话，在页面 onload 的时候注册位于 /sw.js 的 Service Worker。

• 每次页面加载成功后，就会调用 register() 方法，浏览器将会判断 Service Worker 线程是否已注册并做出相应的处理。

• register 方法的 scope 参数是可选的，用于指定你想让 Service Worker 控制的内容的子目录。本 demo 中服务工作线程文件位于根网域， 这意味着服务工作线程的作用域将是整个来源。

  关于 register 方法的 scope 参数，需要说明一下：Service Worker 线程将接收 scope 指定网域目录上所有事项的 fetch 事件，如果我们的 Service Worker 的 javaScript 文件在 /a/b/sw.js， 不传 scope 值的情况下, scope 的值就是 /a/b。

  scope 的值的意义在于，如果 scope 的值为 /a/b， 那么 Service Worker 线程只能捕获到 path 为 /a/b 开头的( /a/b/page1, /a/b/page2，...)页面的 fetch 事件。通过 scope 的意义我们也能看出 Service Worker 不是服务单个页面的，所以在 Service Worker 的 js 逻辑中全局变量需要慎用。

• then() 函数链式调用我们的 promise，当 promise resolve 的时候，里面的代码就会执行。

• 最后面我们链了一个 catch() 函数，当 promise rejected 才会执行。

代码执行完成之后，我们这就注册了一个 Service Worker，它工作在 worker context，所以没有访问 DOM 的权限。在正常的页面之外运行 Service Worker 的代码来控制它们的加载。

查看是否注册成功

如果你很困惑，我的 Service Worker 到底注册成功没有呢？注册成功是什么样子呢？

可以在 PC 上打开我们的好伙伴 chrome 浏览器, 输入 chrome://inspect/#service-workers

我们还可以通过 chrome://serviceworker-internals 来查看服务工作线程详情。 如果只是想了解服务工作线程的生命周期，这仍很有用，但是日后其很有可能被 chrome://inspect/#service-workers 完全取代。

当然，它还可用于测试隐身窗口中的 Service Worker 线程，您可以关闭 Service Worker 线程并重新打开，因为之前的 Service Worker 线程不会影响新窗口。从隐身窗口创建的任何注册和缓存在该窗口关闭后均将被清除。

注册失败的原因

为啥会导致 Service Worker 注册失败呢？原因基本就是以下几种情况：

• 不是 HTTPS 环境，不是 localhost 或 127.0.0.1。

• Service Worker 文件的地址没有写对，需要相对于 origin。

• Service Worker 文件在不同的 origin 下而不是你的 App 的，这是不被允许的。