Service Worker - TypeError: Request failed

Question

我使用 service worker 来缓存来自其他域的资源。我收到此错误 "TypeError: Request failed serivce-worker.js:12" 我不知道为什么会出现此错误。

服务-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);
      }
    )
  );
});

Answer 1

这是处理不透明响应（使用 mode: 'no-cors' 获取的响应）的副作用。这是 this longer answer 的摘录：

一个 "gotcha" 那个开发者 might run into with opaque responses involves using them with the Cache Storage API。两条背景信息相关：

status property of an opaque response is always set to 0，不管原请求成功还是失败。
缓存存储 API 的 add()/addAll() methods will both reject if the responses resulting from any of the requests have a status code that isn't in the 2XX range。

从这两点来看，如果作为 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));

Service Worker - TypeError: Request failed

Service Worker - TypeError: Request failed

typeerror

fetch

service-worker

fetch-api