VSCode运行html实现离线缓存测试的方法-VSCode-PHP中文网

vscode无法测试离线缓存，因service worker仅支持https或localhost；live server等工具使用http://127.0.0.1不满足安全要求，导致navigator.serviceworker为undefined；必须用vite等支持localhost的工具，并确保sw.js返回200、路径绝对、缓存html且fetch事件处理document请求。

vscode运行html实现离线缓存测试的方法

VSCode 本身不能运行或测试离线缓存功能——它只是编辑器，不提供 Service Worker 运行环境或网络控制能力。 真正能验证离线缓存的，只有浏览器在 HTTPS（或 localhost）上下文中加载并注册了有效的 sw.js 后的行为。

为什么直接用 VSCode Live Server 测试会失败

Live Server 默认起在 http://127.0.0.1:5500 或类似地址，这不被浏览器允许注册 Service Worker（只接受 https:// 或 http://localhost）。即使你写了 navigator.serviceWorker.register('/sw.js')，控制台也会静默失败，navigator.serviceWorker 是 undefined。

VSCode 的 Live Server、Open with Live Server 插件、甚至 Python 的 python -m http.server 都无法满足 Service Worker 的安全要求
你在 DevTools → Application → Service Workers 面板里看到空白，不是代码错了，是协议/域名不合法
manifest 属性（manifest="app.appcache"）在 Chrome 95+、Firefox 85+、Safari 16.4+ 中已彻底移除，写进去也毫无作用

真正可行的本地测试流程（必须走 localhost）

你需要一个能绑定到 http://localhost:3000（或任意端口）且支持静态文件服务的工具，比如 vite、http-server 或 serve。以 vite 为例：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

确保项目根目录有 index.html 和 sw.js，且 sw.js 内容包含基本缓存逻辑（如 caches.open('v1').then(cache => cache.addAll(['/index.html', '/style.css']))）
运行 npx vite（默认监听 http://localhost:5173）——这个地址合法，可注册 SW

在 index.html 中加入注册代码：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('SW registered:', reg.scope))
    .catch(err => console.error('SW registration failed:', err));
}

打开 DevTools → Application → Service Workers，确认状态为 Active；若卡在 Waiting，需在 Console 执行 self.skipWaiting() 并刷新

离线测试前必须检查的三个硬性条件

缺一不可，否则白屏或控制台无提示：

sw.js 必须返回 200 状态码，且响应头不含 Cache-Control: no-store（Nginx/Apache 默认可能加了，要显式覆盖）
所有缓存路径必须是绝对根路径：'/index.html' ✅，'index.html' ❌，'./script.js' ❌
cache.addAll() 列表里必须包含 '/' 或 '/index.html' ——漏掉 HTML 就等于没入口，离线时必白屏

最容易被忽略的是：Service Worker 的 fetch 事件里必须单独处理 request.destination === 'document' 的请求，否则页面跳转或刷新时根本不会从缓存取 HTML，直接报 net::ERR_INTERNET_DISCONNECTED。这不是配置问题，是逻辑缺失。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！