Question

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

在获取事件监听器上，我首先检查资产是否在缓存中可用。如果可用，我将其返回，否则将获取新资产，更新缓存。但是，当页面脱机并且用户导航到新页面时，我看不到脱机页面，这是我在控制台上看到的错误：

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

在这里我如何解决问题issues

变量

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：脱机页面未显示

1 个答案: