站点离线缓存 MITM proxy

离线网页缓存：基于Electron的MITM代理方案

开发者常面临文档和网站访问不稳定的问题。基于MITM代理的应用程序可预先缓存HTTPS资源，确保离线访问。它生成自签名证书以拦截流量，并使用带有独立配置文件的嵌入式Chromium。在离线模式下，无需网络连接即可提供缓存响应。

该解决方案面向中高级技术专家：保留专业术语，聚焦技术实现细节。

架构与背景

该项目源于2016年用于迁移企业网站的代理服务器。当时任务要求在没有后端访问权限的情况下缓存公开内容。代理强制保存所有HTTP/HTTPS请求，替换原始来源。

更新包括TypeScript和ESLint。转向Electron实现了桌面应用程序的开发。集成AI代理加速了UI开发、证书管理和国际化。

关键组件：

• MITM代理用于流量拦截。
• 带有自定义配置文件的Chromium。
• 按命名空间存储的缓存。

拦截与缓存原理

启动时生成自签名CA证书。用户将其安装为受信任证书以绕过HTTPS。嵌入式浏览器通过代理路由流量。

// 代理逻辑伪代码
if (online) {
  proxy.intercept(request) -> cache.save(response);
} else {
  return cache.get(request);
}

代理解析请求并保存完整响应，包括资源。离线模式在发起网络请求前检查缓存。

开发者功能

应用程序最小化UI以实现快速启动，无需文档。核心能力：

• 自动缓存网站：内置使用Crawlee + Playwright的爬虫。递归下载页面，但对SPA（加载事件）敏感。
• SOCKS5代理：支持外部代理以绕过封锁。
• 命名空间：按项目或站点隔离缓存（例如，Electron和PrimeReact的文档）。
• 导出/导入：将命名空间序列化为文件以便传输。

示例场景：缓存electron-vite.org，离线使用代码示例和API。

开发中的应用

适用于：

• 离线文档（React、Vue、框架特定网站）。
• 重新设计前归档旧版网站。
• 在无互联网的隔离网络中工作。
• 使用固定响应测试UI。

限制：爬虫难以处理动态JS内容。建议手动导航以实现精确缓存。

传输Chrome配置文件可行，但需注意安全性：通过--user-data-dir导出cookies和localStorage。

关键要点

• Electron上的MITM：通过自签名证书+Chromium实现HTTPS拦截。
• 缓存隔离：命名空间防止资源冲突。
• Crawlee/Playwright爬虫：自动化但SPA有注意事项。
• 极简UI：无需为经验用户提供说明。
• 文件导出：在机器间传输缓存。

结论与改进

该工具解决实际问题：在旅行或受制裁时稳定访问文档。计划开发共享命名空间的HUB。

社区问题：许可证（MIT/Apache？），安全导入Chrome配置文件。

— Editorial Team