html manifest 缓存机制已彻底废弃，按钮离线可用的唯一路径是 service worker：需预加载资源、拦截 fetch 并显式返回缓存，且必须满足部署路径、https、生命周期控制等全部条件。
HTML 的 manifest 缓存机制在 2026 年已完全失效，无法保障任何离线行为——包括按钮点击、样式加载、脚本执行。你点不了按钮，不是因为没写对 CACHE:，而是浏览器压根不读 manifest 文件，也不触发任何缓存逻辑。
manifest 属性在当前浏览器里什么都不会做
Chrome 95+、Firefox 85+、Safari 16.4+ 已彻底删除 Application Cache 实现：html manifest="app.manifest" 被 HTML 解析器直接跳过；window.applicationCache 返回 undefined；DevTools 的 Application 面板里“Manifest”标签早已消失。即使服务器返回正确的 Content-Type: text/cache-manifest，浏览器也不会发起请求，更不会缓存 /button.js 或 /style.css。
常见误判场景：
- 本地用
file://打开页面看到按钮“还能点”，其实是浏览器从内存或历史记录恢复，不是缓存生效 - Electron 旧版内核或定制浏览器显示“有 manifest”，但更新不可靠，且不兼容现代 PWA 行为
- 开发者工具 Network 面板里看到 .appcache 请求成功，只是服务器响应了，浏览器根本没解析内容
按钮离线可用的唯一路径是 Service Worker
要让按钮在断网时仍可点击、样式正常、逻辑运行，必须用 sw.js 完成三件事：预加载 HTML/CSS/JS、拦截 fetch、显式返回缓存资源。缺一不可。
关键实操点：
-
cache.addAll()列表必须包含按钮依赖的所有资源：比如/index.html、/assets/button.css、/js/app.js（注意用绝对路径） -
fetch事件中不能无差别缓存：按钮点击若触发POST /api/submit，必须放行网络请求，否则表单静默失败；可用event.request.method === 'GET'和event.request.destination === 'script'等判断类型 - 按钮 JS 里调用的 API 接口（如
fetch('/api/status')）不能进缓存，否则返回旧数据或空响应，导致按钮状态错乱
最容易被忽略的生效条件
注册完 sw.js 不等于按钮立刻离线可用。它要走完整生命周期：
- 首次访问只完成注册，install 阶段执行但不接管页面
- 第二次访问才进入 active 状态，开始拦截 fetch
- 想让按钮在首次访问就离线可用，必须在
waiting状态调用self.skipWaiting()，并在activate里加clients.claim() -
sw.js必须部署在根目录（如/sw.js），且页面通过https://或http://localhost提供；http://127.0.0.1不行，file://更不行
真正决定按钮能不能点的，不是 manifest 里写了多少行 CACHE:，而是 sw.js 是否成功打开 cache、是否 match 到 button.css、是否把 app.js 响应正确注入到页面执行上下文——这些环节任何一个出错，按钮就会失联或报 ReferenceError。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
