html5 manifest 已被所有主流浏览器彻底弃用，无法配置断网运行方案；唯一可行的离线方案是 service worker + cache api，需 https 部署、手动处理更新、区分静态与动态资源缓存，并完整清理调试缓存。
不能通过 HTML5 Manifest 配置一套完整的断网运行方案。
Manifest（.appcache）机制已在所有主流浏览器中彻底弃用：Chrome 自 94 版起移除支持，Firefox 和 Safari 更早停止维护，截至 2026 年 4 月，它在稳定版中已完全不可用——即使 仍能通过校验，也不会触发任何缓存行为，开发者工具中 Application → Manifest 面板已消失，控制台静默无报错，资源根本不会写入缓存。
这不是配置问题，而是底层逻辑已被删除。你无法靠调整 MIME 类型、修正注释格式或重设服务器响应头来“修好”它。
真正可行的离线方案只有一种：
用 Service Worker + Cache API 实现可控离线
Service Worker 是运行在浏览器后台的脚本，可拦截请求、按需缓存、区分静态资源与接口响应，并支持精确更新策略。
- 必须通过 HTTPS（或
localhost）部署 - 注册代码需放在
DOMContentLoaded或用户交互后，避免被拦截 -
sw.js推荐放在网站根目录（否则需显式设置scope） - 首次访问不会立即生效，需刷新一次完成安装与激活
一个最小可用示例（`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))
);
});
在页面中注册：
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js');
});
}
</script>
关键细节必须处理到位
-
缓存更新不自动生效：修改
sw.js后，旧版本仍会持续运行。需手动调用skipWaiting()和clients.claim()才能让新 SW 立即接管 -
API 与静态资源要分开处理：
cache.addAll()只适合初始化静态资源；接口响应应使用cache.put()在fetch中动态缓存，并加时间戳或 ETag 判断是否更新 -
离线兜底要明确：对
/api/类请求，可返回预置 JSON 错误对象；对页面请求，可 fallback 到/offline.html - 调试时清缓存要完整：需在开发者工具中清除 “Cache Storage” + “Service Workers” + 页面普通缓存，否则容易误判
别再尝试兼容旧方案
Electron 或定制内核终端等极少数封闭环境可能还保留 Manifest 支持，但前提苛刻：首行严格为 CACHE MANIFEST（无 BOM、无空格）、服务器必须返回 Content-Type: text/cache-manifest、且整个流程不可观测、不可调试、不可增量更新。一旦出错，全盘失效，毫无恢复手段。
而 Service Worker 虽需多写几行代码，却换来完全透明的控制权——你能知道哪条请求进了缓存、哪条走了网络、哪次更新失败了、甚至能记录离线行为日志。
不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
