Service Worker: ошибка обнаружена (в обещании) TypeError: схема запроса 'data' не поддерживается

Question

Что происходит при первой загрузке веб-сайта при поиске и кэшировании не возникает никаких проблем. Но при обновлении (обычная перезагрузка) событие Fetch сталкивается с проблемой и показывает это в журнале консоли.

Uncaught (в обещании) TypeError: Схема запроса 'data' не поддерживается в self.addEventListener.e.respondWith.fetch.then.caches.open.then.cache

Я понял, что при перезагрузке он получает format data:[<mediatype>][;base64],<data>что вызывает ошибку в журнале консоли.

// 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

Хорошей практикой является открытие кеша перед отправкой запроса на выборку, чтобы гарантировать, что ваш кеш существует. И вы можете вернуться к ответу кеша в случае сбоя сети. Следующий код обновит ваш кеш:

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)
  })
)