现代离线Web应用采用Service Worker结合Cache API实现资源缓存，通过Workbox简化开发并使用IndexedDB进行数据持久化，形成稳定可控的离线架构。
随着浏览器逐步弃用AppCache，开发者需要更可靠的技术来实现离线功能。目前主流的替代方案是使用Service Worker结合Cache API，它提供了更细粒度的控制和更强的灵活性。
Service Worker + Cache API
Service Worker 是运行在浏览器后台的脚本，能够拦截网络请求并管理缓存。配合 Cache API，可以精确控制哪些资源被缓存、何时更新以及如何响应请求。
主要优势包括：
- 精准控制缓存逻辑：可自定义请求拦截策略，比如优先从缓存读取、网络失败时回退到缓存等。
- 支持动态缓存：不仅能缓存初始资源，还能在运行时缓存用户访问的内容。
- 更新机制可控：通过监听 Service Worker 的 install 和 activate 事件，安全地更新缓存内容。
示例代码：
立即学习“Java免费学习笔记（深入）”；
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
}
在 sw.js 中：
const CACHE_NAME = 'v1';
const urlsToCache = [
'/',
'/styles/main.css',
'/script/app.js'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
return response || fetch(event.request);
})
);
});
使用 Workbox 简化开发
直接操作 Service Worker 和 Cache API 容易出错且代码冗长。Google 推出的 Workbox 是一套工具集，能大幅简化离线功能的实现。
特点包括：
- 预设缓存策略：如 StaleWhileRevalidate、NetworkFirst、CacheFirst 等，按需选择。
- 自动注入资源列表：通过构建工具（如 Webpack 插件）自动生成要缓存的文件清单。
- 支持后台同步与推送通知：扩展离线体验。
安装 Workbox：
npm install workbox-webpack-plugin --save-dev然后在构建配置中生成 sw.js 文件，运行时加载即可。
IndexedDB 配合离线数据存储
对于结构化数据（如用户数据、表单记录），建议使用 IndexedDB 存储。它可在离线状态下读写，并在恢复联网后同步至服务器。
常见模式：
- 使用 localStorage 临时标记待同步项。
- 在网络恢复时，遍历待处理数据并提交到后端。
- 成功后清除本地标记。
也可结合 Background Sync API 实现自动重试。
基本上就这些。现在标准做法是用 Service Worker 管理资源缓存，Workbox 提高开发效率，IndexedDB 处理数据持久化。这套组合稳定、可控，已成现代离线 Web 应用的基础架构。
