最有效断网测试方法是先用chrome devtools模拟离线环境：启用service worker后切换network为offline，验证页面加载、核心功能及缓存命中情况；再进行真实断网测试，确保导航、跳转、表单等正常，并检查自定义offline.html是否生效。
直接在浏览器里断网测试是最有效的方式，重点看页面能否打开、核心功能是否可用、有没有白屏或报错。
用 Chrome DevTools 模拟离线环境
这是最常用也最可靠的测试方法。打开目标 PWA 页面后，按 Ctrl+Shift+I（Windows）或 Cmd+Option+I（Mac）调出开发者工具，切换到 Application 标签页，左侧选中 Service Workers，勾选 Update on reload 并刷新一次页面，确保 Service Worker 已安装并激活。然后切到 Network 标签页，点击左上角的网络类型下拉菜单，选择 Offline。此时刷新页面，观察是否能正常加载首页、导航栏、按钮是否可点、关键文案是否显示。
验证缓存资源是否命中
在 Network 面板开启状态下断网刷新，所有请求的状态码应为 (from cache) 或 (memory cache)，而不是失败的 Failed 或 ERR_INTERNET_DISCONNECTED。特别关注 HTML、主 CSS、核心 JS 文件是否被缓存。如果某个关键资源显示 404 或 pending，说明它没被 Service Worker 正确加入缓存列表，需要检查 caches.addAll() 中的路径是否准确、文件是否存在、是否被其他插件拦截。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
测试真实断网场景
关闭 Wi-Fi 和移动数据，或开启手机飞行模式，再手动输入网址访问。这个步骤不可跳过——有些应用在 DevTools 离线模式下表现正常，但真实断网时因缓存策略不严谨（比如没处理 navigate 请求）而直接报错或空白。重点验证：首页能否打开；底部导航或侧边栏是否渲染；点击内部链接是否能跳转（需确认 fetch 事件中对页面导航做了 fallback 处理）；表单提交按钮是否禁用或提示“请检查网络”而非直接崩溃。
检查离线回退页面是否生效
如果主页面无法完全离线运行，至少要保证用户看到一个友好的离线页。在 Service Worker 的 fetch 事件中，应对 event.request.mode === 'navigate' 的情况做兜底，例如返回 caches.match('/offline.html')。测试时确认断网后是否展示的是你自定义的 offline.html，而不是浏览器默认的“无法连接到互联网”提示。该页面建议包含简明提示、重试按钮（绑定 location.reload()）和基础样式，避免依赖外部资源。
