如何防止 fetch() 忽略离线页面？

Question

下面的 JavaScript 代码使用 Fetch API 从服务器检索一些文本。

 fetch("index.php?user_id=1234", {
        method: "GET"
    }).then(function(response) {
        return response.text();
    }).then(function(output) {
        document.getElementById("output").innerHTML = output;
    });

但在网络错误期间，由于 service-worker，它会检索离线页面（offline.html）。

"use strict";

self.addEventListener("install", function() {
    self.skipWaiting();
});

self.addEventListener("activate", function(activation) {
    activation.waitUntil(

        caches.keys().then(function(cache_names) {
            for (let cache_name of cache_names) {
                caches.delete(cache_name);
            };

                caches.open("client_cache").then(function(cache) {
                    return cache.add("offline.html");
                });
        })
    );
});

self.addEventListener("fetch", function(fetching) {
    fetching.respondWith(
        caches.match(fetching.request).then(function(cached_response) {
            return cached_response || fetch(fetching.request);
        }).catch(function() {
            return caches.match("offline.html");
        })
    );
});

我想让提取请求知道网络错误。

而且我不想使用window.navigator。那么，我该怎么办做？

（我更喜欢普通的解决方案。）

Answer 1

您应该构建 Service Worker 的 fetch 事件处理程序，以便仅在出现网络错误/缓存丢失和原始请求时返回 offline.html是为了导航。如果原始请求不是导航，则使用 offline.html 进行响应（如您所见）将导致每次失败时都返回 HTML。

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      return cachedResponse || fetch(event.request);
    }).catch((error) => {
      if (event.request.mode === 'navigate') {
        return caches.match('offline.html');
      }

      throw error;
    })
  );
});