离线存储
离线存储
我们不可以在 Service Worker 中使用 Local Storage，并且 Service Worker 不可以使用任何的同步 API，不过可以使用 IndexDB，CacheAPI，或者利用 postMessage() 与界面进行交互。参考 GoogleChromeLabs/airhorn，可以使用如下的代码注册 ServiceWorker，并且使用 Cache API 来进行资源与请求缓存，首先需要注册 ServiceWorker：
if (‘serviceWorker’ in navigator) {
window.addEventListener(‘load’, function() {
navigator.serviceWorker.register(‘/sw.js’).then(
function(registration) {
// Registration was successful
console.log(‘ServiceWorker registration successful with scope: ‘, registration.scope); },
function(err) {
// registration failed :(
console.log(‘ServiceWorker registration failed: ‘, err);
});
});
}
然后在 sw.js 文件中缓存资源：
self.addEventListener("install", (e) => {
let timeStamp = Date.now();
e.waitUntil(
caches.open("airhorner").then((cache) => {
return cache
.addAll([
`/`,
`/index.html?timestamp=${timeStamp}`,
`/styles/main.css?timestamp=${timeStamp}`,
`/scripts/main.min.js?timestamp=${timeStamp}`,
`/scripts/comlink.global.js?timestamp=${timeStamp}`,
`/scripts/messagechanneladapter.global.js?timestamp=${timeStamp}`,
`/sounds/airhorn.mp3?timestamp=${timeStamp}`,
])
.then(() => self.skipWaiting());
})
);
});
self.addEventListener("activate", (event) => {
event.waitUntil(self.clients.claim());
});
self.addEventListener("fetch", (event) => {
event.respondWith(
caches.match(event.request, { ignoreSearch: true }).then((response) => {
// 默认不会保护 Cookie，可以使用 fetch(url, {credentials: 'include'}) 来发送 Cookie
return response || fetch(event.request);
})
);
});