我的服务工作者中具有此提取功能,当pwa脱机时,我尝试用不同的图像进行响应。 catch内的fetch函数将引发:未捕获(按承诺)TypeError:无法获取。
self.addEventListener('fetch', (e) => {
if (e.request.method === 'GET') {
e.respondWith(
caches.match(e.request).then((cachedResponse) => {
return cachedResponse || fetch(e.request.url)
.then((res) => {
return res;
}).catch(() => {
//if it is a image then
let url1 = e.request.url.replace(".jpg", "_mini.jpg");
return fetch(url1);
/* Or like this
caches.match(url1).then((cResp) => {
return cResp;
})
*/
})
})
)
}
});
当您离线时是否无法捕获错误并使用“迷你”替代图片进行响应,或者我该怎么办?
如果存在cachedResponse
,您将返回它,这将导致无法获取替换逻辑。尝试删除cachedResponse ||
。
也可以删除:
.then((res) => {
return res;
})
[另外,如果您处于脱机状态,则return fetch(url1);
将不起作用,因为来自Service Worker的fetch
不会递归触发另一个FetchEvent
。因此,您必须改为return caches.match(url1)
,这意味着它已被缓存过。