Question

self.addEventListener('fetch', function(e) {
if (e.request.url.startsWith(self.location.origin)) {
    console.log("matched url")
    e.respondWith(
        caches.match(e.request).then(function (response) {
            //return response || fetch(e.request);
            return fetch(e.request);
        })
    );
} else {
    console.log("not matched url")
}
});

我要做的就是从缓存中仅提供一些页面和资源，而不是所有内容（我相信这会将缓存的页面放入运行时缓存中）。

此注释的代码段：返回响应|| fetch（e.request）; 提供缓存的所有页面...该网站确实是动态的。这就是为什么我现在只使用 return fetch（e.request）; 。

任何帮助表示赞赏。

Answer 1

我想这个代码示例可能实际上有帮助：https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js

这也是现场演示：https://googlechrome.github.io/samples/service-worker/selective-caching/

据我所知，这个想法很简单：制作一张预期要缓存的URL的映射，然后检查每个url请求：

TLDR;

self.addEventListener('activate', function(event) {
  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
    return CURRENT_CACHES[key];
  });

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (expectedCacheNames.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.open(CURRENT_CACHES.font).then(function(cache) {
      return cache.match(event.request).then(function(response) {
        if (response) {
          return response;
        }

        return fetch(event.request.clone()).then(function(response) {
          if (response.status < 400) {
            cache.put(event.request, response.clone());
          }

          return response;
        });
      });
    })
  );
});

没有缓存的服务人员

1 个答案: