Service Worker 的缓存机制是通过缓存 API 实现的，它允许开发者拦截和缓存 HTTP 请求，以提高离线体验和加速页面加载。以下是 Service Worker 缓存 HTTP 请求资源的基本流程和原理：
1. 注册 Service Worker
首先，Service Worker 需要在浏览器中注册。通常在主线程（如 JavaScript 入口文件）中进行注册：
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("/service-worker.js")
.then((registration) => {
console.log("Service Worker registered with scope:", registration.scope);
})
.catch((error) => {
console.error("Service Worker registration failed:", error);
});
}
2. 安装 Service Worker
在 Service Worker 脚本中，首先会触发 install 事件。在这个事件中，可以预缓存一些资源，以便在 Service Worker 激活后立即可用：
self.addEventListener("install", (event) => {
event.waitUntil(
caches.open("my-cache-v1").then((cache) => {
return cache.addAll([
"/",
"/styles/main.css",
"/scripts/main.js",
"/images/logo.png",
]);
}),
);
});
3. 激活 Service Worker
activate 事件在 Service Worker 安装完成后触发。可以在这个事件中进行缓存清理，删除旧的缓存：
self.addEventListener("activate", (event) => {
event.waitUntil(
caches.keys().then((cacheNames) => {
return Promise.all(
cacheNames
.filter((cacheName) => {
// 这里可以指定要删除的缓存
return cacheName !== "my-cache-v1";
})
.map((cacheName) => {
return caches.delete(cacheName);
}),
);
}),
);
});
4. 拦截和缓存请求
fetch 事件允许 Service Worker 拦截所有的网络请求。可以根据需要从缓存中返回资源，或将请求转发到网络：
self.addEventListener("fetch", (event) => {
event.respondWith(
caches
.match(event.request)
.then((cachedResponse) => {
// 如果缓存中有匹配的资源，直接返回
if (cachedResponse) {
return cachedResponse;
}
// 否则，发起网络请求
return fetch(event.request).then((response) => {
// 克隆响应对象，因为响应只能被消费一次
const responseClone = response.clone();
// 将网络请求的结果缓存
caches.open("my-cache-v1").then((cache) => {
cache.put(event.request, responseClone);
});
return response;
});
})
.catch(() => {
// 网络和缓存都失败的情况
return new Response("Oops, something went wrong.");
}),
);
});
5. 资源管理
- 缓存清理：定期删除过期或不再需要的缓存，保持缓存的健康状态。
- 缓存策略：可以实现不同的缓存策略，如缓存优先、网络优先、缓存和网络同时等。