如何通过HTML实现PWA的离线访问功能？

本文共计1153个文字，预计阅读时间需要5分钟。

浏览器仅允许在安全上下文中（如HTTPS协议下或开发时的localhost）注册Service Worker。如果您的部署在HTTP域名（例如http://example.com）上，尝试使用`navigator.serviceWorker.register()`将直接失败，控制台会报错：

实操建议：

• 生产环境务必配置 HTTPS，哪怕用 Let’s Encrypt 免费证书
• 本地调试可直接用 http://localhost:3000，但不能用 http://127.0.0.1:3000（部分老版本 Chrome 不认）
• 确保 service-worker.js 文件能被直接访问（比如访问 https://yoursite.com/service-worker.js 返回 200）

缓存静态资源要用 cache.addAll() 而非逐个 cache.put()

想让 PWA 离线加载 HTML/CSS/JS/图片等，最常用方式是在 install 事件里调用 cache.addAll() 预缓存关键资源。它会原子性地缓存整个列表——只要有一个文件 404 或网络失败，全部缓存就中止，避免“半残”缓存状态。