如何解决Service Worker 没有缓存
当我测试以下代码并转到 chrome devtools 的缓存存储时,它是空的。它一会儿工作,一会儿更改 cacheName
后它停止了,不确定它是否相关。
if ('serviceWorker' in navigator) {
window.addEventListener('load',() => {
navigator.serviceWorker
.register('sw_cached_pages.js')
.then(reg => console.log('Service Worker: Registered (Pages)'))
.catch(err => console.log(`Service Worker: Error: ${err}`));
});
}
这是软件本身:
const cacheName = '00001';
const cacheAssets = [
'accueil.PHP','js/accueil.js','inc/Headers.PHP','inc/footer.PHP'
];
// Call Install Event
self.addEventListener('install',e => {
console.log('Service Worker: Installed');
e.waitUntil(
caches
.open(cacheName)
.then(cache => {
console.log(cache)
console.log('Service Worker: Caching Files',cache);
cache.addAll(cacheAssets);
})
.then(() => self.skipwaiting())
);
});
// Call Activate Event
self.addEventListener('activate',e => {
console.log('Service Worker: Activated');
// Remove unwanted caches
e.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cache => {
if (cache !== cacheName) {
console.log('Service Worker: Clearing Old Cache');
return caches.delete(cache);
}
})
);
})
);
});
// Call Fetch Event
self.addEventListener('fetch',e => {
console.log('Service Worker: Fetching');
e.respondWith(fetch(e.request).catch(() => caches.match(e.request)));
});
解决方法
所以问题出在这部分:
// Call Install Event
self.addEventListener('install',e => {
console.log('Service Worker: Installed');
e.waitUntil(
caches
.open(cacheName)
.then(cache => {
console.log(cache)
console.log('Service Worker: Caching Files',cache);
cache.addAll(cacheAssets); // <- here
})
.then(() => self.skipWaiting())
);
});
非常简单:cache.addAll
返回一个 promise,您无需等待。您只需要在 return
语句之前添加一个 cache.addAll
,它将承诺传递给下一个 .then()
(.then(() => self.skipWaiting())
)。
顺便说一句:更好的解决方案是使用等待,因为它会更清楚。它看起来像这样:
e.waitUntil(
async () => {
cache = await caches.open(cacheName);
console.log('Service Worker: Caching Files',cache);
await cache.addAll(cacheAssets);
self.skipWaiting();
}
);
学习 async/await 非常有帮助,而且会让调试变得更容易。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。