1

使用 sw-precache 实用程序，我创建了一个服务工作者，如果我刷新页面就可以工作。但最初，fetch 调用返回TypeError: Failed to fetch一个似乎取消其余部分的文件。Refresh 获取更多文件，再刷新几次，直到所有文件都被获取，然后 service worker 工作正常。每个 url 每次都能正常加载，即使使用缓存破坏器也是如此。所有的调用都是对https://localhost:9001的直接get调用。共有 17 个文件。

这是一个代码片段：

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return setOfCachedUrls(cache).then(function(cachedUrls) {
        return Promise.all(
          Array.from(urlsToCacheKeys.values()).map(function(cacheKey) {
            // If we don't have a key matching url in the cache already, add it.
            if (!cachedUrls.has(cacheKey)) {
              var request = new Request(cacheKey, {credentials: 'same-origin'});
              return fetch(request).then(function(response) {
                // Bail out of installation unless we get back a 200 OK for
                // every request.
                if (!response.ok) {
                  throw new Error('Request for ' + cacheKey + ' returned a ' +
                    'response with status ' + response.status);
                }

                return cleanResponse(response).then(function(responseToCache) {
                  return cache.put(cacheKey, responseToCache);
                });
              }).catch(function(e) {
                  throw new Error('fetch error: ' + e);
              });
            }
          })
        );
      });
    }).then(function() {

    })
  );
});

我尝试添加keepalive:true,headers:{"Access-Control-Allow-Origin": "*"}到请求但得到相同的结果。

请求似乎很快就失败了，而且我看到请求需要一秒钟多一点的时间才能响应。也许有办法设置超时？

在 chrome 开发工具网络选项卡中，它以红色显示失败的尝试，(canceled)并在左侧显示状态和小服务人员图标。

它似乎在 FireFox 中运行良好。Chrome 遇到了麻烦。

4

0 回答 0