Offline cache webů MITM proxy

Offline ukládání webových stránek do mezipaměti: MITM-proxy v Electronu

Vývojáři se často potýkají s nestabilním přístupem k dokumentaci a webům. Aplikace založená na MITM-proxy umožňuje předem ukládat HTTPS zdroje do mezipaměti, čímž zajišťuje offline přístup. Generuje vlastnoručně podepsaný certifikát pro zachycení provozu, využívá vestavěný Chromium s izolovaným profilem. V offline režimu poskytuje uložené odpovědi bez připojení k síti.

Řešení je určeno pro středně pokročilé a seniorní specialisty: zachovává terminologii, zaměřuje se na technické detaily implementace.

Architektura a historie

Projekt se vyvinul z proxy serveru pro migraci firemního webu v roce 2016. Tehdy úkol vyžadoval ukládání veřejného obsahu do mezipaměti bez přístupu k backendu. Proxy nuceně ukládala všechny HTTP/HTTPS požadavky, nahrazujíc původní zdroj.

Aktualizace zahrnula TypeScript, ESLint. Přechod na Electron umožnil vytvořit desktopovou aplikaci. Integrace AI agentů urychlila vývoj UI, správu certifikátů a i18n.

Klíčové komponenty:

• MITM-proxy pro zachycení provozu.
• Chromium s vlastním profilem.
• Úložiště mezipaměti podle jmenných prostorů (namespaces).

Princip zachycení a ukládání do mezipaměti

Při spuštění se vygeneruje vlastnoručně podepsaný CA certifikát. Uživatel jej nainstaluje jako důvěryhodný pro obcházení HTTPS. Vestavěný prohlížeč směruje provoz přes proxy.

// Pseudokód logiky proxy
if (online) {
  proxy.intercept(request) -> cache.save(response);
} else {
  return cache.get(request);
}

Proxy analyzuje požadavky, ukládá kompletní odpovědi včetně zdrojů. Offline režim kontroluje přítomnost v mezipaměti před síťovým požadavkem.

Funkce pro vývojáře

Aplikace minimalizuje UI pro rychlý start bez dokumentace. Hlavní možnosti:

• Automatické ukládání webů do mezipaměti: Vestavěný crawler na Crawlee + Playwright. Rekurzivně stahuje stránky, ale je citlivý na SPA (události načítání).
• SOCKS5-proxy: Podpora externích proxy pro obcházení blokací.
• Jmenné prostory: Izolace mezipaměti podle projektů nebo webů (např. docs pro Electron a PrimeReact).
• Export/import: Serializace jmenných prostorů do souborů pro přenos.

Příklad scénáře: uložte si do mezipaměti electron-vite.org, pracujte offline s příklady kódu a API.

Použití ve vývoji

Ideální pro:

• Offline dokumentaci (React, Vue, framework-specific sites).
• Archivaci zastaralých webů před redesignem.
• Práci v izolovaných sítích bez internetu.
• Testování UI s pevnými odpověďmi.

Omezení: crawler si špatně poradí s dynamickým JS obsahem. Doporučuje se ruční navigace pro přesnou mezipaměť.

Přenos Chrome profilu je možný, ale vyžaduje opatrnost s bezpečností: export cookies, localStorage přes --user-data-dir.

Co je důležité

• MITM v Electronu: Zachycení HTTPS přes vlastnoručně podepsaný cert + Chromium.
• Izolace mezipaměti: Jmenné prostory zabraňují konfliktům zdrojů.
• Crawler Crawlee/Playwright: Automatizace, ale s výhradami na SPA.
• Minimalistické UI: Bez instrukcí pro zkušené uživatele.
• Export souborů: Přenos mezipaměti mezi stroji.

Závěr a vylepšení

Nástroj řeší reálné úkoly: stabilní přístup k dokumentaci na cestách nebo pod sankcemi. Plánuje se HUB pro sdílení jmenných prostorů.

Otázky pro komunitu: licence (MIT/Apache?), bezpečný import Chrome profilu.

— Editorial Team