javascript - Service Worker 正在抓取一切

Question

我最近刚刚开始摆弄服务 worker ，并且遇到一种情况，无论我告诉它添加什么文件到缓存，它都会添加所有内容。现在，这通常意味着我对离线应用程序的工作量减少了，但我有点困惑。所以缓存似乎有两种向其添加请求的方法，.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 项 Assets 。一旦实现这一点，只需找到正确的代码即可。