Cache API：Service Worker 中对网络请求的精细缓存控制

Cache API：Service Worker 的“百宝箱”，让你的网站快如闪电

大家好，今天咱们聊点“高大上”的技术，但保证你听得懂，而且还觉得挺有意思。没错，我们要说的就是 Cache API，Service Worker 这位“网络管家”手里的一个超级厉害的“百宝箱”。

想象一下，你每次打开淘宝，它都慢悠悠地从服务器上吭哧吭哧地加载图片、CSS、JavaScript，你是不是早就想把手机砸了？这时候，Cache API 就派上用场了。它可以把这些东西“嗖”的一下，存到你的手机本地，下次再打开，直接从本地读取，速度快到飞起，用户体验瞬间提升 N 个档次。

Service Worker：网站性能的“贴身保镖”

要了解 Cache API，我们得先认识一下 Service Worker。这家伙就像你网站的“贴身保镖”，默默地在后台运行，拦截你的网络请求，然后决定是直接从缓存里拿数据，还是去服务器上请求新的数据。

Service Worker 就像一个勤劳的小蜜蜂，它会在你的浏览器后台嗡嗡嗡地工作，拦截你的网络请求。你可以告诉它：“嘿，小蜜蜂，如果用户请求的是这个图片，你就直接从缓存里拿，别去服务器了！”

Cache API：Service Worker 的“百宝箱”

好了，现在主角登场了！Cache API 就是 Service Worker 用来存储和管理缓存的“百宝箱”。你可以把各种各样的东西，比如图片、CSS、JavaScript、HTML，甚至 API 的响应数据，统统塞进这个百宝箱里。

这个百宝箱可不是随便放东西的，它组织得井井有条。你可以创建多个“抽屉”（也就是 Cache 实例），每个抽屉放不同类型的东西。比如，你可以创建一个叫 "images" 的抽屉，专门放图片；再创建一个叫 "styles" 的抽屉，专门放 CSS 文件。

Cache API 的“三大件”

Cache API 主要有三个核心方法，我们称之为“三大件”：

caches.open(cacheName)：打开你的“抽屉”

这个方法用来创建一个新的 Cache 实例（也就是一个新的“抽屉”），或者打开一个已经存在的 Cache 实例。cacheName 就是你的抽屉的名字，你可以随便起，只要你自己能记住就行。

就像这样：
```
caches.open('my-awesome-cache').then(function(cache) {
  console.log('成功打开了一个名为 my-awesome-cache 的抽屉！');
});
```
cache.put(request, response)：往“抽屉”里塞东西

这个方法用来把一个网络请求的响应结果存到 Cache 实例里。request 是一个 Request 对象，代表你要缓存的网络请求；response 是一个 Response 对象，代表服务器返回的响应结果。

举个例子，你想把一个图片存到 "images" 抽屉里：
```
caches.open('images').then(function(cache) {
  return fetch('/images/my-cat.jpg').then(function(response) {
    return cache.put('/images/my-cat.jpg', response);
  });
});
```
这段代码先打开 "images" 抽屉，然后发起一个网络请求去获取 /images/my-cat.jpg 这张图片。等到服务器返回响应后，就把这个响应结果存到 "images" 抽屉里，以后再请求这张图片，就可以直接从缓存里拿了。
cache.match(request)：从“抽屉”里找东西

这个方法用来从 Cache 实例里查找与指定 request 对象匹配的缓存响应。如果找到了，就返回对应的 Response 对象；如果没找到，就返回 undefined。

比如，你想看看 "images" 抽屉里有没有 /images/my-cat.jpg 这张图片的缓存：
```
caches.open('images').then(function(cache) {
  return cache.match('/images/my-cat.jpg').then(function(response) {
    if (response) {
      console.log('找到了缓存的图片！');
      return response; // 返回缓存的响应
    } else {
      console.log('没有找到缓存的图片，需要去服务器请求了。');
      return fetch('/images/my-cat.jpg'); // 去服务器请求图片
    }
  });
});
```
这段代码先打开 "images" 抽屉，然后在抽屉里找 /images/my-cat.jpg 这张图片的缓存。如果找到了，就直接返回缓存的响应；如果没找到，就发起一个网络请求去服务器请求图片。

Cache API 的进阶用法

光会用“三大件”还不够，Cache API 还有一些更高级的用法，可以让你更好地控制缓存：

缓存策略：决定何时从缓存拿数据，何时去服务器请求数据

