一度登録してから、同階層に置いたhoge.htmlにアクセスしてみると、
その後hoge.htmlの中身を書き換えても前の値を表示してくれるっぽい。
/*test.html(ServiceWorkerをキックする登録元)*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery-1.10.2.js"></script>
<title>test</title>
</head>
<body>
<script src="test.js"></script>
</body>
</html>
/*test.js(ServiceWorkerを登録するスクリプト)*/
$(function() {
if('serviceWorker' in navigator) {
console.log("serviceWorkerに対応");
navigator.serviceWorker.register('./serviceWork.js')
.then(function(registration) {
console.log("serviceWork登録完了",registration);
return navigator.serviceWorker.ready;
})
.catch(function(err) {
console.log("serviceWorker登録失敗",err);
});
} else {
console.log("serviceWorker非対応");
}
});
/*serviceWork.js(登録されるスクリプト)*/
importScripts('./cache-polyfill-master/index.js'); //2015/7現在、まだpolyfillが必要な模様。
self.oninstall = function(event) {
event.waitUntil(caches.open('cache名')
.then(function(cache) {
return cache.addAll(['./hoge.html']); //ここでキャッシュに追加
}));
}
self.onfetch = function(event) {
event.respondWith(caches.open('cache名').then(
function(cache) {
return cache.match(event.request).then(
function(response) {
return response; //cacheに合致するもの。
})
})
)
}
最終更新：2015年07月18日 19:47
