manifest机制在2026年已完全失效，因浏览器底层移除application cache实现，chrome 94+、firefox 85+、safari 16.4+均不再解析manifest属性，window.applicationcache返回undefined，service worker是唯一替代方案，需https或localhost环境、正确注册时机及fetch事件中主动缓存控制。
Manifest机制在2026年已完全失效，无法用于弱网或离线访问——不是配置不到位，而是浏览器底层已移除全部实现。你调不通它，不是因为路径写错、MIME没配对，而是html manifest属性本身已被跳过解析，连请求都不会发出去。
Chrome/Firefox/Safari 已静默删除 Application Cache 支持
Chrome 94+、Firefox 85+、Safari 16.4+ 均不再识别manifest属性：开发者工具 Application 面板里“Manifest”选项卡彻底消失；window.applicationCache返回undefined；即使服务器正确返回Content-Type: text/cache-manifest，浏览器也直接忽略文件内容。这不是兼容性问题，是标准废弃 + 代码删除。
- 试图通过改
.htaccess加AddType text/cache-manifest .appcache来“修复”，只会让日志多一条无意义响应 -
CACHE:、NETWORK:、FALLBACK:这些节标题现在纯属文本，不会触发任何缓存行为 - 本地用
file://协议打开页面时看到的“缓存生效”，只是浏览器从历史记录或内存中恢复，不是 AppCache 在工作
Service Worker 是唯一可落地的替代方案
必须用sw.js配合caches API 实现可控缓存，且有三个不可绕过的前提：
- 页面必须通过
https://或http://localhost提供（file://协议注册会失败） -
navigator.serviceWorker.register()必须在load事件后执行，且不能放在type="module"脚本里（否则navigator.serviceWorker为undefined） -
sw.js中install事件里的cache.addAll()列表，所有路径必须能被fetch()成功获取，任一失败会导致整个缓存失败
最小可用示例（sw.js）：
const CACHE_NAME = 'my-app-v1';
const urlsToCache = [
'/',
'/index.html',
'/styles/main.css',
'/scripts/app.js'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
});
弱网场景下 Service Worker 的关键控制点
Manifest 声明式缓存无法应对弱网，而 Service Worker 可主动干预请求流：
- 在
fetch事件中，可先查缓存，查不到再发网络请求，并设置timeout兜底返回缓存旧版本（需手动cache.put()更新） - 对 API 接口等动态资源，不要塞进
cache.addAll()，改用cache.match()+fetch().then(res => cache.put())按需缓存 - 更新缓存时，必须在
activate事件中调用caches.delete('old-cache-name')，否则旧缓存残留会导致资源不更新 - 调试时务必清空“Cache Storage”和“Service Workers”，否则容易误判缓存是否生效
真正麻烦的不是写几行sw.js，而是清理旧项目里所有manifest残留：删掉html标签上的manifest属性、删掉.appcache文件、撤掉服务器 MIME 配置——否则你会反复陷入“为什么缓存没生效”的假问题里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
