ServiceWorkerinstall事件预缓存教程

本文深入讲解了如何利用 Service Worker 的 install 事件安全、可靠地预缓存关键静态资源，强调通过 event.waitUntil() 确保安装流程完整性，采用带版本号的缓存名（如 static-v1）实现平滑更新，并推荐逐个 fetch + put 替代脆弱的 addAll() 以提升容错能力；同时明确指出仅应缓存稳定不变的核心资产（如首页、主样式、核心脚本和图标），严格遵守同源与 HTTPS 要求，为构建真正健壮的离线优先 Web 应用打下坚实基础。

在 Service Worker 中用 install 事件预缓存静态资源，核心是“安装时就把关键文件存进 Cache Storage”，确保后续离线也能加载。这一步不涉及网络请求拦截，只做一次性资源准备，必须配合 event.waitUntil() 和缓存版本管理，否则容易失败或缓存混乱。

明确要缓存的资源列表

只缓存真正需要离线可用、且长期稳定不变的文件，比如：

• 首页 HTML（/ 或 /index.html）
• 主样式表（/styles/main.css）
• 核心 JS 脚本（/scripts/app.js）
• 图标、Logo 等关键图片（/images/logo.png）
• 字体文件（如 /fonts/inter.woff2）

避免把带时间戳、哈希变动的资源（如 /app.a1b2c3.js）硬编码进去——应确保构建流程生成固定路径，或改用运行时动态缓存。

在 install 事件中打开缓存并添加资源

使用 caches.open() 创建命名缓存，再用 cache.addAll() 批量写入。注意：这个方法是原子操作，任一文件 404 或跨域失败，整个 install 就会中止。

const CACHE_NAME = 'static-v1';
const PRECACHE_URLS = [
  '/',
  '/index.html',
  '/styles/main.css',
  '/scripts/app.js',
  '/images/logo.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(PRECACHE_URLS))
      .then(() => self.skipWaiting()) // 可选：跳过 waiting 状态，让新 SW 立即激活
  );
});

推荐给缓存名加版本号（如 static-v1），方便后续更新时清理旧缓存。

增强健壮性：避免 addAll 失败

生产环境不建议直接用 addAll()，尤其当资源来自第三方或路径可能临时不可达时。更稳妥的做法是逐个 fetch + put：

• 对每个 URL 调用 fetch()，捕获错误后跳过单个失败项
• 成功响应用 response.clone() 写入缓存，避免流被消耗
• 仍需包裹在 event.waitUntil() 中，保证 install 完整完成

注意作用域与 HTTPS 限制

Service Worker 只能在 HTTPS 或 localhost 下注册；缓存资源必须同源（协议、域名、端口一致），跨域请求即使能 fetch 到，也无法存入 Cache API，除非服务端明确返回 Access-Control-Allow-Origin 头。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~