我正在使react应用程序离线工作,为此我缓存的文件在sw.js文件,这是在公共文件夹下。文件缓存在本地,但当我部署应用程序,它没有缓存文件,并给出错误-未捕获(承诺)TypeError:无法对“缓存”执行“addAll”:请求失败。下面是我的sw.js文件-'let CACHE_NAME =“codePwa”;
var urlCache = \[
"/manifest.json",
"/logo192.png",
"/",
"/index.html",
"/static/js/main.4d5113ea.js",
"/static/css/main.073c9b0a.css",
"./App.js",
\];
/// install service worker
this.addEventListener("install", (event) =\> {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) =\> {
return cache.addAll(urlCache);
})
);
});
// fetch cache data
this.addEventListener("fetch", (event) =\> {
if (!navigator.onLine) {
console.log("offline");
if (event.request.url === "http://localhost:3000/static/js/main.chunk.js") {
event.waitUntil(
this.registration.showNotification("modeNet", {
body: "Offline",
icon: "http://localhost:3000/logo192.png",
})
);
}
event.respondWith(
caches.match(event.request).then((response) =\> {
if (response) {
return response;
}
let fUrl = event.request.clone();
fetch(fUrl);
})
);
}
});
this.addEventListener("activate", function (event) {
event.waitUntil(
caches.keys().then(function (cacheNames) {
return Promise.all(
cacheNames
.filter(function (cacheNames) {
//
})
.map(function (cacheNames) {
return caches.delete(cacheNames);
})
);
})
);
});`
我应该进行哪些更改,以便在部署应用后缓存文件,并在应用离线时和刷新应用后该高速缓存中提取文件。我正在Netlify上部署我的应用(url -https://calm-salmiakki-411347.netlify.app/)
1条答案
按热度按时间irlmq6kh1#
当一个或多个URL不存在并且找不到要缓存的URL时,会导致此错误
我检查了url,似乎
./App.js
不存在。如果它是react项目的App.js
,则不需要缓存它(因为它在生产中不存在)。因此,请从urlCache数组中删除它如果您使用缓存优先策略,则需要使用www.example.com然后使用cache.match来处理它cache.open and then cache.match
因此更改此部分:
改为:
为了更有条理我重写了你的代码