HTML5的Cache API怎么用？如何管理离线资源？
HTML5的Cache API是构建PWA（渐进式Web应用）和实现网页离线访问的核心技术之一。它通常与Service Worker结合使用，允许开发者对网络请求响应进行精细的缓存控制。本文将详细介绍Cache API的基本用法以及如何有效地管理离线资源。
一、检查浏览器支持与基本概念
在使用Cache API之前，首先需要确保当前浏览器支持它。Cache API主要通过caches全局对象来访问，且必须在安全源（HTTPS或localhost）下运行。
if ('caches' in window) {
console.log('当前浏览器支持Cache API');
} else {
console.log('当前浏览器不支持Cache API');
}Cache API的核心对象是CacheStorage和Cache。CacheStorage用于管理所有的缓存空间，而Cache则是具体的缓存对象，用来存储请求与响应的键值对。
二、Cache API的核心操作
1. 打开缓存空间
使用caches.open()方法打开一个指定名称的缓存空间，如果该缓存不存在，则会自动创建。
caches.open('my-cache-v1').then(function(cache) {
console.log('缓存空间已打开', cache);
});2. 添加资源到缓存
将资源加入缓存有三种常用方法：add()、addAll()和put()。
caches.open('my-cache-v1').then(function(cache) {
// 方法1：cache.add() - 抓取URL并将响应存入缓存
cache.add('/index.html');
// 方法2：cache.addAll() - 抓取一组URL并存入缓存（通常用于预缓存核心资源）
cache.addAll([
'/css/style.css',
'/js/main.js',
'/logo.png'
]);
// 方法3：cache.put() - 手动将请求和响应存入缓存，最灵活
fetch('https://www.ipipp.com/api/data').then(function(response) {
return caches.open('api-cache').then(function(cache) {
// 注意：Response对象只能被读取一次，因此需要clone
cache.put('https://www.ipipp.com/api/data', response.clone());
return response;
});
});
});3. 匹配与读取缓存
可以通过cache.match()在特定缓存中查找，或通过caches.match()在所有缓存中全局查找。
// 在特定缓存中查找
caches.open('my-cache-v1').then(function(cache) {
cache.match('/index.html').then(function(response) {
if (response) {
console.log('在my-cache-v1中找到缓存:', response);
} else {
console.log('缓存未命中');
}
});
});
// 在所有缓存中全局查找
caches.match('/index.html').then(function(response) {
if (response) {
console.log('全局查找到缓存:', response);
}
});4. 删除缓存资源
管理离线资源不可避免地需要清理过期缓存。可以删除单个缓存条目或删除整个缓存空间。
// 删除某个缓存下的特定资源
caches.open('my-cache-v1').then(function(cache) {
cache.delete('/old-script.js').then(function(isDeleted) {
console.log('资源删除' + (isDeleted ? '成功' : '失败'));
});
});
// 删除整个缓存空间
caches.delete('my-cache-v1').then(function(isDeleted) {
if (isDeleted) {
console.log('my-cache-v1 已被彻底删除');
}
});三、结合Service Worker管理离线资源实战
Cache API的真正威力在于与Service Worker配合。Service Worker可以拦截页面的网络请求，从而实现各种离线缓存策略。以下是经典的“缓存优先，网络兜底”策略的完整实现：
const CACHE_NAME = 'offline-cache-v2';
const OFFLINE_URLS = [
'/',
'/index.html',
'/css/style.css',
'/js/main.js'
];
// 1. Install事件：预缓存核心离线资源
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(OFFLINE_URLS))
.then(() => self.skipWaiting()) // 强制等待中的Service Worker激活
);
});
// 2. Activate事件：清理旧版本缓存
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(name => {
// 如果缓存名称不是当前版本，则删除
if (name !== CACHE_NAME) {
return caches.delete(name);
}
})
);
})
);
});
// 3. Fetch事件：拦截请求，缓存优先策略
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
// 如果有缓存则返回缓存，否则发起网络请求
return response || fetch(event.request);
})
);
});四、离线资源管理最佳实践
1. 缓存版本控制
每次更新网站时，静态资源的文件名或内容可能会改变。建议使用版本号（如my-cache-v1、my-cache-v2）命名缓存。在Service Worker的activate事件中删除旧版本缓存，确保用户始终获取最新资源。
2. 合理选择缓存策略
Cache First（缓存优先）：适用于不常变动的静态资源（CSS、JS、字体、图片），响应速度快，可完美支持离线。
Network First（网络优先）：适用于经常变动的数据（API请求、HTML文档），保证数据最新，网络断开时再降级读取缓存。
Stale While Revalidate（先用缓存，后台更新）：快速响应缓存内容，同时在后台发起网络请求更新缓存，兼顾速度与新鲜度。
3. 避免缓存带状态请求
对于包含用户身份信息的API请求（如携带特定Token的请求），应当谨慎缓存，避免将A用户的私密数据通过缓存暴露给B用户。针对此类请求，建议仅缓存通用的公开GET请求。
总结
HTML5的Cache API赋予了Web应用强大的离线能力。通过caches.open、add、match和delete等方法，配合Service Worker的生命周期管理，开发者可以像管理本地数据库一样管理网络请求缓存。遵循版本控制和合理缓存策略的最佳实践，将帮助您构建出体验流畅、稳定可靠的离线Web应用。