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

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

Uncaught (в обещании) TypeError: схема запроса «данные» не поддерживается в 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))
  );
});

Я хочу избежать этой ошибки, но не знаю как.


javascript promise caching service-worker service-worker-events
person Kevz    schedule 01.10.2018    source источник
comment
Не совсем уверен, но, возможно, это может указать вам правильное направление ?   -  person guyot    schedule 01.10.2018
comment
это означает, что e.request является uri данных, то есть в формате data:[<mediatype>][;base64],<data>   -  person Jaromanda X    schedule 01.10.2018
comment
Попробуйте удалить .then(res => res), что не нужно и вполне может привести к необработанной ошибке.   -  person Roamer-1888    schedule 01.10.2018
comment
Вы также можете попробовать вывернуть e.respondWith() и fetch() наизнанку, чтобы в результате e.respondWith(res) заменили return res внутри обратного вызова .then.   -  person Roamer-1888    schedule 01.10.2018
comment
@JaromandaX, ты прав. ошибки возникают, когда используется формат data:[‹mediatype›][;base64],‹data› у вас есть способ решить проблему?   -  person Kevz    schedule 02.10.2018
comment
поскольку URI данных содержит все необходимые данные, вам не нужно их fetch, а кэширование не улучшит скорость или задержку, поэтому просто не делайте этого с URI данных.   -  person Jaromanda X    schedule 02.10.2018

Ответы (1)


arrow_upward
0
arrow_downward

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

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)
  })
)
person MattYao    schedule 01.10.2018
comment
Мэтт, я попробовал твой код, и он сначала обновляет мой кеш, но когда я перезагружаю сервер, он больше не отвечает. Кроме того, я попытался сначала изменить свой код и открыть кеш, но ошибка все еще существует. - person Kevz; 01.10.2018
comment
Что вы имеете в виду под "больше не отвечать"? Вы перестали получать дальнейший ответ от сервера? Есть ли возможность вставить ссылку на код, чтобы я мог посмотреть? - person MattYao; 01.10.2018
comment
Я имею в виду, что он говорит, что этот сайт недоступен. Я чувствую, что проблема в данных, переданных в resClone. - person Kevz; 01.10.2018
comment
Хорошо, вам может потребоваться дважды проверить значение e.request и посмотреть, является ли он допустимым объектом запроса. - person MattYao; 01.10.2018