ServiceWorker：离线页面未显示

Question

我是 PWA/ServiceWorker (SW) 的新手，我需要一些帮助。

在获取事件侦听器时，我首先检查资产是否在缓存中可用。如果可用，我 return 它，如果不可用，则获取新资产，更新缓存。但是，当页面离线并且用户导航到新页面时，我看不到我的离线页面，这是我在控制台上遇到的错误：

The FetchEvent for "http://localhost:3000/about" resulted in a network error response: an object that was not a Response was passed to respondWith().

下面是我的代码下面可以看清楚谢谢

函数

fromCache = (request) => {
  return caches.open(CACHE).then(
    (cache) => {
      return cache.match(request).then(
        (matching) => {
          if (!matching || matching.status === 404) {
            return Promise.reject("fromCache no match");
          }
          return matching;
        }
      );
    }
  );
}

updateCache = (request, response) => {
  return caches.open(CACHE).then(
    (cache) => {
      return cache.put(request, response);
    }
  );
}

事件侦听器

self.addEventListener("fetch", (event) => { 
  if (event.request.method !== "GET") {
    return;
  }
  event.respondWith(
    fromCache(event.request).then(
      (response) => {
        event.waitUntil(
          fetch(event.request).then(
            (response) => {
              return updateCache(event.request, response);
            }
          )
        );
        return response;
      },
      () => {
        return fetch(event.request)
          .then(
            (response) => {
              event.waitUntil(updateCache(event.request, response.clone()));
              return response;
            }
          )
          .catch(
            () => {
              if (event.request.destination !== "document" || event.request.mode !== "navigate") {
                return;
              }
              return caches.open(CACHE).then(
                (cache) => {
                  cache.match(offlineFallbackPage);
                }
              );
            }
          );
      }
    )
  );
});

Answer 1

这是我解决问题的方法

变量

const cacheName = 'neo-genesis';
const offlineFallbackPage = 'offline.html';
const skipCacheFrom = [
  'apple',
  'bing',
  'extension',
  ...
]

函数

const isOnList = (property, list) =>
  list.some((item) => property.indexOf(item) !== -1);

事件侦听器

self.addEventListener('fetch', (event) => {
  if (event.request.method === 'GET' && !isOnList(event.request.url, skipCacheFrom)) {
    event.respondWith(
      caches.match(event.request)
        .then(
          (cache) => (
            cache || fetch(event.request)
              .then(
                (response) => (
                  caches.open(cacheName)
                    .then(
                      (cache) => {
                        cache.put(event.request.url, response.clone());
                        return response;
                      }
                    )
                )
              )
          )
        )
        .catch(
          (error) => {
            if (event.request.destination !== 'document' || event.request.mode !== 'navigate') {
              console.log(`This device is offline!\n${error}`);
              return Promise.resolve();
            }
            return caches.match(offlineFallbackPage);
          }
        )
      );
  }
  return;
});

ServiceWorker：离线页面未显示

ServiceWorker: Offline page not showing

javascript

service-worker

progressive-web-apps