javascript - Service Worker：错误捕获（在 Promise 中）TypeError：请求方案“数据”不受支持

Question

发生的情况是在第一次加载网站时，获取和缓存不会遇到任何问题。但是，在刷新（正常重新加载）时，Fetch 事件会遇到问题并在控制台日志中显示。

未捕获（承诺中）类型错误：self.addEventListener.e.respondWith.fetch.then.caches.open.then.cache 不支持请求方案“数据”

我意识到在重新加载时它会获取format data:[<mediatype>][;base64],<data>导致控制台日志中错误的 a 。

// Call Fetch Event
self.addEventListener('fetch', e => {
  console.log('Service Worker: Fetching');
  e.respondWith(
    fetch(e.request)
      .then(res => {
        // Make copy/clone of response
        const resClone = res.clone();
        // Open cahce
        caches.open(cacheName).then(cache => {
          // Add response to cache
          cache.put(e.request, resClone);
        });
        return res;
      })
      .catch(err => caches.match(e.request).then(res => res))
  );
});

我想避免这个错误，但我不知道如何。

Answer 1

一个好的做法是在发送 fetch 请求之前打开缓存，以确保您的缓存存在。如果网络出现故障，您可以回退到缓存响应。以下代码将更新您的缓存：

e.respondWith(
  caches.open(cacheName).then(cache => {
    cache.match(e.request).then(cacheResponse => {
      const networkFetch = fetch(e.request).then(networkResponse => {
        cache.put(e.request, networkResponse.clone());
        return networkResponse
      });

      return cacheResponse || networkFetch;
    });
  }).catch(error => {
    console.log('error in cache open: ', error)
  })
)