JavaScript离线应用_AppCache替代方案

现代离线Web应用采用Service Worker结合Cache API实现资源缓存，通过Workbox简化开发并使用IndexedDB进行数据持久化，形成稳定可控的离线架构。

随着浏览器逐步弃用AppCache，开发者需要更可靠的技术来实现离线功能。目前主流的替代方案是使用Service Worker结合Cache API，它提供了更细粒度的控制和更强的灵活性。

Service Worker + Cache API

Service Worker 是运行在浏览器后台的脚本，能够拦截网络请求并管理缓存。配合 Cache API，可以精确控制哪些资源被缓存、何时更新以及如何响应请求。

主要优势包括：

• 精准控制缓存逻辑：可自定义请求拦截策略，比如优先从缓存读取、网络失败时回退到缓存等。
• 支持动态缓存：不仅能缓存初始资源，还能在运行时缓存用户访问的内容。
• 更新机制可控：通过监听 Service Worker 的 install 和 activate 事件，安全地更新缓存内容。

示例代码：

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：

然后在构建配置中生成 sw.js 文件，运行时加载即可。

IndexedDB 配合离线数据存储

对于结构化数据（如用户数据、表单记录），建议使用 IndexedDB 存储。它可在离线状态下读写，并在恢复联网后同步至服务器。

常见模式：

• 使用 localStorage 临时标记待同步项。
• 在网络恢复时，遍历待处理数据并提交到后端。
• 成功后清除本地标记。

也可结合 Background Sync API 实现自动重试。