Javascript 试图与服务人员一起显示脱机页面，但即使在脱机状态下，我的请求也会得到200个响应

我正在尝试使用服务人员执行以下任务：

• 缓存一组页面
• 如果请求，从缓存返回页面-如果页面不在缓存中，则从服务器返回
• 如果缓存或服务器没有响应，则返回自定义脱机页面

我有以下代码：

this.addEventListener('install', function(event) {
  console.log('Service Worker: Installing');

  event.waitUntil(

    caches.open('v1').then(function(cache) {
      console.log('Service Worker: Caching Files');
      return cache.addAll([
        '/assets/logo.svg',
        '/assets/app.css',
        '/assets/app.js',
        '/assets/common.js',
        '/offline.html'
      ]);
    })
  );
});

this.addEventListener('fetch', function(event) {
  if (event.request.method != "GET" || event.request.mode == "cors" || event.request.url.startsWith('chrome-extension')) return;
  console.log('Event to be passed', event);

  event.respondWith(
    caches.open('v1').then(function(cache) {
      return cache.match(event.request).then(function(response) {
        if (response) {
          console.log('Service Worker: Returning Cached Response', response);
          return response;
        } else {
          fetch(event.request).then(function(response) {
            console.log('Service Worker: Returning Response from Server', response);
            cache.put(event.request, response.clone());
            return response;
          }).catch((error) => {
            console.log('Fetch failed; returning offline page instead.', error);
            return caches.match('/offline.html');
          });
        }
      });
    })
  );
});

this.addEventListener('activate', function activator(event) {
  console.log('Service Worker: Activating', event);
  event.waitUntil(
    caches.keys().then(function(keys) {
      return Promise.all(keys
        .filter(function(key) {
            return key.indexOf('v1') !== 0;
        })
        .map(function(key) {
            return caches.delete(key);
        })
      );
    })
  );
});

我遇到的问题是，即使在脱机状态下，我的请求也会得到200个响应，即使我脱机并且没有实际检索文件

我知道这是PWA总是返回200响应的先决条件之一，但是如果我的响应总是返回200，我怎么能返回脱机页面呢

任何关于服务人员的帮助、建议或资源都是有用的

---

干杯。

你必须处理好所有的事情，如果没有什么特别的事情发生，你不能只是“回来”

this.addEventListener('fetch', function(event) {
    if (event.request.method != "GET" || event.request.mode == "cors" || event.request.url.startsWith('chrome-extension')){
        event.respondWith(fetch(event.request));
        return;
    }
....

然后还必须返回fetch事件，否则会破坏承诺链

} else {
    return fetch(event.request).then(function(response) {

---

澄清；您正在接收这个

console.log（'Service Worker:Returning Response from Server'，Response'）脱机时响应，缓存为空？是的，就是这样。然而，我也得到了另一个可能导致它的错误：我的控制台说：“的FetchEvent for”“导致了一个网络错误响应：一个不是响应的对象被传递到respondWith（）。”根据这个相关的，在没有缓存匹配的情况下，可能您没有正确解析
respondWith（）
。由此看来，传递给
respondWith（）
的代码应该是“通过返回要获取的响应或网络错误来解决问题”。因为您得到了respondWith警告，这意味着caches.match（）找不到该资源。似乎是这样，我在else语句中从缓存返回了一个有效的解决方案。谢谢你的帮助。