即使离线，提取也会在服务工作者中返回200

Question

我希望我的Angularjs（1.x）应用程序具有脱机版本作为备用，以防没有网络或没有互联网服务。

我需要服务端的获取事件监听器，尝试从网络获取主页（当request.mode =='navigate'时，如果失败则返回一个缓存的版本。

出于某种原因，即使我断开了wifi的连接或以“飞机模式”运行，获取始终返回StatusCode 200 OK。但是，如果我打开Chrome的DevTools的“网络>离线”模式，它确实可以正常工作

...我尝试过的事情：

我已尝试使用“ navigator.onLine”功能检测离线模式，但不可靠。

也试图清除缓存，但是什么也没有。仍然返回原始的“在线” html文档。

也尝试将“ cache-control：no-store，no-cache”标头传递给提取，结果相同。

self.addEventListener('fetch', function (event) {
  if (event.request.mode === 'navigate') {    
    event.respondWith(homeNetworkThenCache());
  } 
});

function homeNetworkThenCache(request){
  return fetch(request)
          .then(e => e)
          .catch(() => caches.match(offlineHomepageUrl));
}

预期的行为：
如果没有互联网连接，我希望获取的内容会进入“ catch”块，但始终会进入“ .then（e => e）” ...

..有什么想法吗？

我希望我的Angularjs（1.x）应用程序具有脱机版本作为后备，以防没有网络或没有互联网服务。我想要服务人员的fetch事件侦听器，尝试获取...

Answer 1

[如果您正在寻找一个示例服务工作者，它[实现了离线后备页面，则可以use this one，它还会执行启用导航预加载的功能（如果支持）：