Service Worker 正在抓住一切

Question

我最近刚刚开始摆弄服务人员，并且遇到一种情况，无论我告诉它添加什么文件到缓存中，它都会添加所有内容。现在，这通常意味着我对离线应用程序的工作更少，但我有点困惑。所以缓存似乎有两种添加请求的方法，.add() 和.addAll()，后者能够接收请求数组，但即使只有.add() 带有硬编码的请求，绝对是所有请求似乎最终在缓存中。

我的代码如下：

    if ('serviceWorker' in navigator) {
        //console.log('CLIENT: service worker registration in progress.');
        navigator.serviceWorker.register('/sw.js').then(function() {
            //console.log('CLIENT: service worker registration complete.');
        }, function() {
            //console.log('CLIENT: service worker registration failure.');
    });
    } else {
        console.log('CLIENT: service worker is not supported.');
    }

...这是在调用服务工作者的实际页面中，以及服务工作者本身：

var cacheName = 'cache';

self.addEventListener('install', (e) => {
    console.log('[Service Worker] Install');
var appShellFiles = [
];

e.waitUntil(
    caches.open(cacheName).then((cache) => {
          console.log('[Service Worker] Caching all: app shell and content');
      return cache.add('assets/images/boy.svg').then(function() {
        // requests have been added to the cache
        console.log('added')
      });
    })
  );
});

self.addEventListener('fetch', (e) => {
    e.respondWith(
      caches.match(e.request).then((r) => {
            console.log('[Service Worker] Fetching resource: '+e.request.url);
        return r || fetch(e.request).then((response) => {
                  return caches.open(cacheName).then((cache) => {
            console.log('[Service Worker] Caching new resource: '+e.request.url);
            cache.put(e.request, response.clone());
            return response;
          });
        });
      })
    );
  });

self.addEventListener('activate', (e) => {
    e.waitUntil(
      caches.keys().then((keyList) => {
            return Promise.all(keyList.map((key) => {
          if(key !== cacheName) {
            return caches.delete(key);
          }
        }));
      })
    );
  });

...但是这里的.add('assets/images/boy.svg') 曾经是.addAll(appShellFiles)，它本身曾经包含单个文件，但似乎忽略了列表并仍然缓存所有内容。我错过了什么？

Answer 1

这很简单。看这段代码：

self.addEventListener('fetch', (e) => {
    e.respondWith(
      caches.match(e.request).then((r) => {
            console.log('[Service Worker] Fetching resource: '+e.request.url);
        return r || fetch(e.request).then((response) => {
                  return caches.open(cacheName).then((cache) => {
            console.log('[Service Worker] Caching new resource: '+e.request.url);
            cache.put(e.request, response.clone());
            return response;
          });
        });
      })
    );
  });

它将所有内容动态/动态/自动保存在缓存中。您的代码是正确的 - 最初它只缓存您提到的一个文件。但当应用启动时，软件会立即缓存所有内容。

另一种看待“缓存一切”问题的方式：缓存一切甚至不意味着任何东西。浏览器无法知道“一切”对特定站点意味着什么。它可以是 4 或 4000 个资产。一旦实现了这一点，只需找到正确的代码段即可。