Question

我正在尝试设置服务人员，以便我的Web应用程序可以完全脱机工作。当我检查static-v2的缓存时，我想要的所有资产都在那里。

当我发出请求并在线时，我的软件正在正确地进行提取，并且没有陷入catch语句中。

但是，当我脱机并进入缓存时，正确的响应记录为状态200，但出现了chrome'no internet'错误。

另一个有趣的观点是，即使我注释掉返回缓存响应并仅返回硬编码响应的行，我仍然会收到“没有互联网”错误。

在弄清为什么我的服务人员未按预期工作的任何帮助将不胜感激。

const CACHENAME = `static-v2`;

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHENAME).then(function(cache) {
      return cache
        .addAll([
          // your list of cache keys to store in cache
          'bundle.js',
          'index.html',
          'manifest.json',
          // etc.
        ])
        .then(() => {
          return self.skipWaiting();
        });
    }),
  );
});

self.onactivate = (evt) => {
  console.log(`on activate - ${CACHENAME}`);

  evt.waitUntil(
    caches.keys().then((cacheNames) => {
      const deleteOldCaches = cacheNames.map((cacheName) => {
        console.log(cacheName);

        if (cacheName != CACHENAME) {
          return caches.delete(cacheName);
        }

        return Promise.resolve();
      });

      return Promise.all(deleteOldCaches);
    }),
  );

  self.clients.claim();
};

self.onfetch = (evt) => {
  evt.waitUntil(
    fetch(evt.request).catch((err) => {
      caches.match(evt.request).then((response) => {
        console.log(evt.request.url, response);

        if (response) return response;

        return new Response('<div><h2>Uh oh that did not work</h2></div>', {
          headers: {
            'Content-type': 'text/html',
          },
        });
      });
    }),
  );

  console.log(`on fetch - ${CACHENAME}`);
};

我正在使用http服务器（https://www.npmjs.com/package/http-server）托管我的所有资产（inc SW）

Answer 1

这是一个简单的错误。

在获取事件处理程序中，您不应调用evt.waitUntil。您应该致电evt.respondWith。

服务人员返回正确的响应，但仍然出现“没有互联网”错误

1 个答案: