如何防止 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 事件处理程序，以便它只 returns offline.html 当有网络时 error/cache 错过和最初的请求是导航。如果原始请求不是导航，则使用 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;
    })
  );
});

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

How to prevent fetch() to ignore offline pages?

javascript

progressive-web-apps

service-worker

fetch-api