manifest属性已彻底废弃，离线降级必须依赖service worker的fetch事件：先匹配缓存，失败后请求网络，再捕获异常fallback至预缓存的/offline.html，且该页须自包含所有资源，首次访问无法触发降级。
manifest 属性写在 html> 标签里根本没用
你加了 manifest="cache.appcache"，浏览器不会报错，也不会缓存任何东西——Chrome 95+、Firefox 95+、Safari 16.4+ 已彻底删除该逻辑，连请求都不会发出去。DevTools 的 Application 面板里“Manifest”选项卡早已消失，window.applicationCache 返回 undefined。这不是配置漏了 MIME 类型或路径写错的问题，是底层代码被删干净了。
离线降级必须靠 Service Worker 的 fetch 事件兜底
真正能控制“请求失败时返回什么”的，只有 fetch 事件监听器。它不依赖 manifest，也不需要声明式清单，而是运行时动态判断：
- 先尝试匹配缓存：
caches.match(event.request)，命中就直接返回 - 没命中就发网络请求：
fetch(event.request) - 网络失败时，手动 fallback 到
/offline.html或其他静态降级页
示例关键逻辑（写在 sw.js 中）：
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request)
.catch(() => caches.match('/offline.html'))
)
);
});
注意：/offline.html 必须提前预缓存在 install 阶段，否则 fallback 也会失败。
offline.html 要能独立加载，不能依赖外部资源
这个降级页本身必须是“缓存闭环”的：它引用的所有 CSS、JS、图片，都得列进 urlsToCache，否则离线时会白屏或样式错乱。
- 避免在
offline.html里写<script src="/js/app.js"></script>—— 如果/js/app.js没进缓存，脚本就加载失败 - 推荐内联关键 CSS 和 JS，或只引用已明确预缓存的资源路径
- 路径必须和
sw.js中cache.addAll()里的完全一致（包括大小写、后缀、相对位置）
首次访问无法触发离线降级，这是设计使然
Service Worker 注册后，第一次访问页面时 SW 还没激活，所有请求走网络；只有第二次刷新（或关闭再打开）才可能触发缓存逻辑。这意味着：
- 用户第一次断网访问，
offline.html不会生效——页面直接报net::ERR_INTERNET_DISCONNECTED - 没法让“首屏就离线可用”，只能保证“二次访问后具备降级能力”
- 如果强需求首屏离线，得配合服务器端渲染（SSR）或静态生成（SSG），把降级页内容直接塞进 HTML 响应体
别指望靠一行 manifest 属性或 meta 标签绕过这个限制。能做的，就是确保 sw.js 正确注册、缓存完整、fallback 路径真实存在且自包含。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
