JavaScript Academy · 课时

Cache API

Q: 「Cache API」这节课中我会学到什么？

从缓存中存储并提供响应。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

从缓存中存储并提供响应。

Cache API 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

什么是 Cache API

Cache API 会将请求和响应对存储在命名缓存中。服务工作线程使用它来提供资源，而不必访问网络，这是支持离线功能的基础。

caches 对象

全局 caches 对象（一个 CacheStorage）管理所有命名缓存。页面和服务工作线程都可以使用它。

// Available globally:
// caches.open(name)
// caches.match(request)
// caches.delete(name)
// caches.keys()

打开缓存

caches.open(name) 会返回一个 Promise，该 Promise 对应于具有指定名称的缓存；如果缓存不存在，就会创建它。使用名称可以为缓存设置版本。

caches.open('static-v1').then(cache => {
  console.log('cache ready');
});

使用 addAll 预缓存

在 install 期间，cache.addAll(urls) 会通过一次调用获取并存储一组资源。如果任何一次获取失败，整个操作都会被拒绝。

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('static-v1').then(cache =>
      cache.addAll(['/', '/styles.css', '/app.js'])
    )
  );
});

waitUntil

event.waitUntil(promise) 会告诉浏览器让工作线程保持运行，直到 Promise 得到解决。请将缓存设置过程包装在其中，以免安装过早完成。

self.addEventListener('install', (event) => {
  event.waitUntil(setupCache());
});

添加单个条目

cache.put(request, response) 会存储单个响应，而 cache.add(url) 会获取并存储一个 URL。当您已经有要保存的响应时，请使用 put。

const cache = await caches.open('static-v1');
const response = await fetch('/logo.png');
await cache.put('/logo.png', response);

从缓存中匹配

cache.match(request) 会查找已存储的响应。如果找到匹配项，它会解析为该响应；如果没有匹配项，则解析为 undefined。

const cache = await caches.open('static-v1');
const hit = await cache.match('/styles.css');
if (hit) console.log('served from cache');

caches.match 快捷方法

caches.match(request) 会一次搜索所有缓存。当您不关心资源存在哪个缓存中时，它在 fetch 处理程序中非常方便。

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(hit =>
      hit || fetch(event.request)
    )
  );
});

respondWith

在 fetch 事件中，event.respondWith(promise) 会提供浏览器将使用的响应。请让它解析为缓存中的响应或新获取的 Response。

self.addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request));
});

克隆响应

响应正文只能读取一次。要同时返回响应并存储响应，请先克隆它。

const response = await fetch(request);
cache.put(request, response.clone()); // store a copy
return response; // return the original

删除缓存条目

cache.delete(request) 会移除一个条目；caches.delete(name) 会删除整个命名缓存。请使用它们清除过时的资源。

await cache.delete('/old-asset.js');
await caches.delete('static-v0'); // remove old cache version

快速检查

测试您对 Cache API 的理解。

回顾

您学习了 Cache API：

caches.open(name) 会获取或创建命名缓存。
addAll 用于预缓存；put/add 用于存储条目。
match 用于检索；caches.match 用于搜索所有缓存。
respondWith 会在 fetch 中提供响应。
在缓存和返回响应之前，先克隆响应。

接下来学习缓存策略。

常见问题解答

「Cache API」课时是免费的吗？

是的 — 「Cache API」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「Cache API」这节课中我会学到什么？

从缓存中存储并提供响应。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「Cache API」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy