chaihongjun.me

Service Workers本质上是一种能在浏览器后台运行的独立线程，它能够在网页关闭后持续运行。Service Workers能够拦截网络请求并根据网络是否可用来采取适当的动作，更新来自服务器的资源，从而实现拦截和加工网络请求、消息推送、静默更新、事件同步等一系列功能。它是PWA（Progressive Web Apps，渐进式网络应用）应用的核心技术之一。它能够缓存网站资源，实现离线访问，能拦截网络请求，优化网络性能，因此利用这些优势去优化。

参考网站：

https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API

这篇文章不在详细介绍Service Workers的前世今生，只利用它的缓存特性提升网站性能，这里我们只建立白名单，将需要缓存的内容都放入其中。

创建一个脚本：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/public/static/js/serviceworker.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

以上代码写入需要优化的页面，用于在页面范围内注册Service Workers，注意代码内serviceworker.js这个文件的路径，这个文件用于实际编写缓存规则等配置。

接着编写serviceworker.js:

//serviceworker.js
var CACHE_NAME = 'v1';   //缓存版本号，当配置有修改的时候要修改它，以便新的配置生效
var urlsToCache = [      //缓存白名单
  '/hello/',
  'style.css?v=2017.11.25',
  'demo.js',
  'iconfont.eot?v=3',
  'iconfont.svg?v=3',
  'iconfont.ttf?v=3',
  'iconfont.woff?v=3'
];
 
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});
 
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});
 
self.addEventListener('activate', function(event) {
  var cacheWhitelist = 'v';
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheName.indexOf(cacheWhitelist) != -1 && cacheName != CACHE_NAME) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

urlsToCache里面是需要缓存的文件（白名单形式），特别注意，跨域的资源是无法缓存的。