Service Worker控制缓存实战，前端开发包括那些

);

});

安装时，sw就开始缓存文件了，会检查所有文件的缓存状态，如果都已经缓存了，则安装成功，进入下一阶段。

activated

如果是第一次加载sw，在安装后，会直接进入activated阶段，而如果sw进行更新，情况就会显得复杂一些。流程如下：

首先老的sw为A，新的sw版本为B。B进入install阶段，而A还处于工作状态，所以B进入waiting阶段。只有等到A被terminated后，B才能正常替换A的工作。

这个terminated的时机有如下几种方式：

1、关闭浏览器一段时间；

2、手动清除serviceworker；

3、在sw安装时直接跳过waiting阶段

//service worker安装成功后开始缓存所需的资源

self.addEventListener(‘install’, function(event) {

//跳过等待过程

self.skipWaiting();

});

然后就进入了activated阶段，激活sw工作。

activated阶段可以做很多有意义的事情，比如更新存储在cache中的key和value：

var CACHE_PREFIX = ‘cms-sw-cache’;

var CACHE_VERSION = ‘0.0.20’;

/**

* 找出对应的其他key并进行删除操作

* @returns {*}

*/

function deleteOldCaches() {

return caches.keys().then(function (keys) {

var all = keys.map(function (key) {

if (key.indexOf(CACHE_PREFIX) !== -1 && key.indexOf(CACHE_VERSION) === -1){

console.log(‘[SW]: Delete cache:’ + key);

return caches.delete(key);

}

});

return Promise.all(all);

});

}

//sw激活阶段,说明上一sw已失效

self.addEventListener(‘activate’, function(event) {

event.waitUntil(

// 遍历 caches 里所有缓存的 keys 值

caches.keys().then(deleteOldCaches)

);

});

idle

这个空闲状态一般是不可见的，这种一般说明sw的事情都处理完毕了，然后处于闲置状态了。

浏览器会周期性的轮询，去释放处于idle的sw占用的资源。

fetch

该阶段是sw最为关键的一个阶段，用于拦截代理所有指定的请求，并进行对应的操作。

所有的缓存部分，都是在该阶段，这里举一个简单的例子：

//监听浏览器的所有fetch请求，对已经缓存的资源使用本地缓存回复

self.addEventListener(‘fetch’, function(event) {

event.respondWith(

caches.match(event.request)

.then(function(response) {

//该fetch请求已经缓存

if (response) {

return response;

}

return fetch(event.request);

}

)

);

});

生命周期大概讲清楚了，我们就以一个具体的例子来说明下原生的serviceworker是如何在生产环境中使用的吧。

举个栗子

我们可以以网易新闻的wap页为例,其针对不怎么变化的静态资源开启了sw缓存，具体的sw.js逻辑和解读如下：

‘use strict’;

//需要缓存的资源列表

var precacheConfig = [

[“https://static.ws.126.net/163/wap/f2e/milk_index/bg_img_sm_minfy.png”,

“c4f55f5a9784ed2093009dadf1e954f9”],

[“https://static.ws.126.net/163/wap/f2e/milk_index/change.png”,

“9af1b102ef784b8ff08567ba25f31d95”],

[“https://static.ws.126.net/163/wap/f2e/milk_index/icon-download.png”,

“1c02c724381d77a1a19ca18925e9b30c”],

[“https://static.ws.126.net/163/wap/f2e/milk_index/icon-login-dark.png”,

“b59ba5abe97ff29855dfa4bd3a7a9f35”],

[“https://static.ws.126.net/163/wap/f2e/milk_index/icon-refresh.png”,

“a5b1084e41939885969a13f8dbc88abd”],

[“https://static.ws.126.net/163/wap/f2e/milk_index/icon-video-play.png”,

“065ff496d7d36345196d254aff027240”],

[“https://static.ws.126.net/163/wap/f2e/milk_index/icon.ico”,

“a14e5365cc2b27ec57e1ab7866c6a228”],

[“https://static.ws.126.net/163/wap/f2e/milk_index/iconfont_1.eot”,

“e4d2788fef09eb0630d66cc7e6b1ab79”],

[“https://static.ws.126.net/163/wap/f2e/milk_index/iconfont_1.svg”,

“d9e57c341608fddd7c140570167bdabb”],

[“https://static.ws.126.net/163/wap/f2e/milk_index/iconfont_1.ttf”,

“f422407038a3180bb3ce941a4a52bfa2”],

[“https://static.ws.126.net/163/wap/f2e/milk_index/iconfont_1.woff”,

“ead2bef59378b00425779c4ca558d9bd”],

[“https://static.ws.126.net/163/wap/f2e/milk_index/index.5cdf03e8.js”,

“6262ac947d12a7b0baf32be79e273083”],

[“https://static.ws.126.net/163/wap/f2e/milk_index/index.bc729f8a.css”,

“58e54a2c735f72a24715af7dab757739”],

[“https://static.ws.126.net/163/wap/f2e/milk_index/logo-app-bohe.png”,

“ac5116d8f5fcb3e7c49e962c54ff9766”],

[“https://static.ws.126.net/163/wap/f2e/milk_index/logo-app-mail.png”,

“a12bbfaeee7fbf025d5ee85634fca1eb”],

[“https://static.ws.126.net/163/wap/f2e/milk_index/logo-app-manhua.png”,

“b8905b119cf19a43caa2d8a0120bdd06”],

[“https://static.ws.126.net/163/wap/f2e/milk_index/logo-app-open.png”,

“b7cc76ba7874b2132f407049d3e4e6e6”],

[“https://static.ws.126.net/163/wap/f2e/milk_index/logo-app-read.png”,

“e6e9c8bc72f857960822df13141cbbfd”],

[“https://static.ws.126.net/163/wap/f2e/milk_index/logo-site.png”,

“2b0d728b46518870a7e2fe424e9c0085”],

[“https://static.ws.126.net/163/wap/f2e/milk_index/version_no_pic.png”,

“aef8088