在 Service Worker 中caches.put() 和 caches.add()/caches.addAll() 方法他们之间的区别

在 Service Worker 中，caches.put(request, response) 和 caches.add(request)/caches.addAll(requests) 方法都用于将资源添加到缓存中，但它们的使用场景和目的略有不同。

caches.put(request, response)，一用在fetch事件当中，由网络请求成功后将资源添加到缓存当中

用途：caches.put 方法用于将一个请求（request）和对应的响应（response）作为一个键值对添加到缓存中。这个方法通常在 fetch 事件中使用，用于在网络请求成功后将资源添加到缓存。

手动添加：是的，caches.put 是手动添加资源到缓存的一种方式。它允许你在捕获到网络请求并从网络获取资源后，将这些资源存储到缓存中，以便后续的请求可以直接从缓存中获取。

// 这里便是网络请求，或当网络请求优先时，便用cache.put()手动将网络获取资源添加到缓存中

// 监听 fetch 事件
self.addEventListener('fetch', (event) => {
  // 使用 event.respondWith() 来拦截请求并提供响应
  event.respondWith(
    // 使用 fetch() 从网络获取资源
    fetch(event.request).then((response) => {
      // 检查响应是否成功
      if (response.status === 200) {
        // 打开缓存
        return caches.open('my-cache').then((cache) => {
          // 将请求和响应克隆一份，因为 response 流只能被消费一次
          const responseToCache = response.clone();
          // 将请求和响应添加到缓存中
          cache.put(event.request, responseToCache);
          // 返回原始响应
          return response;
        });
      } else {
        // 如果响应不是200，则直接返回响应
        return response;
      }
    }).catch((error) => {
      // 如果 fetch 失败，则尝试从缓存中获取资源
      return caches.match(event.request).then((cachedResponse) => {
        if (cachedResponse) {
          return cachedResponse;
        } else {
          // 如果缓存中没有资源，抛出错误
          throw error;
        }
      });
    })
  );
});

这段代码的工作流程如下：

1、监听 fetch 事件：当页面发起网络请求时，Service Worker 会捕获这个请求。
2、从网络获取资源：使用 fetch() 尝试从网络获取资源。
3、检查响应状态：如果响应状态码为 200（即请求成功），则继续处理。
4、打开缓存：使用 caches.open() 打开一个名为 ‘my-cache’ 的缓存。
5、克隆响应：由于 Response 对象的流只能被消费一次，所以需要克隆一份响应，以便同时将其添加到缓存和返回给页面。
6、将资源添加到缓存：使用 cache.put() 将请求和克隆的响应添加到缓存中。
7、返回响应：返回原始的响应给页面。
8、错误处理：如果 fetch() 失败，尝试从缓存中获取资源。如果缓存中没有相应的资源，则抛出错误。

这样，你就可以在 Service Worker 中从后台请求资源，并将其添加到缓存中，以便在离线或网络不佳的情况下使用。

caches.add(request) / caches.addAll(requests)，一般使用在install事件当中预先缓存资源

用途：caches.add 和 caches.addAll 方法用于将一个或多个资源添加到缓存中。caches.add 用于添加单个资源，而 caches.addAll 用于批量添加资源。这些方法通常在 install 事件中使用，用于在 Service Worker 安装时预先缓存资源。

预先缓存：这些方法用于在 Service Worker 安装时预先缓存资源，这样在页面加载时可以直接从缓存中获取这些资源，而不需要等待网络请求。

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('my-cache').then((cache) => {
      return cache.addAll([
        '/images/image1.jpg',
        '/images/image2.jpg',
        // 其他资源...
      ]);
    })
  );
});

总结：

caches.put(request, response) 通常在 fetch 事件中使用，用于在网络请求成功后将资源添加到缓存。
caches.add(request) 和 caches.addAll(requests) 通常在 install 事件中使用，用于在 Service Worker 安装时预先缓存资源。
这两种方法都是将资源添加到缓存的有效方式，选择哪种方法取决于你的具体需求和缓存策略。