嘿，哥们！咱们今天聊点有意思的——Service Worker 和 Cache API 的“双剑合璧”。你可能已经对 Service Worker 有点了解了，它就像你网站的“贴身保镖”，能在后台默默干活，比如拦截网络请求、推送通知等等。而 Cache API 呢，就是它手里的一把“宝刀”，专门用来缓存资源，让你的网站嗖嗖嗖地飞起来。
为什么 Service Worker 需要 Cache API？
想象一下，你访问一个网站，浏览器得先向服务器请求 HTML、CSS、JavaScript、图片等等。如果每次都得从服务器下载，那速度得多慢啊！特别是网络不好的时候，简直要让人抓狂。这时候，Service Worker 就可以用 Cache API 把这些资源“藏”起来，下次用户再访问的时候，就直接从缓存里拿，速度快到飞起！
Service Worker 就像一个“中间人”，它拦截了你的网络请求。当请求到来时，它首先会看看缓存里有没有对应的资源。如果有，就直接返回缓存里的资源，这样就省去了从服务器下载的时间。如果没有，就从服务器获取资源，然后把资源缓存起来，方便下次使用。
Cache API 的基本操作
Cache API 提供了一系列方法，让你对缓存进行精细的控制。接下来，咱们就一一揭秘这些方法，让你彻底掌握它们！
1. caches.open(cacheName)：打开或创建缓存
这个方法就像打开一个“百宝箱”，你要先给你的“百宝箱”起个名字，比如 “my-cache-v1”。如果这个名字的缓存已经存在，它就会直接打开；如果不存在，它就会创建一个新的缓存。
const cacheName = 'my-cache-v1';
caches.open(cacheName)
.then(cache => {
console.log('缓存已打开或创建:', cache);
// 接下来就可以用 cache 对象进行操作了
})
.catch(error => {
console.error('打开缓存失败:', error);
});
2. cache.add(request)：缓存单个资源
这个方法就像把一个宝贝放进“百宝箱”。你需要传入一个 Request 对象，或者一个资源的 URL。它会从服务器获取这个资源，然后把它添加到缓存中。
const cacheName = 'my-cache-v1';
const resourceURL = '/index.html';
caches.open(cacheName)
.then(cache => {
return cache.add(resourceURL);
})
.then(() => {
console.log('资源已缓存:', resourceURL);
})
.catch(error => {
console.error('缓存资源失败:', error);
});
3. cache.addAll(requests)：缓存多个资源
这个方法就像一次性把多个宝贝放进“百宝箱”。你需要传入一个 URL 数组，它会从服务器获取这些资源，然后把它们添加到缓存中。
const cacheName = 'my-cache-v1';
const resources = [
'/index.html',
'/style.css',
'/script.js'
];
caches.open(cacheName)
.then(cache => {
return cache.addAll(resources);
})
.then(() => {
console.log('多个资源已缓存:', resources);
})
.catch(error => {
console.error('缓存多个资源失败:', error);
});
4. cache.put(request, response)：缓存一个响应
这个方法更灵活，你可以自己控制缓存的内容。你需要传入一个 Request 对象和一个 Response 对象。这意味着你可以自己构造 Response，比如从服务器获取数据后，对数据进行处理，然后再缓存起来。
const cacheName = 'my-cache-v1';
const requestURL = '/api/data';
caches.open(cacheName)
.then(cache => {
return fetch(requestURL) // 从服务器获取数据
.then(response => {
// 可以对 response 进行处理
const processedResponse = response.clone(); // 克隆 response，避免影响后续使用
return cache.put(requestURL, processedResponse); // 缓存处理后的数据
});
})
.then(() => {
console.log('响应已缓存:', requestURL);
})
.catch(error => {
console.error('缓存响应失败:', error);
});
5. cache.match(request)：匹配缓存的资源
这个方法就像在“百宝箱”里找宝贝。你需要传入一个 Request 对象，或者一个资源的 URL。它会返回一个 Promise，如果找到了匹配的资源，Promise 就会 resolve 对应的 Response；如果没有找到，Promise 就会 resolve undefined。
const cacheName = 'my-cache-v1';
const requestURL = '/index.html';
caches.open(cacheName)
.then(cache => {
return cache.match(requestURL);
})
.then(response => {
if (response) {
console.log('从缓存中获取:', response);
// 可以直接使用 response
return response.text().then(text => {
console.log('缓存内容:', text);
});
} else {
console.log('未在缓存中找到:', requestURL);
}
})
.catch(error => {
console.error('匹配缓存失败:', error);
});
6. cache.delete(request)：删除缓存的资源
这个方法就像把一个宝贝从“百宝箱”里拿出来。你需要传入一个 Request 对象，或者一个资源的 URL。它会删除缓存中对应的资源。
const cacheName = 'my-cache-v1';
const requestURL = '/index.html';
caches.open(cacheName)
.then(cache => {
return cache.delete(requestURL);
})
.then(deleted => {
if (deleted) {
console.log('已删除缓存资源:', requestURL);
} else {
console.log('未找到要删除的缓存资源:', requestURL);
}
})
.catch(error => {
console.error('删除缓存失败:', error);
});
7. caches.delete(cacheName)：删除整个缓存
这个方法就像直接把整个“百宝箱”扔掉。你需要传入一个缓存的名字。它会删除对应的缓存。
const cacheName = 'my-cache-v1';
caches.delete(cacheName)
.then(() => {
console.log('已删除缓存:', cacheName);
})
.catch(error => {
console.error('删除缓存失败:', error);
});
8. caches.keys()：获取所有缓存的名称
这个方法可以让你查看当前浏览器中存在哪些缓存。它会返回一个 Promise，resolve 的是一个缓存名称的数组。
caches.keys()
.then(cacheNames => {
console.log('所有缓存:', cacheNames);
})
.catch(error => {
console.error('获取缓存名称失败:', error);
});
如何用 Service Worker 和 Cache API 实现更精细的缓存控制？
光会用 API 还是不够的，关键是要把它们用好，才能发挥出最大的威力。接下来，咱们就聊聊怎么用 Service Worker 和 Cache API 实现更精细的缓存控制。
1. 安装 Service Worker
首先，你需要在你的 HTML 文件中注册 Service Worker。
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(registration => {
console.log('Service Worker 注册成功:', registration);
})
.catch(error => {
console.log('Service Worker 注册失败:', error);
});
});
}
</script>
2. 编写 Service Worker 文件 (sw.js)
这是最核心的部分。在这个文件里，你要编写 Service Worker 的逻辑，包括拦截网络请求、使用 Cache API 缓存资源等等。
const cacheName = 'my-cache-v1';
const resourcesToCache = [
'/', // 缓存根目录
'/index.html',
'/style.css',
'/script.js',
'/images/logo.png' // 缓存图片
];
// 安装 Service Worker
self.addEventListener('install', event => {
console.log('Service Worker 安装中...');
event.waitUntil(
caches.open(cacheName)
.then(cache => {
console.log('缓存已打开');
return cache.addAll(resourcesToCache);
})
.then(() => self.skipWaiting()) // 强制激活 Service Worker
);
});
// 激活 Service Worker
self.addEventListener('activate', event => {
console.log('Service Worker 激活中...');
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheName !== cacheName) {
console.log('删除旧缓存:', cacheName);
return caches.delete(cacheName);
}
})
);
}).then(() => self.clients.claim()) // 立即接管页面
);
});
// 拦截网络请求
self.addEventListener('fetch', event => {
console.log('拦截到请求:', event.request.url);
event.respondWith(
caches.match(event.request)
.then(response => {
// 如果缓存中有，就直接返回缓存
if (response) {
console.log('从缓存中获取:', event.request.url);
return response;
}
// 如果缓存中没有，就从网络获取，并缓存起来
console.log('从网络获取:', event.request.url);
return fetch(event.request)
.then(response => {
// 确保 response 是有效的
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
// 克隆 response，因为 response 只能被使用一次
const responseToCache = response.clone();
caches.open(cacheName)
.then(cache => {
cache.put(event.request, responseToCache);
});
return response;
});
})
);
});
解释一下上面的代码：
install事件: 当 Service Worker 被安装时触发。在这个事件里，咱们打开缓存，然后把需要缓存的资源添加到缓存中。self.skipWaiting()强制 Service Worker 激活，caches.addAll()一次性缓存多个资源。activate事件: 当 Service Worker 被激活时触发。在这个事件里，咱们清理旧的缓存，只保留最新的缓存版本。self.clients.claim()立即接管页面，确保页面使用最新的 Service Worker。fetch事件: 这是 Service Worker 最核心的部分。当浏览器发起网络请求时，这个事件会被触发。咱们在这里拦截请求，先尝试从缓存中获取资源。如果缓存中有，就直接返回缓存。如果缓存中没有，就从网络获取，然后把资源缓存起来，方便下次使用。
3. 缓存策略
缓存策略是决定 Service Worker 如何处理请求的关键。常用的缓存策略有以下几种：
- 缓存优先 (Cache First): 优先从缓存中获取资源，如果缓存中没有，再从网络获取。这是最常用的策略，适用于静态资源，比如 HTML、CSS、JavaScript、图片等等。上面例子里的
fetch事件就使用了这种策略。 - 网络优先 (Network First): 优先从网络获取资源，如果网络请求失败，再从缓存中获取。这种策略适用于对数据实时性要求比较高的资源，比如 API 数据。
- 网络同时 (Network Only): 总是从网络获取资源，不使用缓存。这种策略适用于对数据实时性要求非常高的资源，比如用户登录信息。
- 缓存并更新 (Cache, then network): 先从缓存中获取资源，同时从网络获取最新的资源，并在后台更新缓存。这种策略适用于可以容忍短暂的“旧”数据的情况，比如文章内容。
- 仅缓存 (Cache Only): 只从缓存中获取资源，不从网络获取。这种策略适用于离线应用，或者对某些资源强制使用缓存的情况。
示例：网络优先策略
self.addEventListener('fetch', event => {
event.respondWith(
fetch(event.request)
.then(response => {
// 如果网络请求成功，就缓存起来
if (response && response.status === 200) {
const responseToCache = response.clone();
caches.open(cacheName)
.then(cache => {
cache.put(event.request, responseToCache);
});
return response;
}
// 如果网络请求失败，就从缓存中获取
return caches.match(event.request);
})
.catch(() => {
// 网络请求失败，从缓存中获取
return caches.match(event.request);
})
);
});
4. 缓存更新
缓存里的资源不是一成不变的，当服务器上的资源发生变化时，你需要更新缓存。常见的更新策略有：
- 版本控制: 每次更新资源时，修改缓存的名称（比如
my-cache-v2）。当 Service Worker 被激活时，清理旧的缓存。 - 后台更新: 在
fetch事件中，同时从网络获取最新的资源，并在后台更新缓存。 - 手动更新: 通过用户操作或者定时任务，手动更新缓存。
示例：版本控制
const cacheName = 'my-cache-v2'; // 缓存版本号
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheName !== cacheName) {
console.log('删除旧缓存:', cacheName);
return caches.delete(cacheName);
}
})
);
})
);
});
5. 缓存控制的注意事项
- 跨域资源: 如果你的网站使用了跨域资源，需要在服务器端配置
Access-Control-Allow-Origin头部，允许 Service Worker 访问这些资源。 - 缓存大小: 浏览器对缓存大小有限制。你可以使用
navigator.storage.estimate()方法来估算缓存的使用情况。 - 缓存清理: 定期清理旧的缓存，释放存储空间。
- 调试: 使用浏览器的开发者工具，可以查看 Service Worker 的状态、缓存的内容、网络请求等等，方便调试。
总结
Service Worker 和 Cache API 是一对强大的组合，它们可以帮助你构建更快的、更可靠的 Web 应用。通过合理地使用缓存策略和缓存更新，你可以极大地提升用户体验。当然，这需要你对它们有深入的理解和实践。希望今天的分享能帮助你更好地掌握 Service Worker 和 Cache API，打造出更优秀的 Web 应用！加油！
希望你能通过这篇文章，对 Service Worker 和 Cache API 有更深入的了解。 记住，多实践，多思考，才能真正掌握它们！
