HTML 应用缓存

使用 Service Workers 构建离线 Web 应用（替代 AppCache）

Service Workers 提供了一种现代方式来为 Web 应用实现离线体验，它取代了已废弃的 Application Cache。

什么是 Service Workers？

Service Worker 是浏览器在后台独立于网页运行的脚本，它使得无需网页或用户交互即可实现某些功能。

主要功能包括：

• 离线能力：拦截网络请求并在离线时提供缓存的响应。
• 后台同步：将操作推迟到用户网络连接稳定时再执行。
• 推送通知：即使应用未打开也能向用户发送通知。
• 性能提升：主动缓存资源以加快加载时间。

	注意：HTML5 早期版本中描述的 Application Cache (AppCache) 现已废弃，不应再使用。Service Workers 是实现离线能力的推荐技术。

浏览器支持

所有主流现代浏览器，包括 Chrome、Firefox、Safari、Edge 和 Opera，都支持 Service Workers。Internet Explorer 不支持 Service Workers。

Service Workers 如何实现离线使用

Service Worker 充当 Web 应用、浏览器和网络之间的代理服务器。它们拦截网络请求并决定如何响应——可以从缓存中提供、从网络获取，或者构造自定义响应。

典型的离线设置包括：

1. 注册 Service Worker：你的主 JavaScript 文件会告诉浏览器注册一个 Service Worker 脚本。
2. 安装 (Installation)：Service Worker 首次运行时会触发 install 事件。这通常是你缓存必要资源（HTML、CSS、JS、图片）的地方。
3. 激活 (Activation)：安装完成后，Service Worker 被激活，接管其作用域内的页面。
4. Fetch 事件处理：当浏览器请求资源（例如图片、CSS 文件，甚至是页面导航）时，Service Worker 的 fetch 事件监听器会拦截它。该监听器可以检查资源是否在缓存中，如果在离线时直接从缓存提供；否则尝试从网络获取。

概念示例：注册 Service Worker

在你的主应用 JavaScript 中：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('Service Worker registered with scope:', registration.scope);
    }).catch(error => {
      console.log('Service Worker registration failed:', error);
    });
}

概念示例：sw.js 中的基本缓存（Service Worker 脚本）

const CACHE_NAME = 'my-app-cache-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/scripts/main.js',
  '/images/logo.png'
];

self.addEventListener('install', event => {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // Cache hit - return response
        if (response) {
          return response;
        }
        // Not in cache - fetch from network
        return fetch(event.request);
      }
    )
  );
});

	这是一个简化示例。实际的 Service Workers 通常涉及更复杂的缓存策略、缓存版本控制和更新处理。有关详细指南，请参考 MDN Web 文档或 web.dev 等资源。

更新缓存

使用 Service Workers 更新缓存的资源涉及：

• 更新 Service Worker 脚本：即使是很小的改动（比如添加注释）也会触发浏览器的更新流程。
• 创建新的缓存：通常在新的 Service Worker 的 install 事件中，你会创建一个新的缓存（例如 my-app-cache-v2）并填充它。
• 清理旧缓存：在新的 Service Worker 的 activate 事件中，你会移除过时的缓存。

这确保一旦新的 Service Worker 激活，用户就能获得最新的资源。