在 Service Worker 的 fetch 事件中，我们往往会从本地缓存中构建请求结果从而加速响应，然而有些时候我们又需要通过网络请求获取最新的数据，那么如何决定缓存的使用时机呢？本章将介绍一些常见的请求策略，以便大家能够更容易地控制缓存的使用时机。
# 常见策略
# 缓存优先
首先从缓存中进行匹配，如果存在相关请求的响应，返回该响应，否则通过网络获取。基本实现如下：
async function fetchFromNetwork(event) {
const response = await fetch(event.request);
if (response) {
const cloneResponse = response.clone();
event.waitUntil((async () => {
const cache = await caches.open('cache-name');
await cache.put(event.request, cloneResponse);
})());
}
return response;
}
self.addEventListener('fetch', event => {
if (request.method.toLowerCase() === 'get') {
event.respondWith((async () => {
const cachedResponse = await caches.match(event.request);
if (cachedResponse) {
return cachedResponse;
}
return await fetchFromNetwork(event);
})());
}
});
@前端进阶之旅: 代码已经复制到剪贴板
该策略主要适用于请求资源不经常变更的情况，比如：Shell 文件、图片、脚本等。
# 网络优先
首先通过网络获取，如果请求异常，则从缓存中获取。基本实现如下：
self.addEventListener('fetch', event => {
if (request.method.toLowerCase() === 'get') {
event.respondWith((async () => {
try {
return await fetchFromNetwork(event);
} catch {
return await caches.match(event.request);
}
})());
}
});
