hoppscotch离线功能需通过pwa安装激活service worker并缓存关键资源；验证缓存完整性、更新缓存、配置cors代理及启用mock响应，可确保断网时正常加载界面与测试api。
如果您已将Hoppscotch安装为PWA，但尝试在无网络连接时无法加载界面或发起请求，则可能是由于Service Worker未正确激活或关键资源未被缓存。以下是启用并可靠使用Hoppscotch离线功能的具体方法：
一、确认并安装Hoppscotch PWA
离线功能仅在PWA模式下可用，网页版默认不启用完整离线能力。必须通过浏览器安装流程注册Service Worker并缓存核心资产。
1、在Chrome或Edge浏览器中访问https://www.php.cn/link/3a28dcc6580b3c654621295e81a0f41a。
2、点击地址栏右侧的+ 添加到桌面按钮（或在菜单中选择“安装Hoppscotch”）。
3、确认安装提示，等待应用图标出现在桌面或启动器中。
4、首次启动PWA后，关闭所有浏览器标签页，断开网络，再次点击桌面图标启动——若能正常显示主界面，则Service Worker已成功注册并完成初始缓存。
二、验证Service Worker状态与缓存完整性
即使PWA已安装，若缓存未命中关键路径（如/、/index.html、/assets/），离线时仍将触发白屏或404。需手动检查缓存内容是否就绪。
1、在PWA运行状态下，按F12打开开发者工具，切换至Application → Service Workers面板。
2、确认右上角显示“Service Worker is running”，且下方列出的worker状态为“Activated and is running”。
3、切换至Cache Storage面板，展开缓存列表，查找类似hoppscotch-offline-v*或sw-cache-*的缓存名称。
4、逐项点击进入，确认其中包含/index.html、/manifest.json、/assets/main.*.js、/assets/vendor.*.css等至少4类文件。
三、强制触发离线缓存更新
当Hoppscotch发布新版本后，旧版PWA可能仍使用过期缓存，导致离线时加载失败或功能异常。需主动清除旧缓存并拉取新版资源。
1、保持联网状态，启动Hoppscotch PWA，进入设置（齿轮图标）→ “Clear cache and hard reload”。
2、关闭PWA，重新打开，等待右下角出现“Updated to latest version”提示。
3、在开发者工具的Application → Service Workers中，勾选“Update on reload”，然后按Ctrl+R（Windows）或Cmd+R（macOS）强制重载。
4、断网后再次启动，观察是否仍可访问请求构建区、方法选择器及响应区域基础UI。
四、使用浏览器扩展绕过CORS限制以保障离线调试连贯性
部分API测试依赖浏览器扩展解决跨域问题，但离线时扩展可能失效。需提前配置本地代理或启用内置免CORS模式。
1、联网时，在Hoppscotch设置中开启“Enable CORS proxy”选项（位于Advanced Settings下）。
2、保存设置后，点击左上角“Environment” → “Add new environment”，创建名为offline-proxy的环境。
3、在该环境中添加变量：CORS_PROXY_URL = https://hoppscotch-cors-proxy.netlify.app（此为官方托管代理，支持离线预缓存）。
4、断网后，切换至该环境，所有请求将自动经由已缓存的代理路径发出，避免因CORS拦截导致请求面板不可用。
五、启用离线响应模拟功能替代真实网络调用
当完全无网络且目标API不可达时，可利用Hoppscotch内置Mock响应机制维持测试流程连续性，无需依赖外部服务。
1、在请求编辑区下方，点击“Response Mocking”开关启用模拟模式。
2、在弹出区域中，选择“Status Code”设为200，“Response Body”输入JSON示例数据（如{"status":"success","data":[]}）。
3、点击“Save Mock”，返回主界面后点击“Send”，响应区将立即显示所设Mock内容。
4、该Mock配置随环境保存，断网状态下仍可反复调用，适用于接口契约验证与前端联调场景。
