共计 2535 个字符，预计需要花费 7 分钟才能阅读完成。

优化你的 PWA：掌握 Service Worker 中 API 请求缓存与过期策略

Progressive Web Apps（PWA）作为一种新兴的 Web 应用形态，以其接近原生应用的性能和用户体验，受到了越来越多开发者的青睐。Service Worker 作为 PWA 的核心技术之一，通过在后台独立于网页运行脚本，提供了诸如离线缓存、消息推送等功能，极大地提升了 Web 应用的用户体验。然而，要充分发挥 Service Worker 的潜力，尤其是在 API 请求缓存与过期策略方面，需要深入理解和巧妙运用。本文将探讨如何优化你的 PWA，通过掌握 Service Worker 中的 API 请求缓存与过期策略，提升应用的性能和可靠性。

Service Worker 简介

Service Worker 是一种运行在浏览器背后的脚本，独立于网页，为开发者提供了对网络请求、消息推送、后台同步等功能的高度控制。它通过拦截和处理网络请求，允许开发者自定义缓存策略，从而实现离线访问、加快加载速度等效果。

API 请求缓存策略

在 PWA 中，对于 API 请求的缓存策略至关重要。合理的缓存策略可以减少网络请求，提高页面加载速度，同时保证数据的实时性。Service Worker 提供了两种主要的缓存策略：预缓存（pre-caching）和运行时缓存（runtime caching）。

预缓存

预缓存是在应用安装阶段，将一系列资源（如 HTML、CSS、JavaScript 文件等）缓存到本地。这样，即使在离线状态下，用户也能访问这些资源。预缓存的资源通常是不经常变化的，如应用的静态文件。

要实现预缓存，可以在 Service Worker 的安装事件中，使用 cache.addAll() 方法将资源列表添加到缓存中。例如：

javascript
self.addEventListener('install', event => {
event.waitUntil(
caches.open('my-cache-name')
.then(cache => {
return cache.addAll([
'/',
'/styles/main.css',
'/scripts/main.js'
]);
})
);
});

运行时缓存

运行时缓存是在应用运行过程中，动态地将网络请求的结果缓存起来。这种策略适用于那些经常变化的数据，如 API 请求的结果。运行时缓存可以通过监听 fetch 事件来实现。

例如，我们可以缓存所有来自 API 的响应，并设置一个过期时间：

javascript
self.addEventListener('fetch', event => {
if (event.request.url.includes('/api/')) {
event.respondWith(
caches.open('api-cache')
.then(cache => {
return fetch(event.request)
.then(response => {
cache.put(event.request, response.clone());
return response;
})
.catch(() => caches.match(event.request));
})
);
}
});

在上面的代码中，我们首先检查请求的 URL 是否包含/api/，如果是，则尝试从网络获取数据。获取成功后，我们将响应的克隆版本存储到缓存中。如果网络请求失败，我们则从缓存中返回数据。

过期策略

虽然缓存可以显著提高应用的性能，但过期的缓存数据可能会导致用户看到旧的信息。因此，制定合理的过期策略至关重要。Service Worker 本身并不提供直接的缓存过期机制，但我们可以通过一些策略来实现。

定期更新缓存

一种简单的策略是定期更新缓存。例如，我们可以设置一个定时器，每隔一段时间就清除旧的缓存并重新获取最新的数据。

javascript
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheName !== 'my-cache-name') {
return caches.delete(cacheName);
}
})
);
})
);
});

在上面的代码中，我们在 Service Worker 的激活事件中，删除了所有不是 my-cache-name 的缓存。这样，每次 Service Worker 更新时，旧的缓存就会被清除。

使用 Cache API 的过期机制

虽然 Service Worker 本身不提供缓存过期机制，但我们可以利用 Cache API 的一些特性来实现。例如，我们可以在存储缓存时，将过期时间作为元数据一起存储，然后在读取缓存时检查这个时间。

javascript
self.addEventListener('fetch', event => {
event.respondWith(
caches.open('api-cache')
.then(cache => {
return cache.match(event.request).then(response => {
if (response) {
const expiration = response.headers.get('expiration');
if (expiration && Date.now() > expiration) {
cache.delete(event.request);
return fetch(event.request);
}
return response;
}
return fetch(event.request).then(response => {
response.headers.append('expiration', Date.now() + (24 * 60 * 60 * 1000)); // 设置过期时间为 1 天后
cache.put(event.request, response.clone());
return response;
});
});
})
);
});

在上面的代码中，我们在缓存 API 响应时，添加了一个自定义的 expiration 头部，表示缓