什么是 PWA
PWA 是 Progressive Web App（渐进式 Web 应用）的缩写，是一种提高 Web 应用体验的技术方案。PWA 的目标是让 Web 应用更像原生应用，具有离线访问、快速加载和推送通知等功能，从而提升用户体验。
PWA 的客户端缓存策略
PWA 的客户端缓存策略是其实现离线访问的核心机制。当用户访问一个 PWA 应用时，浏览器会将 PWA 应用的资源缓存到本地，这样即使用户处于离线状态，也能访问已经缓存的资源。
PWA 的客户端缓存策略主要有两种方式：
静态资源缓存
静态资源包括 HTML、CSS、JavaScript、图片等文件。这些文件的更新不频繁，所以可以通过“版本号缓存”（Versioned Caching）的方式来实现缓存。
Versioned Caching 是指在请求静态资源时，将该资源的版本号添加到 URL 地址中，如：
<link rel="stylesheet" href="/style.css?version=v1">
这样当静态资源更新时，只需要修改版本号，就可以让浏览器重新下载资源，从而实现缓存的更新。
动态数据缓存
动态数据是指用户交互产生的信息、网络请求返回的数据等。这些数据的更新频率较高，所以不能使用 Versioned Caching 的方式进行缓存。
使用动态数据缓存的策略通常要求使用 Service Worker。Service Worker 是一种运行在浏览器背后的 JavaScript 线程，负责拦截网络请求并决定返回缓存还是从网络获取数据。这样就可以实现离线访问和快速加载的效果。
以下是一个使用 Service Worker 实现动态数据缓存的示例代码：
// www.javascriptcn.com code example
// 注册 Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(registration => {
console.log('Service Worker 注册成功：', registration.scope)
})
.catch(error => {
console.log('Service Worker 注册失败：', error)
})
}
// 缓存数据
self.addEventListener('fetch', event => {
// 如果是 GET 请求，尝试从缓存中获取数据
if (event.request.method === 'GET') {
event.respondWith(
// 使用 Cache API 查询缓存
caches.match(event.request)
.then(response => {
if (response) {
// 如果缓存中有数据，直接返回缓存数据
console.log(`[${event.request.url}] 使用缓存数据：`, response)
return response
} else {
// 如果缓存中没有数据，从网络获取数据
console.log(`[${event.request.url}] 使用网络数据`)
return fetch(event.request)
.then(response => {
if (response.status === 200) {
// 将获取到的数据缓存到 Cache API 中
caches.open('my-cache')
.then(cache => {
cache.put(event.request, response.clone())
console.log(`[${event.request.url}] 缓存数据成功`)
})
}
return response
})
}
})
)
}
})小结
PWA 的客户端缓存策略可以实现离线访问和快速加载的效果，提升用户体验。在实践中，需要根据应用的情况选择不同的缓存策略，并使用 Service Worker 实现动态数据缓存。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cfaca9e46428fe9eb77bc7