无法在 serviceWorker 的消息事件下向 CacheStorage 添加请求

Question

我试图将url数组传递给serviceWorker，以便后者可以将它们添加到CacheStorage:

main.js:

let arr = ['/image1.jpg', '/image2.jpg'];
navigator.serviceWorker.register('/serviceWorker.js');
navigator.serviceWorker.ready.then(registration => {
registration.active.postMessage(arr);
});

serviceWorker.js:

self.addEventListener('message', function (e) {
console.log(e.data);
caches.open('my_cache_name').then(function(cache) {
return cache.addAll(e.data);
});
});

但是我收到了错误

在'Cache'上执行'addAll'失败:请求失败

此时，我成功地接收到console.log()

中的数组。

Answer 1

我认为问题可能来自寻址文件

你试图添加到缓存存储(使用addAll)是文件名，所以cacheStorage将尝试找到这些文件并存储它们，如果它找不到或面对404，它将返回这个错误

例如，如果你的数组是['styles.css',...], cacheStorage将尝试找到style .css和其他并存储它们

如果你想保存文本或其他不同于缓存中的文件，最好将它们存储在indexDB中，而不是