在 service worker 中捕获请求并用不同的图像响应 url

Question

我的 service worker 中有这个获取功能，当 pwa 离线时，我尝试用不同的图像响应。 catch 中的 fetch 函数抛出：Uncaught (in promise) TypeError: Failed to fetch.

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;
            })
           */
          })

      })
    )
  }
});

是否无法在您离线时捕获错误并使用 "mini" 替代图像进行响应，或者我做错了什么？

Answer 1

您将返回 cachedResponse（如果存在），这会阻止您的替换逻辑被访问。尝试删除 cachedResponse ||.

这也可以删除：

.then((res) => {
    return res;
})

此外，如果您处于离线状态，return fetch(url1); 将无法工作，因为来自 Service Worker 的 fetch 不会递归触发另一个 FetchEvent。所以你必须 return caches.match(url1) 相反，这意味着它之前已经被缓存了。

在 service worker 中捕获请求并用不同的图像响应 url

Catch request in service worker and respond with different image url

javascript

fetch

service-worker

progressive-web-apps