navigator.serviceWorker标准已日趋成熟，提速页面非常有用.
index.html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test service worker - online page</title>
</head>
<body>
<div style="text-align:center; margin-top:40px; font-family:monospace;">
<img width="100" height="40" src="/sw-test/102.jpg" alt="">
<p>您已经连接网络...</p>
</div>
<script>
// 注册 service worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js').then(function(reg) {
// 注册成功
console.log('ServiceWorker registration successful with scope: ', reg.scope)
}).catch(function(err) {
// 注册失败
console.log('ServiceWorker registration failed: ', err)
})
}
</script>
<img width="100" height="40" src="/sw-test/101.jpg" alt="">
<hr>
<img width="100" height="40" src="/sw-test/102.jpg" alt="">
<hr>
<img width="100" height="40" src="/sw-test/202.jpg" alt="">
</body>
</html>
sw.js代码如下：
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
// 相当于Cache.add() 用于获取一个 Request 的 Response，并将 Request / Response 对象体放进指定的 Cache。注：等价于 fetch(request) + Cache.put(request, response)。
return cache.addAll([
'/sw-test/101.jpg'
]);
})
);
});
// 首次加载页面不会捕获fetch，需重新刷新页面才会生效，特别注意
self.addEventListener('fetch', function(event) {
console.log('fetch url:' + event.request.url)
var sign = event.request.url.indexOf('2.jpg') > -1
console.log(sign)
if (sign) {
event.respondWith(caches.match('/sw-test/101.jpg').then(function(response) {
console.log('fetch match 101.jpg')
// caches.match() always resolves
// but in case of success response will have value
return response;
}))
}
else return ''
});
console.log('sw is loaded4.')
手动Cache.put(request, response)代码如下：
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll([
'/sw-test/index.html',
'/sw-test/star-wars-logo.jpg',
'/sw-test/gallery/bountyHunters.jpg',
'/sw-test/gallery/myLittleVader.jpg',
'/sw-test/gallery/snowTroopers.jpg'
]);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(caches.match(event.request).then(function(response) {
// caches.match() always resolves
// but in case of success response will have value
if (response !== undefined) {
return response;
} else {
return fetch(event.request).then(function (response) {
// response may be used only once
// we need to save clone to put one copy in cache
// and serve second one
let responseClone = response.clone();
caches.open('v1').then(function (cache) {
cache.put(event.request, responseClone);
});
return response;
}).catch(function () {
return caches.match('/sw-test/gallery/myLittleVader.jpg');
});
}
}));
});
参考资料：https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#devtools