javascript执行时单线程的，Service Worker可以启动另一条线程，运行于浏览器后台，不受页面刷新的影响，可以监听和截拦作用域范围内所有页面的 HTTP 请求，拦截页面的请求，先看下缓存里有没有，如果有直接返回，否则正常加载。

一：定义

1：用于作为浏览器和后台服务器中间的代理服务器，用来提供更好的离线体验

2：可以拦截浏览器的网络请求，并修改访问和资源请求，细粒度地缓存资源，运行我们预设的处理逻辑，比如当前请求资源本地有缓存，则直接返回缓存内容，从而可以实现有效的离线体验

3：是一个注册在指定源和路径下的事件驱动 worker。

4：不能访问 DOM

5：由于它运行在 worker 中，所以不会造成阻塞。

6：出于安全考量，Service Worker 只能由 HTTPS 承载，因为修改网络请求的能力如果被中间人利用，将会非常危险

二：使用方式

if ('ServiceWorker' in navigator) {
   window.addEventListener('load', function () {
      /* 创建并指定对应的执行内容 */
            /* scope 参数是可选的，可以用来指定你想让 service worker 控制的内容的子目录。 在这个例子里，我们指定了 '/'，表示 根网域下的所有内容。这也是默认值。 */
            navigator.serviceWorker.register('./serviceWorker.js', {scope: './'})
                .then(function (registration) {
                    console.log('ServiceWorker registration successful with scope: ', registration.scope);
                })
                .catch(function (err) {
                    console.log('ServiceWorker registration failed: ', err);
                });
   })
}


/* 监听安装事件，install 事件一般是被用来设置你的浏览器的离线缓存逻辑 */
this.addEventListener('install', function (event) {
 	
    /* 通过这个方法可以防止缓存未完成，就关闭serviceWorker */
    event.waitUntil(
        /* 创建一个名叫V1的缓存版本 */
        caches.open('v1').then(function (cache) {
            /* 指定要缓存的内容，地址为相对于跟域名的访问路径 */
            return cache.addAll([
                './index.html'
            ]);
        })
    );
});

/* 注册fetch事件，拦截全站的请求 */
this.addEventListener('fetch', function(event) {
  event.respondWith(
    // magic goes here
      /* 在缓存中匹配对应请求资源直接返回 */
    caches.match(event.request)
  );
});

三：应用场景

1：PWA渐进式web应用，PWA就是利用了service worker的这个请求代理功能，将资源缓存在本地，让web页面可以独立于浏览器app，单独有一个桌面入口，并且可以离线使用