安装阶段需一次性缓存HTML及其所有直接依赖资源，使用caches.open()和cache.addAll()原子操作预加载绝对路径资源列表，并用event.waitUntil()包裹，确保Service Worker在HTTPS或localhost下注册成功。
在安装阶段缓存核心静态资源，关键是把 HTML 页面及其所有直接依赖（CSS、JS、关键图片、图标等）一次性、完整地写入缓存。这一步不是“缓存当前页”，而是主动 fetch 并存储一组明确路径的资源——漏一个 404，整个缓存操作就失败，什么都不会存进去。
必须确保环境与注册合规
缓存动作的前提是 Service Worker 成功注册并进入 install 阶段：
- 页面必须运行在 HTTPS 或 http://localhost 下；http://127.0.0.1、自定义域名或 file:// 协议均不支持，且静默失败
- 注册代码要放在
window.addEventListener('load', ...)中，不能写在 DOMContentLoaded 或模块异步加载里 - sw.js 路径必须以 / 开头，例如
navigator.serviceWorker.register('/sw.js')；相对路径如 'sw.js' 会 404 - 访问
/sw.js必须返回 200 状态码和合法 JS 内容，且响应头不能含Cache-Control: no-store
install 事件中预缓存资源的正确写法
核心是调用 caches.open() 创建带版本号的缓存空间，并用 cache.addAll() 批量加载——它是个原子操作，任一资源 fetch 失败（404、CORS、MIME 类型错误、响应头禁止缓存），全部回滚。
- 所有路径必须为绝对路径（以 / 开头），例如
['/', '/index.html', '/style.css', '/app.js', '/images/logo.png']；['index.html']是相对路径，大概率失败 -
event.waitUntil()必须包裹整个缓存逻辑，防止安装过程被中断 - 首页 HTML（
'/'）必须包含在列表中，且它所引用的每个资源（比如 link 的 CSS、script 的 JS、img 的 logo）都得显式列出，否则离线打开时可能白屏或样式错乱
常见易错点与建议
很多缓存失败不是代码写错，而是资源链不完整或路径不严谨：
立即学习“前端免费学习笔记（深入）”；
- 检查
/返回的 HTML 是否真能被浏览器正常解析；如果后端重定向或返回非 200，cache.addAll()就会失败 - 图标（favicon.ico）、manifest.json、关键字体文件（如 /fonts/xxx.woff2）也属于“核心静态资源”，若页面依赖它们，就得加进缓存列表
- 缓存名建议带版本号，如
'v1'或'static-v202610'，方便后续 activate 阶段清理旧缓存 - 首次访问不会触发新 SW 生效，需刷新一次页面，让新 Worker 完成 install → waiting → activate 流程
一个最小可用示例
在 sw.js 中：
const CACHE_NAME = 'static-v1';
const urlsToCache = [
'/',
'/index.html',
'/style.css',
'/app.js',
'/images/logo.png'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
.catch(err => console.error('缓存失败:', err))
);
});
这段代码只做一件事：安装时，把列表里的资源全部 fetch 并存入名为 static-v1 的缓存空间。成功后，这些资源就能在离线状态下被 fetch 事件命中并返回。
