详解JavaScript Service Worker缓存管理与清除API
本文详细解析JavaScript中Service Worker的Cache API用法。涵盖从检查浏览器支持、创建缓存对象（caches.open），到添加请求（add/addAll）、读取数据（match/matchAll）及删除缓存（delete）的完整流程。重点介绍如何通过caches.keys()获取缓存列表并批量清理旧缓存，帮助开发者高效管理Web应用离线资源与性能。
JavaScript ServiceWorker API的核心优势在于赋予Web开发者对缓存控制的极大便利。尽管ETags等技术也能实现缓存控制，但通过JavaScript编程方式管理缓存功能更为强大且灵活。然而，这种灵活性也带来了维护成本，即开发者必须妥善处理缓存清理工作，以确保应用状态的准确性。
接下来将逐步演示如何创建缓存对象、向缓存中添加请求数据、从缓存中移除特定数据，以及最终完全删除整个缓存对象的方法。
检查浏览器支持
在使用Cache API之前，首先需要判断当前浏览器是否支持该缓存对象接口。
可以通过检查全局window对象中是否存在caches属性来验证支持情况。
if('caches' in window) {
// Has support!
}具体实现为检查window里是否存在caches对象。
创建缓存对象
创建缓存对象是操作缓存的第一步。
创建缓存对象的标准方法是调用caches.open()，并向其传入一个字符串形式的缓存名称。
caches.open('test-cache').then(function(cache) {
// 缓存创建完成，现在就可以访问了
});caches.open方法返回一个Promise对象。如果指定的缓存名称不存在，该Promise将解析为一个新创建的cache对象；如果该名称的缓存已存在，则直接返回现有的cache对象，而不会重复创建。
添加缓存数据
向缓存中添加数据是缓存管理的核心操作之一。
可以将此类缓存视为一个Request对象数组，其中存储的是通过Request请求获取的响应数据，这些数据以键值对的形式保存在cache对象中。向缓存添加数据主要有两个方法：add和addAll。使用这两个方法可以将需要缓存的请求地址加入缓存列表。关于Request对象的详细用法，可参考fetch API的相关文档。
使用addAll方法可以实现批量添加缓存请求的操作。
caches.open('test-cache').then(function(cache) {
cache.addAll(['/', '/images/logo.png'])
.then(function() {
// Cached!
});
});addAll方法接受一个URL地址数组作为参数，这些地址对应的响应数据将被自动缓存到cache对象中。该方法返回一个Promise。若需添加单个地址，则使用add方法：
caches.open('test-cache').then(function(cache) {
cache.add('/page/1'); // "/page/1" 地址将会被请求，响应数据会缓存起来。
});
add()方法还可以接受一个自定义的Request:
caches.open('test-cache').then(function(cache) {
cache.add(new Request('/page/1', { /* 请求参数 */ }));
});
//跟add()方法很相似，put()方法也可以添加请求地址，同时添加它的响应数据：
fetch('/page/1').then(function(response) {
return caches.open('test-cache').then(function(cache) {
return cache.put('/page/1', response);
});
});
访问缓存数据
访问和检索缓存中的数据是验证缓存效果的关键步骤。
要查看已缓存的请求数据，可以使用cache对象提供的keys()方法，该方法将返回一个包含所有缓存Request对象的数组。
caches.open('test-cache').then(function(cache) {
cache.keys().then(function(cachedRequests) {
console.log(cachedRequests); // [Request, Request]
});
});
/*
Request {
bodyUsed: false
credentials: "omit"
headers: Headers
integrity: ""
method: "GET"
mode: "no-cors"
redirect: "follow"
referrer: ""
url: "http://www.webhek.com/images/logo.png"
}
*/
如果需要查看缓存中Request请求的具体响应内容，可以使用cache.match()或cache.matchAll()方法：
caches.open('test-cache').then(function(cache) {
cache.match('/page/1').then(function(matchedResponse) {
console.log(matchedResponse);
});
});
/*
Response {
body: (...),
bodyUsed: false,
headers: Headers,
ok: true,
status: 200,
statusText: "OK",
type: "basic",
url: "https://www.webhek.com/page/1"
}
*/
关于Response对象的详细用法和属性信息，建议参考fetch API的相关文档。
删除缓存数据
从缓存中删除数据对于保持缓存最新至关重要。
要从缓存中删除特定数据，可以使用cache对象提供的delete()方法：
caches.open('test-cache').then(function(cache) {
cache.delete('/page/1');
});执行上述操作后，缓存中将不再包含/page/1的请求数据。
获取缓存名称与删除缓存对象
获取现有缓存列表中所有缓存的名称是管理多个缓存的基础。
要获取当前浏览器中已存在的缓存数据名称列表，需要调用caches.keys()方法：
caches.keys().then(function(cacheKeys) {
console.log(cacheKeys); // ex: ["test-cache"]
});window.caches.keys()同样返回一个Promise对象，解析后得到缓存名称数组。
删除整个缓存对象只需知道该缓存的键名即可。
删除特定缓存对象的方法如下：
caches.delete('test-cache').then(function() {
console.log('Cache successfully deleted!');
});当需要大量删除旧版缓存数据时，可以采用批量处理策略。
// 假设`CACHE_NAME`是新的缓存的名称
// 现在清除旧的缓存
var CACHE_NAME = 'version-8';
// ...
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if(cacheName != CACHE_NAME) {
return caches.delete(cacheName);
}
})
);
});
掌握上述代码片段有助于成为Service Worker专家。目前，Firefox和Chrome浏览器均已支持Service Worker，预计未来将有更多网站和应用采用此缓存技术以提升运行速度和离线体验。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
tween.js 内存泄漏预防：怎么正确停止动画与清理对象
2026-11-05 15:52:56
Vue或React项目中为何不建议直接使用JS刷新页面
2026-11-05 13:57:30
哪里可以找到高质量的免费JS脚本资源？
2026-11-05 13:15:03
JS数组对象怎么根据指定ID字段去重
2026-11-04 21:41:10
JS数组去重方法性能对比：Set、Map与Filter谁更快
2026-11-04 16:14:15