如何用 install 事件在 Service Worker 中预缓存静态资源文件-js教程-PHP中文网

service worker 的 install 事件用于预缓存静态资源，需用 event.waituntil() 和版本化缓存名（如 static-v1），只缓存稳定资源，避免硬编码哈希文件；推荐逐个 fetch+put 替代 addall() 提升健壮性，并遵守同源与 https 限制。

如何用 install 事件在 service worker 中预缓存静态资源文件

在 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），方便后续更新时清理旧缓存。