离线运行html需本地http服务或单文件内联：浏览器file://协议禁用fetch、import等，python命令python -m http.server 8000可启用真实http环境；单文件方案需内联css/js、图片转base64、去除cdn；pwa需配合http服务，首次联网安装后才支持离线。
无网状态下无法“在线运行”，但可以完全离线实现同等效果——关键不是找替代平台，而是把“运行环境”本地化。
为什么双击HTML文件会失败（尤其带JS时）
Chrome、Edge 等浏览器在 file:// 协议下默认禁用 fetch、XMLHttpRequest、import 语句和 Service Worker 注册，报错如：net::ERR_FILE_NOT_FOUND 或 Access to script at 'file:///' from origin 'null' has been blocked。这不是你代码写错了，是浏览器安全策略强制拦截。
- Firefox 相对宽松，但
Service Worker仍拒绝注册（必须http://或https://） -
localStorage在file://下可用，但每次双击新窗口可能被识别为不同源，导致数据不互通 - 所有跨文件引用（如
<script src="utils.js"></script>）必须用相对路径，且不能含../超出当前目录层级
真正可行的离线运行方案：本地起一个最小HTTP服务
不需要装 Node、Nginx 或 Apache。Python 3 自带 http.server 模块，一行命令即可启动一个真实 HTTP 环境，绕过所有 file:// 限制。
- 终端进入 HTML 文件所在目录，执行：
python -m http.server 8000 - 打开浏览器访问：
http://localhost:8000/your-page.html - 此时
fetch、import、caches.open()全部正常，和线上行为一致 - 手机同 Wi-Fi 下，用
http://[电脑IP]:8000/your-page.html即可真机调试
单文件 HTML 是离线运行最稳的选择
把 CSS、JS 全部内联进一个 .html 文件，不依赖外部资源，就彻底摆脱路径、CORS、协议限制三大坑。
- 用
<style>...</style>替代<link rel="stylesheet"> - 用
<script>...</script>替代<script src="..."></script> - 图片转 Base64 内联（适合小图），或确认已随 HTML 文件一并存放在同一目录
- 避免任何 CDN 链接（如
https://cdn.jsdelivr.net/...），断网即失效
PWA 不是必需项，但加了能提升体验
如果你希望用户“添加到主屏幕”后像 App 一样启动、离线也能加载首页，需要 manifest.json + Service Worker。但注意：
-
manifest.json只需声明名称、图标、显示模式，无需服务器支持 -
Service Worker必须通过http://或https://注册，file://下无效 —— 所以它和上文的本地服务是配套使用的 - 缓存策略别写太激进：首次加载时只缓存 HTML/CSS/JS，图片等大资源按需缓存，避免离线包膨胀
最易被忽略的一点：PWA 的离线能力只对已访问过的页面生效。用户第一次打开必须联网完成 Service Worker 安装和初始缓存，之后才能断网使用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
