如何测试和调试 Service Worker 的功能可以直接在你现在这个sw.js和index.html基础上用浏览器和如果有WebView 来测试。分几步说最实用的操作。1. 基本前提检查通过 HTTP/HTTPS 访问PWA/Service Worker 只能在https://...或http://localhost:xxxx不能用file://直接打开index.html。如果你是 WinForms WebView2要确认是访问一个本地起的服务例如http://127.0.0.1:5000而不是直接加载本地文件路径。确认index.html已经注册 SWindex.html中要有类似代码你可以再检查下是否已加scriptif(serviceWorkerinnavigator){window.addEventListener(load,function(){navigator.serviceWorker.register(./sw.js).then(function(registration){console.log(Service Worker 注册成功:,registration.scope);}).catch(function(error){console.error(Service Worker 注册失败:,error);});});}/script2. 在浏览器里调试 Service Worker推荐用 Chrome/Edge2.1 查看 SW 是否成功安装打开你的站点例如http://localhost:5000/。打开开发者工具Chrome/EdgeF12 或 CtrlShiftI。切到Application面板左侧选择Service Workers应该能看到一条sw.js记录状态是activated and is running或类似文字Scope一般是/或你的子路径。如果看不到看 Console 是否有Service Worker 注册失败的日志确认访问协议是http(s)而不是file://确认sw.js路径没有 404。2.2 强制更新/重新加载 Service Worker在Application Service Workers面板勾选Update on reload每次刷新页面时都会强制检查并安装新的sw.js。可以点击Unregister注销当前 SWStop临时停止 SW 运行。修改sw.js后建议操作Unregister旧的刷新页面让新版本安装/激活再测试缓存行为。3. 测试缓存是否生效静态资源 cache-first你的sw.js使用的是cache-first策略对静态资源进行缓存。3.1 首次访问行为打开 Network 面板勾选Disable cache浏览器自身缓存方便看 Service Worker 的效果。首次加载站点index.html、index.js、index.css等会走真实网络。sw.js的install事件会把PRECACHE_URLS里列的静态资源缓存到densenapp-static-v1。可以在 Console 里加一点日志辅助调试可选self.addEventListener(install,(event){console.log([SW] Install);event.waitUntil(caches.open(CACHE_NAME).then((cache){console.log([SW] Precaching:,PRECACHE_URLS);returncache.addAll(PRECACHE_URLS);}));self.skipWaiting();});3.2 第二次访问行为刷新页面仍勾选Disable cache在 Network 面板观察对于index.html、index.js、index.css等Size一栏应显示(from ServiceWorker)或者在Initiator里能看到 Service Worker。如果你在sw.js的fetch里加日志self.addEventListener(fetch,(event){const{request}event;if(request.method!GET){return;}consturlnewURL(request.url);console.log([SW] Fetch:,url.href);// ...原有逻辑...});就可以在 Console 里看到 SW 正在接管哪些请求。4. 测试离线场景PWA 关键4.1 使用 DevTools 模拟离线在 Network 面板有一个下拉框Online / Offline / Fast 3G 等选择Offline刷新页面预期行为结合你当前sw.js对于已经缓存的静态资源仍能正常加载index.html,index.js,index.css等如果访问的是未缓存的静态资源进入catch分支如果是 HTML返回缓存的./index.html其他类型返回 503 文本网络不可用且本资源未被缓存。可以刻意添加一个新静态资源比如test-offline.js不加到PRECACHE_URLS然后离线访问它看是否走兜底逻辑。4.2 手机真机测试可选但更贴近现场把站点部署到内网/公网一个 HTTPS 地址手机上用 Chrome/Edge 打开打开开发者工具远程调试Chrome DevTools 的 Remote Devices关闭 Wi-Fi / 移动网络看能否仍然打开首页壳。5. 调试缓存内容Cache Storage在Application面板里左侧选择Cache Storagedensenapp-static-v1右侧会列出当前所有缓存的请求 URL./index.html./index.js./pda.js等等来自你PRECACHE_URLS和运行时 cache.put 的资源。你可以右键单条记录Delete或在Application左侧Clear storage里勾选Cache storage然后点击Clear site data一键清空。6. 常见调试坑和定位思路sw.js修改了但行为还是旧的先在Application Service Workers里Unregister或勾上Update on reload或强刷CtrlF5 再刷新几次。请求没有被 SW 接管确认fetch事件里没有提前returnurl.pathname排除规则没写错是否误把某路径当作 API 过滤掉了在fetch回调最前面打console.log([SW] Fetch:, request.url);。和浏览器自带缓存搞混调试时勾Disable cache让浏览器不要再用 HTTP 缓存只看 Service Worker 的行为结合 Network 的Size/Initiator列来判断来源。WebView 中调试如果是 WebView2可以通过附加调试Edge DevTools来看到和浏览器类似的Application Service Workers面板如果是老 WebBrowser 控件IE 内核Service Worker 不支持调试只在浏览器里进行。