track元素不参与离线缓存控制，其src指向的.vtt文件必须由Service Worker显式预缓存为绝对路径，且MIME类型需为text/vtt，动态切换或多语言字幕均需提前全部缓存。
track 元素本身完全不参与离线缓存控制，它只是个声明式标签，用于指定字幕、章节或描述等外部文本轨道资源（如 .vtt 文件），浏览器是否能加载它，完全取决于其 src 属性指向的 URL 是否被 Service Worker 显式缓存。
你写 <track kind="subtitles" src="zh.vtt" srclang="zh"></track>，断网后字幕消失，不是 track 标签没“配对”，而是 zh.vtt 这个文件根本没进缓存，fetch 请求直接失败。
track 的 src 文件必须被 Service Worker 主动缓存
track 元素不会触发自动缓存，也不会响应 manifest 或 meta http-equiv。它的 src 是一个普通 fetch 请求，只有在 Service Worker 的 fetch 事件中被匹配并返回缓存响应，才能离线可用。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 必须把所有
track的src路径（如/zh.vtt、/en.vtt）列进cache.addAll()预缓存清单 - 路径必须是绝对根路径：
/zh.vtt✅，./zh.vtt❌，zh.vtt❌ - 若使用相对路径且未补全，缓存会失败，控制台可能只报 “Request failed” 而不提示具体缺失项
字幕文件缓存容易被忽略的三个细节
-
vtt文件 MIME 类型必须为text/vtt，服务器若返回text/plain，部分浏览器（尤其是 Safari）会拒绝解析，即使缓存成功也显示空白字幕 - 多语言字幕常通过 JS 动态切换
track的src或mode，但 Service Worker 不会自动监听 DOM 变更——你得确保所有可能用到的src都提前缓存，不能只缓存初始那个 -
vtt文件里引用的图片（如 cue 中的<img alt="HTML页面track元素怎么实现离线缓存" >）或字体（通过@font-face引入）不会被连带缓存，需单独加入缓存列表
如何验证 track 是否真正离线可用
别只看 HTML 页面能否打开：
立即学习“前端免费学习笔记（深入）”；
- 断网后打开 DevTools → Network 面板，刷新页面，检查
zh.vtt请求是否状态为(from cache)或(from ServiceWorker) - 在 Application → Cache Storage 中打开你用的缓存名（如
v1），确认/zh.vtt条目存在且响应体可读 - 直接在地址栏访问
<a href="https://www.php.cn/link/9b7cd1a628c374ae0cbae31a83f7298d">https://www.php.cn/link/9b7cd1a628c374ae0cbae31a83f7298d</a>（断网状态下），应返回完整文本内容，而非“Failed to load resource”
track 的离线能力不是标签属性决定的，是你有没有把它背后那个 .vtt 当成和 app.js 一样严肃对待——漏掉一个，字幕就断。
