Firefox，服务工作人员和后背按钮

Question

我正在收到最新版本的firefox中的报告，向后压会导致我的服务工作人员提供的"您是离线"页面。

这是服务工作人员的功能部分：

self.addEventListener('fetch',function(event) {
  // We only want to call event.respondWith() if this is a navigation request
  // for an HTML page.
  // request.mode of 'navigate' is unfortunately not supported in Chrome
  // versions older than 49, so we need to include a less precise fallback,
  // which checks for a GET request with an Accept: text/html header.
  if (event.request.mode === 'navigate' ||
      (event.request.method === 'GET' &&
       event.request.headers.get('accept').includes('text/html'))) {
    event.respondWith(
      fetch(event.request).catch(function(error) {
        // The catch is only triggered if fetch() throws an exception, which will most likely
        // happen due to the server being unreachable.
        // If fetch() returns a valid HTTP response with an response code in the 4xx or 5xx
        // range, the catch() will NOT be called. If you need custom handling for 4xx or 5xx
        // errors, see https://github.com/GoogleChrome/samples/tree/gh- pages/service-worker/fallback-response
        return caches.match(OFFLINE_URL);
      })
    );
  }
  // If our if() condition is false, then this fetch handler won't intercept the request.
  // If there are any other fetch handlers registered, they will get a chance to call
  // event.respondWith(). If no fetch handlers call event.respondWith(), the request will be
  // handled by the browser as if there were no service worker involvement.
});

因此，由于某种原因，在Firefox中，向后返回OFFLINE_URL而不是预期的页面。

是什么可能导致这一点，我该如何调试？

Answer 1

firefox显然有一个额外的步骤，当使用"后退"按钮时，Chrome不会。

它执行请求"仅由if-cached"执行，这当然会失败，因为这些页面没有缓存(它们都是动态的(。由于失败，它会引发错误，并且catch被称为。

添加此检查已修复：

&& event.request.cache !== 'only-if-cached'

这允许Firefox意识到资源没有缓存，并按照正常进行。