缓存策略是 Service Worker 的灵魂。不同的缓存策略适用于不同的场景。常见的缓存策略有：
- Cache First： 永远先从缓存里拿数据，如果缓存里没有，再去服务器请求。这种策略适用于那些不经常更新的资源，比如静态图片、CSS、JavaScript。
- Network First： 永远先去服务器请求数据，如果服务器请求失败（比如网络断了），再从缓存里拿数据。这种策略适用于那些需要保持最新状态的资源，比如新闻、股票信息。
- Cache Only： 只从缓存里拿数据，如果缓存里没有，就直接报错。这种策略适用于那些离线可用的资源，比如离线游戏、离线文档。
- Network Only： 只从服务器请求数据，不使用缓存。这种策略适用于那些非常敏感的资源，比如银行账户信息。
- Stale-While-Revalidate： 先从缓存里拿数据，同时在后台去服务器请求最新的数据。这种策略可以让你尽快地显示内容，同时保证内容最终是最新的。
缓存更新：保持缓存新鲜的秘诀

缓存不能永远不变，我们需要定期更新缓存，才能保证用户看到的是最新的内容。常见的缓存更新方式有：
- 版本号控制： 在文件名或者 URL 中加入版本号，每次更新资源时，就修改版本号。这样，浏览器就会认为这是一个新的资源，从而重新下载。
- 定期更新： 使用 setTimeout 或者 setInterval 定期去服务器检查资源是否有更新，如果有更新，就更新缓存。
- 监听服务器推送： 使用 WebSocket 或者 Server-Sent Events 监听服务器的推送，当服务器有更新时，就通知 Service Worker 更新缓存。
缓存清理：避免缓存膨胀的妙招

缓存也不是越多越好，我们需要定期清理那些不再使用的缓存，才能避免缓存膨胀，占用用户的存储空间。常见的缓存清理方式有：
- LRU（Least Recently Used）： 删除最近最少使用的缓存。
- FIFO（First In First Out）： 删除最早添加的缓存。
- 手动清理： 提供一个界面，让用户手动清理缓存。

Cache API 的实战演练

说了这么多理论，咱们来点实际的。下面是一个简单的 Service Worker 示例，演示了如何使用 Cache API 实现离线访问：

// service-worker.js

const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/style.css',
  '/script.js',
  '/images/logo.png'
];

// 安装 Service Worker
self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

// 拦截网络请求
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }

        // 重要：克隆 request。一个 request body 可以使用一次
        // 重要：因为 request 是一个 stream，所以我们必须clone它，并把它传递给服务器。
        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).then(
          function(response) {
            // 检查我们是否收到了一个有效的响应
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // 重要：克隆 response
            // 重要：因为 response 是一个 stream，所以我们必须clone它，并把它放进缓存。
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

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

// 激活 Service Worker
self.addEventListener('activate', function(event) {

  var cacheWhitelist = [CACHE_NAME];

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

这段代码做了以下几件事：

安装 Service Worker： 在 install 事件中，打开一个名为 my-site-cache-v1 的缓存，然后把 urlsToCache 数组里的所有资源都存到缓存里。
拦截网络请求： 在 fetch 事件中，拦截所有的网络请求，先去缓存里找对应的资源。如果找到了，就直接返回缓存的响应；如果没找到，就去服务器请求资源，然后把响应结果存到缓存里。
激活 Service Worker： 在 activate 事件中，清理旧的缓存，只保留 my-site-cache-v1 这个缓存。

有了这段代码，你的网站就可以离线访问了！即使网络断了，用户仍然可以访问你网站的静态资源。

Cache API 的注意事项

在使用 Cache API 时，需要注意以下几点：

缓存大小限制： 浏览器对缓存的大小有限制，不同的浏览器限制不同。一般来说，移动端的限制比桌面端更严格。
缓存过期时间： 缓存默认是永久有效的，除非你手动清理或者浏览器自动清理。你可以设置缓存的过期时间，让缓存自动失效。
HTTPS： Service Worker 只能在 HTTPS 协议下使用，这是为了安全考虑。
调试： 调试 Service Worker 比较麻烦，你需要使用浏览器的开发者工具，或者使用一些专门的 Service Worker 调试工具。

总结

Cache API 是 Service Worker 的一个强大的工具，它可以让你更好地控制网站的缓存，从而提高网站的性能和用户体验。掌握 Cache API，你就可以让你的网站快如闪电，让用户爱不释手！

希望这篇文章能让你对 Cache API 有一个更深入的了解。如果你还有什么问题，欢迎留言讨论！下次有机会，我们再聊聊 Service Worker 的其他有趣的功能。

Cache API：Service Worker 的“百宝箱”，让你的网站快如闪电

发表回复 取消回复

发表回复取消回复