利用 service-worker 缓存资源例如像CSS，JavaScript、图片、主页和网络请求等操作。

register(注册)

检测浏览器是否支持 service worker 功能，支持则开启，并通过指定 js 文件注册 service worker 功能。

// 入口文件里写上这些
if (navigator.serviceWorker) {
     
    window.addeventlistener('onload', function(){
     
        navigator.serviceWorker.register('/service-worker.js', {
     
            scope: '/'
        });
    })
}

install(安装)

添加需要缓存的文件，若一个不存在，则全部不成功

const CACHE_NAME = 'cache_version_2018_07_02';
const cache_list = [
        '/',
        '/path/to/js.js',
        '/path/to/style.css',
        '/path/to/home.png',
        '/offline'
];
self.addEventListener('install', function (event) {
     
    event.waitUntil(
        return caches.open(CACHE_NAME)
            .then(function (cache) {
     
                return cache.addAll(cache_list);
            });
    );
});

activate(激活)

当激活事件被触发的时候，service-worker.js 文件更新时，一个很好的机会去清除过时的缓存

self.addEventListener('activate', function (event) {
     
  event.waitUntil(
    caches.keys()
      .then(function (keys)