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)