service workers有一大好处就是在网络断开时依然能请求到资源,因为该资源并非是发送请求到server获得的,而是从缓存中(CacheStorage)拿到的,下面是一个小的demo。
serviceworker.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="./index.css" rel="stylesheet">
</head>
<body>
serviceworker离线应用测试
</body>
<script src="index.js"></script>
</html>
index.css:
body {
background: #fefefe;
}
index.js:
if (navigator.serviceWorker) {
// 注册文件的作用域为当前目录下
navigator.serviceWorker.register('./serviceworker.js', {scope: './'})
.then(function (reg) {
console.log('成功注册ServiceWorker');
})
.catch(function (e) {
console.log('注册ServiceWorker失败');
})
} else {
console.log('当前环境不支持serviceWorker');
}
serviceworker.js:
// serviceworker生命周期后安装、激活
self.addEventListener('install', function(e) {
e.waitUntil(
// 给缓存起个名字
caches.open('chche-name')
.then(function (cache) {
console.log('打开缓存了');
// 将需要servicehttpservice缓存的文件放入数组中
return cache.addAll([
'./index.js',
'./index.css',
'./serviceworker.html'
])
})
)
})
// 所有请求的文件都会经过fetch(捕获),如果缓存中有该请求,下次请求会直接从缓存中拿
// 否则会重新向server发送请求
self.addEventListener('fetch', function (e) {
e.respondWith(
caches.match(e.request).then(function (res) {
if (res) {
console.log(77, res);
return res;
} else {
fetch(url).then(function (res) {
if (res) {
// 将请求的资源仿佛cachestorage中
caches
} else {
// 没有数据
}
})
}
})
)
})
最后结果如下图所示:
当刷新页面的时候,请求的资源可以直接从CacheStorage中拿到:
当网络断开时,这些资源依然可以直接从CacheStorage中拿到: