在服务工作者中捕获请求,并使用不同的图像URL进行响应

问题描述 投票:2回答:1

我的服务工作者中具有此提取功能,当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;
            })
           */
          })

      })
    )
  }
});

当您离线时是否无法捕获错误并使用“迷你”替代图片进行响应,或者我该怎么办?

javascript fetch service-worker progressive-web-apps
1个回答
0
投票

如果存在cachedResponse,您将返回它,这将导致无法获取替换逻辑。尝试删除cachedResponse ||

也可以删除:

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

[另外,如果您处于脱机状态,则return fetch(url1);将不起作用,因为来自Service Worker的fetch不会递归触发另一个FetchEvent。因此,您必须改为return caches.match(url1),这意味着它已被缓存过。

© www.soinside.com 2019 - 2024. All rights reserved.