Service Worker - TypeError: Запрос не выполнен - PullRequest
Новая
       33

Service Worker - TypeError: Запрос не выполнен

0 голосов
/ 27 сентября 2018

Я использовал работника сервиса для кэширования ресурса из другого домена.Я получаю эту ошибку «Ошибка ввода: Ошибка запроса serivce-worker.js: 12» Я не знаю, почему происходит эта ошибка.

service-worker.js 

var cacheNames=['v1'];
var urlsToPrefetch=['file from other domain'];

self.addEventListener('install', function (event) {
    event.waitUntil(
        caches.open(cacheNames).then(function(cache) {
            console.log('Service Worker: Caching Files');
            cache.addAll(urlsToPrefetch.map(function (urlToPrefetch) {
                console.log(urlToPrefetch);
                return  new Request(urlToPrefetch, {mode: 'no-cors'});
            })).catch(function(error){
            console.log(error);
            });
        })
    );
});

self.addEventListener('fetch', function(event) {
    console.log('Service Worker: Fetching');
    event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

1 Ответ

0 голосов
/ 27 сентября 2018

Это побочный эффект при работе с непрозрачными ответами (полученными с mode: 'no-cors').Вот выдержка из этого более длинного ответа :

Одна "ошибка", с которой разработчик может столкнуться с с непрозрачными ответами, подразумевает использование их с Cache Storage API .Актуальны две части справочной информации:

  • Свойство status непрозрачного ответа всегда имеет значение 0 независимо от того,исходный запрос выполнен или не выполнен.
  • Методы add() / addAll() API Cache Storage оба будут отклонены, если ответы, полученные в результате любого из запросов, имеютКод состояния, который не находится в диапазоне 2XX .

Из этих двух пунктов следует, что если запрос выполнен как часть вызова add() / addAll()приводит к непрозрачному ответу, он не будет добавлен в кэш.

Вы можете обойти это, явно выполнив fetch(), а затем вызвав метод put() снепрозрачный ответ.Тем самым вы эффективно включаете риск того, что ответ, который вы кэшируете, мог быть ошибкой, возвращенной вашим сервером. 

const request = new Request('https://third-party-no-cors.com/', {mode: 'no-cors'});
// Assume `cache` is an open instance of the Cache class.
fetch(request).then(response => cache.put(request, response));
...