深入JavaScript_Service Worker缓存

Service Worker通过拦截网络请求实现离线访问与性能优化。首先注册sw.js脚本，经历install（预缓存）、activate（清理旧缓存）和fetch（响应请求）三阶段，利用Cache API（如caches.open、cache.put）管理资源缓存，提升弱网环境下的用户体验。

Service Worker 是现代 Web 应用实现离线访问和性能优化的核心技术之一。它本质上是一个运行在浏览器后台的脚本，独立于网页主线程，能够拦截网络请求并管理缓存策略。通过 JavaScript 控制缓存行为，开发者可以精细地控制资源加载方式，从而显著提升用户体验，尤其是在网络不稳定或离线场景下。

Service Worker 的基本机制

注册一个 Service Worker 是第一步。通常在主页面的 JavaScript 中调用 navigator.serviceWorker.register() 方法：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('SW registered:', reg))
    .catch(err => console.error('SW registration failed:', err));
}

注册后，浏览器会下载并安装指定的脚本文件（如 sw.js）。这个脚本需放在可访问路径下，且同源。Service Worker 生命周期包括安装（install）、激活（activate）和监听事件（fetch、sync 等）三个主要阶段。

Hot Tattoo AI

人工智能纹身生成器，提供独特的纹身创意

52

查看详情

在 install 阶段，可以预缓存关键资源；activate 阶段适合清理旧缓存；而 fetch 事件用于拦截请求并返回缓存或发起网络请求。

立即学习“Java免费学习笔记（深入）”；

使用 Cache API 进行资源缓存

Service Worker 提供了 Cache API，允许将请求-响应对存储在浏览器中。常用方法有 caches.open()、cache.put() 和

const CACHE_NAME = 'v1';
const PRECACHE_URLS = ['/index.html', '/style.css', '/app.js'];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(PRECACHE_URLS))
  );
});