一个简单的服务人员

main.js

服务工作者是针对原点和路径注册的事件驱动的工作者。它采用 JavaScript 文件的形式，可以控制与之关联的网页/网站，拦截和修改导航和资源请求，以及以非常精细的方式缓存资源，让你完全控制应用在特定情况下的行为方式（最明显的一个是当网络不可用时。）

资料来源： MDN

一些事情：

1. 它是一个 JavaScript Worker，因此无法直接访问 DOM
2. 它是一个可编程的网络代理
3. 它将在不使用时终止，并在下次需要时重新启动
4. 服务工作者的生命周期与你的网页完全分开
5. 需要 HTTPS

此代码将在 Document 上下文中执行，（或）此 JavaScript 将通过 <script> 标记包含在你的页面中。

// we check if the browser supports ServiceWorkers
if ('serviceWorker' in navigator) {
  navigator
    .serviceWorker
    .register(
      // path to the service worker file
      'sw.js'
    )
    // the registration is async and it returns a promise
    .then(function (reg) {
      console.log('Registration Successful');
    });
}

sw.js

这是服务工作者代码，在 ServiceWorker 全局范围中执行。

self.addEventListener('fetch', function (event) {
  // do nothing here, just log all the network requests
  console.log(event.request.url);
});