主因是旧版index.html被强缓存后仍引用已下线的带哈希静态资源，导致404和框架挂载失败；禁用其缓存可确保每次加载都获取最新HTML及对应资源路径。
白屏主因不是缓存本身，而是旧版 index.html 被强缓存后，仍引用已下线的带哈希静态资源（如 app.abc123.js），导致加载 404、框架挂载失败。微信浏览器、Android WebView 尤其典型。
为什么禁用 index.html 缓存是最有效解法
SPA 入口 HTML 是“资源调度中心”：它决定加载哪些 JS/CSS。一旦它被缓存，哪怕所有 JS 文件名都带哈希，浏览器也只会按旧 HTML 里写的路径去请求——而这些路径在发版后通常已被清理。
- HTTP 缓存头比
<meta>标签可靠得多；<meta http-equiv="Cache-Control">在 Chrome 等现代浏览器中基本被忽略 -
Cache-Control: no-cache, no-store, must-revalidate比max-age=0更彻底，明确禁止存储和复用 - Nginx 配置需精确匹配路径：
location = /index.html，不能写成location /index.html（后者会误匹配/index.html.bak） - CDN（如 Cloudflare、阿里云 CDN）上也要单独为
index.html设置缓存策略，否则 Nginx 配置会被绕过
script type="module" 白屏静默失效怎么排查
模块脚本出错不抛红错，但会中断执行流，导致 DOM 不渲染、控制台干净得反常。常见于顶层 await、未声明变量、或构建后路径错误。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 在模块第一行加
console.log('sw.js loaded')，确认是否执行到 - 检查 Network 面板中该脚本的
Status是否为200，Type是否为script；若为pending或failed，说明路径 404 或 CORS 阻止 - 避免在模块顶层写
await fetch('/api')；应包裹进async function init() { ... }再调用 - Vite/Webpack 构建后若自动添加了查询参数（如
utils.js?t=123），确保服务器能正确响应该 URL，否则模块加载失败且无提示
离线场景下 HTML 必须显式加入 Cache API
Service Worker 的 caches.open() 不会自动包含 index.html；漏掉它，断网时连主文档都拿不出来，直接白屏，连错误都不报。
立即学习“前端免费学习笔记（深入）”；
- 在
install事件中，必须显式调用cache.addAll(['/', '/index.html', '/app.js'])—— 注意用绝对路径，不能写'index.html' - 每次发版都要变更缓存名（如从
v1→v2），并在activate中调用caches.delete('v1')，否则新旧 HTML/JS 混存，加载随机失败 -
fetch事件中对request.destination === 'document'的请求，必须提供兜底页（如/offline.html），否则导航请求失败即白屏 - 不要在 SW 中用
fetch('/index.html').then(r => r.text())动态读取内容再缓存——no-cors响应无法读 body，install 会静默失败
最易被忽略的一点：HTML 文件自身是否含动态内容（如服务端注入的 token、时间戳、用户信息）。若把它无差别放进 Cache API 长期缓存，下次离线打开时，这些值就永远卡在旧状态——表面不白屏，实则功能异常。这类 HTML 应始终走网络优先，或仅缓存骨架结构。
