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里面是需要缓存的文件（白名单形式），特别注意，跨域的资源是无法缓存的。
