如果缓存中不存在请求，则从服务器获取并添加到缓存

Question

我刚刚开始与服务工作者合作，但我还没有完全理解他们的工作方式。我的代码有问题。

我想要实现的是首次加载时将所有文件存储在缓存中。这个位工作正常，我使用了一个我知道它将缓存的所有文件的列表。

我想添加一个功能，我的服务工作者将首先加载（也就是我在列表中没有的文件）之前没有看到过缓存文件

我写了一段代码，但是虽然它似乎将文件添加到缓存中，但它似乎无法可靠地工作，当我在Chrome中查看我的缓存使用情况时，它似乎也缓存了一些文件， on-install脚本已经缓存。

编写这段代码以实现目标的最佳方法是什么？

感谢

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.open(CACHE_VERSION).then(function(cache) {
      return cache.match(event.request).then(function (response) {
        return response || fetch(event.request).then(function(response) {
          cache.put(event.request, response.clone());
          console.log("new file encountered - adding to cache: ");
          return response;
        });
      });
    })
  );
});