PWA离线访问需手动配置sw.js、manifest.json和注册逻辑；sw.js必须HTTPS/localhost下可直接访问且路径正确，cache.addAll()需根相对路径并缓存'/'，fetch事件须按request.destination区分资源类型处理。
HTML编辑器本身不提供PWA功能，离线访问必须靠你手动配齐三个基础文件：sw.js、manifest.json 和注册逻辑（通常写在 app.js 或内联 <script> 里）。 缺一个，浏览器就无法识别为 PWA，更别说离线打开。
sw.js 注册失败的常见原因和检查点
注册失败不是代码写错，而是环境或路径没对上。浏览器静默拒绝注册时，控制台可能只报“Failed to register a ServiceWorker”，但不告诉你为什么。
-
sw.js必须能被直接访问：打开https://yoursite.com/sw.js应返回 200 状态码，且响应头中不能有Cache-Control: no-store—— 否则浏览器会拒收 - 注册代码不能放在
DOMContentLoaded或模块异步加载后：必须用window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js')) - 必须加安全判断：
if ('serviceWorker' in navigator)，否则 Safari 或旧版 Edge 会直接报TypeError - 本地调试只认
http://localhost:xxx，不认http://127.0.0.1:xxx（Chrome 120+ 已放宽，但 iOS Safari 仍严格）
cache.addAll() 路径写错导致缓存全空
cache.addAll() 是原子操作：列表里任一资源返回 404、CORS 拒绝或重定向失败，整个缓存批次就中断，不会存下其中任何一个文件。
- 路径必须以
/开头，且是根相对路径：写['/index.html', '/styles/main.css']，别写['index.html', './styles/main.css']（后者会拼成当前页面路径，比如/blog/index.html） - 禁止带查询参数：
'/data.json?v=1.2'和'/data.json'被视为两个 URL，缓存和匹配都对不上；版本号应通过缓存名（如'v2-static'）管理 - HTML 页面必须显式缓存
'/'：很多项目只写'/index.html'，但用户直接访问域名时请求的是'/'，不缓存它，离线刷新就 404
fetch 事件里 request.destination 判错引发连锁故障
不区分请求类型就统一走缓存，会导致 API 响应被 HTML 缓存覆盖、POST 表单提交静默失败、字体加载中断等隐蔽问题。
立即学习“前端免费学习笔记（深入）”；
- 只对页面导航做 fallback：
event.request.destination === 'document'才调caches.match(event.request)，其他类型（'script'、'image'、'font'）应走网络或按需缓存 -
fetch()发起的 API 请求，destination是''（空字符串），不是'json'，不能靠后缀判断 - 如果用了
clients.claim()，确保它只在 activate 事件里调，否则未激活 SW 可能劫持已有页面，造成资源错乱
最常被忽略的一点：Service Worker 的作用域默认是 sw.js 所在路径。如果你把 sw.js 放在 /js/sw.js，它就只能拦截 /js/ 下的请求——想管整个站，必须把它放在根目录，并在注册时显式传 { scope: '/' }。
