# Progressive Web App (PWA) Guide (Čeština) 🌐 **Languages:** 🇺🇸 [English](../../../../guides/PWA_GUIDE.md) · 🇪🇹 [am](../../../am/docs/guides/PWA_GUIDE.md) · 🇸🇦 [ar](../../../ar/docs/guides/PWA_GUIDE.md) · 🇦🇿 [az](../../../az/docs/guides/PWA_GUIDE.md) · 🇧🇬 [bg](../../../bg/docs/guides/PWA_GUIDE.md) · 🇧🇩 [bn](../../../bn/docs/guides/PWA_GUIDE.md) · 🇧🇦 [bs](../../../bs/docs/guides/PWA_GUIDE.md) · 🇩🇰 [da](../../../da/docs/guides/PWA_GUIDE.md) · 🇩🇪 [de](../../../de/docs/guides/PWA_GUIDE.md) · 🇬🇷 [el](../../../el/docs/guides/PWA_GUIDE.md) · 🇪🇸 [es](../../../es/docs/guides/PWA_GUIDE.md) · 🇪🇪 [et](../../../et/docs/guides/PWA_GUIDE.md) · 🇮🇷 [fa](../../../fa/docs/guides/PWA_GUIDE.md) · 🇫🇮 [fi](../../../fi/docs/guides/PWA_GUIDE.md) · 🇫🇷 [fr](../../../fr/docs/guides/PWA_GUIDE.md) · 🇮🇪 [ga](../../../ga/docs/guides/PWA_GUIDE.md) · 🇮🇳 [gu](../../../gu/docs/guides/PWA_GUIDE.md) · 🇳🇬 [ha](../../../ha/docs/guides/PWA_GUIDE.md) · 🇮🇱 [he](../../../he/docs/guides/PWA_GUIDE.md) · 🇮🇳 [hi](../../../hi/docs/guides/PWA_GUIDE.md) · 🇭🇷 [hr](../../../hr/docs/guides/PWA_GUIDE.md) · 🇭🇺 [hu](../../../hu/docs/guides/PWA_GUIDE.md) · 🇦🇲 [hy](../../../hy/docs/guides/PWA_GUIDE.md) · 🇮🇩 [id](../../../id/docs/guides/PWA_GUIDE.md) · 🇳🇬 [ig](../../../ig/docs/guides/PWA_GUIDE.md) · 🇮🇹 [it](../../../it/docs/guides/PWA_GUIDE.md) · 🇯🇵 [ja](../../../ja/docs/guides/PWA_GUIDE.md) · 🇬🇪 [ka](../../../ka/docs/guides/PWA_GUIDE.md) · 🇰🇭 [km](../../../km/docs/guides/PWA_GUIDE.md) · 🇮🇳 [kn](../../../kn/docs/guides/PWA_GUIDE.md) · 🇰🇷 [ko](../../../ko/docs/guides/PWA_GUIDE.md) · 🇱🇹 [lt](../../../lt/docs/guides/PWA_GUIDE.md) · 🇱🇻 [lv](../../../lv/docs/guides/PWA_GUIDE.md) · 🇮🇳 [ml](../../../ml/docs/guides/PWA_GUIDE.md) · 🇮🇳 [mr](../../../mr/docs/guides/PWA_GUIDE.md) · 🇲🇾 [ms](../../../ms/docs/guides/PWA_GUIDE.md) · 🇲🇹 [mt](../../../mt/docs/guides/PWA_GUIDE.md) · 🇲🇲 [my](../../../my/docs/guides/PWA_GUIDE.md) · 🇳🇵 [ne](../../../ne/docs/guides/PWA_GUIDE.md) · 🇳🇱 [nl](../../../nl/docs/guides/PWA_GUIDE.md) · 🇳🇴 [no](../../../no/docs/guides/PWA_GUIDE.md) · 🇮🇳 [or](../../../or/docs/guides/PWA_GUIDE.md) · 🇮🇳 [pa](../../../pa/docs/guides/PWA_GUIDE.md) · 🇵🇭 [phi](../../../phi/docs/guides/PWA_GUIDE.md) · 🇵🇱 [pl](../../../pl/docs/guides/PWA_GUIDE.md) · 🇵🇹 [pt](../../../pt/docs/guides/PWA_GUIDE.md) · 🇧🇷 [pt-BR](../../../pt-BR/docs/guides/PWA_GUIDE.md) · 🇷🇴 [ro](../../../ro/docs/guides/PWA_GUIDE.md) · 🇷🇺 [ru](../../../ru/docs/guides/PWA_GUIDE.md) · 🇱🇰 [si](../../../si/docs/guides/PWA_GUIDE.md) · 🇸🇰 [sk](../../../sk/docs/guides/PWA_GUIDE.md) · 🇸🇮 [sl](../../../sl/docs/guides/PWA_GUIDE.md) · 🇷🇸 [sr](../../../sr/docs/guides/PWA_GUIDE.md) · 🇸🇪 [sv](../../../sv/docs/guides/PWA_GUIDE.md) · 🇰🇪 [sw](../../../sw/docs/guides/PWA_GUIDE.md) · 🇮🇳 [ta](../../../ta/docs/guides/PWA_GUIDE.md) · 🇮🇳 [te](../../../te/docs/guides/PWA_GUIDE.md) · 🇹🇭 [th](../../../th/docs/guides/PWA_GUIDE.md) · 🇹🇷 [tr](../../../tr/docs/guides/PWA_GUIDE.md) · 🇺🇦 [uk-UA](../../../uk-UA/docs/guides/PWA_GUIDE.md) · 🇵🇰 [ur](../../../ur/docs/guides/PWA_GUIDE.md) · 🇺🇿 [uz](../../../uz/docs/guides/PWA_GUIDE.md) · 🇻🇳 [vi](../../../vi/docs/guides/PWA_GUIDE.md) · 🇳🇬 [yo](../../../yo/docs/guides/PWA_GUIDE.md) · 🇨🇳 [zh-CN](../../../zh-CN/docs/guides/PWA_GUIDE.md) · 🇹🇼 [zh-TW](../../../zh-TW/docs/guides/PWA_GUIDE.md) --- OmniRoute je dodáván jako plně instalovatelná progresivní webová aplikace. Když otevřete ovládací panel z libovolného mobilního prohlížeče — Android (Chrome) nebo iOS (Safari) — můžete jej „Přidat na plochu“ a získat prostředí podobné nativní aplikaci bez nutnosti použití obchodu s aplikacemi. ## Co je PWA? Progresivní webová aplikace promění webový ovládací panel OmniRoute v aplikaci, která vypadá a funguje jako nativní mobilní aplikace. Po instalaci: - Spouští se z plochy pomocí vlastní ikony - Otevírá se na celou obrazovku — bez adresního řádku prohlížeče nebo uživatelského rozhraní karet - Funguje offline díky vyhrazené stránce pro stav připojení - Ukládá statické prostředky do mezipaměti pro rychlejší načítání - Podporuje orientaci na výšku i na šířku ## Instalace ### Android (Chrome) 1. Otevřete ovládací panel OmniRoute v prohlížeči Chrome: `http://YOUR_IP:20128` 2. Chrome automaticky zobrazí banner **„Přidat OmniRoute na plochu“**, případně: - Klepněte na nabídku **⋮** (tři tečky) → **„Přidat na plochu“** nebo **„Nainstalovat aplikaci“** 3. Potvrďte výzvu 4. OmniRoute se zobrazí na ploše jako samostatná aplikace ### iOS (Safari) 1. Otevřete ovládací panel OmniRoute v prohlížeči Safari: `http://YOUR_IP:20128` 2. Klepněte na tlačítko **Sdílet** (čtverec se šipkou) 3. Přejděte dolů a klepněte na **„Přidat na plochu“** 4. Zadejte název (výchozí je „OmniRoute“) a klepněte na **Přidat** 5. OmniRoute se zobrazí na ploše s ikonou aplikace ### Počítač (Chrome / Edge) 1. Otevřete ovládací panel OmniRoute 2. Klikněte na **ikonu instalace** v adresním řádku (nebo na ⋮ → „Nainstalovat OmniRoute...“) 3. Potvrďte výzvu 4. OmniRoute se otevře jako samostatné okno — bez karet a adresního řádku ## Funkce ### Zobrazení na celou obrazovku Manifest je nakonfigurován pomocí `display: "fullscreen"`, což znamená, že nainstalovaná aplikace využívá celou obrazovku — bez ovládacích prvků prohlížeče a překrývání stavového řádku. Díky tomu ovládací panel působí jako skutečně nativní aplikace. ### Podpora režimu offline OmniRoute obsahuje service worker (`sw.js`), který zajišťuje inteligentní ukládání do mezipaměti: | Typ prostředku | Strategie | Chování | | ----------------------------------------------------------------- | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | | **Aplikační prostředí** | Nejprve mezipaměť | `/`, `/offline`, manifest a ikony jsou při instalaci předem uloženy do mezipaměti | | **Statické prostředky** (CSS, JS, obrázky, písma) | Nejprve síť, s náhradou z mezipaměti | Načte aktuální verzi ze sítě; při režimu offline použije mezipaměť | | **Balíčky Next.js** (`/_next/`) | Nejprve síť, s aktualizací mezipaměti | Načte obsah ze sítě a aktualizuje mezipaměť; při režimu offline poskytne verzi z mezipaměti | | **Navigační požadavky** | Obejití (nikdy se nezachytávají) | Prohlížeč zajišťuje přechod z HTTP/3 na HTTP/2; nefunkční soket QUIC se nesmí změnit na `Response.error()` | | **Trasy API / ovládacího panelu** (`/api/`, `/a2a`, `/dashboard`) | Obejití (nikdy se neukládají do mezipaměti) | Vždy směřují přímo na server — service worker je nikdy nezachytává | ### Stránka pro režim offline Když není síť dostupná a uživatel přejde na novou stránku, service worker zobrazí vyhrazenou stránku `/offline`, která: - Zobrazuje srozumitelnou zprávu **„Problém s připojením“** - Zobrazuje živý **indikátor stavu online/offline**, který se aktualizuje v reálném čase - Nabízí tlačítko **„Opakovat připojení“** pro opětovné načtení po obnovení připojení - Obsahuje odkaz na **stavovou stránku** pro diagnostiku ### Ikony aplikace OmniRoute poskytuje ikony optimalizované pro jednotlivé platformy: | Soubor | Velikost | Používá se pro | | ---------------------- | ---------------- | ----------------------------------------------------- | | `icon-512.png` | 512×512 | Výzva k instalaci v systému Android, úvodní obrazovka | | `apple-touch-icon.png` | 180×180 | Ikona na ploše systému iOS | | `icon-192.svg` | 192×192 (vektor) | Adaptivní ikona systému Android | | `apple-touch-icon.svg` | 180×180 (vektor) | Záložní varianta pro zařízení Apple | | `favicon.svg` | Vektor | Karty prohlížeče | | `favicon.ico` | Více velikostí | Starší prohlížeče | ### Automatická registrace Service worker se automaticky registruje prostřednictvím komponenty `` v kořenovém rozvržení. Uživatel nemusí provádět žádnou akci — aplikaci lze nainstalovat, jakmile prohlížeč rozpozná platný manifest a service worker. ## Technická architektura ### Manifest webové aplikace (`manifest.webmanifest`) Generován frameworkem Next.js prostřednictvím `src/app/manifest.ts`: ```json { "name": "OmniRoute", "short_name": "OmniRoute", "description": "OmniRoute is an AI gateway for multi-provider LLMs. One endpoint for all your AI providers.", "start_url": "/", "scope": "/", "display": "fullscreen", "orientation": "any", "background_color": "#0b0f1a", "theme_color": "#0b0f1a", "icons": [ { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }, { "src": "/apple-touch-icon.png", "sizes": "180x180", "type": "image/png" } ] } ``` ### Service Worker (`public/sw.js`) Standardní service worker (bez závislostí na frameworku) s následujícími funkcemi: - **Fáze instalace**: Předem ukládá aplikační prostředí do mezipaměti (kořenovou stránku, offline stránku, manifest a ikony) - **Fáze aktivace**: Odstraňuje staré verze mezipaměti a přebírá kontrolu nad všemi klienty - **Fáze načítání**: Inteligentně směruje požadavky podle jejich typu (navigace, statický prostředek, API) - **Verzování mezipaměti**: `omniroute-pwa-v3` — zvýšením této verze vynutíte při aktualizaci vytvoření nové mezipaměti ### Metadata rozvržení (`src/app/layout.tsx`) Kořenové rozvržení poskytuje všechny meta tagy vyžadované pro kompatibilitu s PWA: - Odkaz `manifest` na `/manifest.webmanifest` - `apple-web-app-capable: true` pro samostatný režim v systému iOS - `apple-web-app-status-bar-style: black-translucent` - `mobile-web-app-capable: yes` pro Chrome v systému Android - `theme-color: #0b0f1a` - `viewport-fit: cover` pro vykreslování od okraje k okraji ### Komponenta: `PwaRegister` Tato klientská komponenta umístěná v `src/shared/components/PwaRegister.tsx`: 1. Spustí se při připojení komponenty (pouze na straně klienta) 2. Ověří podporu `serviceWorker` v prohlížeči 3. Tiše zaregistruje `/sw.js` (chyby jsou potlačeny, aby neblokovaly aplikaci) 4. Nic nevykresluje (`return null`) — jde o komponentu sloužící pouze k provedení vedlejšího efektu ## Použití s Termuxem (Android) Při spuštění OmniRoute v systému Android prostřednictvím Termuxu funguje PWA bez problémů: 1. Spusťte OmniRoute v Termuxu: `npx omniroute` 2. Otevřete Chrome na stejném telefonu: `http://localhost:20128` 3. Nainstalujte PWA pomocí možnosti „Přidat na plochu“ 4. PWA se připojí k místnímu serveru Termux — vše běží přímo v zařízení Tato kombinace znamená, že váš telefon se systémem Android je zároveň **serverem** (Termux) i **klientem** (PWA) — tvoří tak kompletní samostatnou bránu AI. ## Použití z jiných zařízení Nainstalujte PWA na libovolné zařízení, které má prostřednictvím prohlížeče přístup k vašemu serveru OmniRoute: - **Jiný telefon/tablet**: Přejděte na `http://PHONE_IP:20128` a nainstalujte PWA - **Notebook**: Otevřete Chrome/Edge a nainstalujte aplikaci jako desktopovou PWA - **Chytrý televizor s prohlížečem**: Otevřete ovládací panel v režimu celé obrazovky ## Přizpůsobení ### Název instance Název PWA respektuje nastavení **Název instance** v nabídce `Dashboard → Settings`. Pokud instanci přejmenujete na „My AI Gateway“, nainstalovaná PWA zobrazí tento název. ### Vlastní favicon Pokud prostřednictvím nabídky `Dashboard → Settings` nahrajete vlastní favicon, ikona PWA na desktopu bude tuto vlastní ikonu používat. Ikony na domovské obrazovce mobilního zařízení používají předem připravené soubory `icon-512.png` a `apple-touch-icon.png`. ## Omezení - **Žádná push oznámení** — Service worker neimplementuje Push API. Oznámení místo toho zpracovává aplikace Electron. - **Žádná synchronizace na pozadí** — Offline akce nejsou zařazovány do fronty pro pozdější opakované provedení. PWA slouží primárně k prohlížení ovládacího panelu. - **Omezení systému iOS** — Safari v systému iOS nepodporuje všechny funkce PWA (např. výzvy k instalaci je nutné vyvolat ručně a service workery na pozadí jsou omezené). - **Velikost mezipaměti** — Service worker ukládá do mezipaměti pouze statické prostředky. Velké datové části odpovědí z tras `/api/` se nikdy neukládají do mezipaměti. - **Vlastní ikony na mobilních zařízeních** — Změna faviconu v nastavení neaktualizuje ikonu na domovské obrazovce mobilního zařízení (to vyžaduje opětovné vygenerování ikon PWA). ## Přehled souborů | Soubor | Účel | | --------------------------------------- | ------------------------------------------------------------------- | | `src/app/manifest.ts` | Trasa manifestu Next.js (generuje `manifest.webmanifest`) | | `public/sw.js` | Service worker s logikou ukládání do mezipaměti | | `src/shared/components/PwaRegister.tsx` | Klientská komponenta, která registruje service worker | | `src/app/offline/page.tsx` | Náhradní offline stránka s živým indikátorem stavu | | `src/app/layout.tsx` | Kořenové rozvržení s metadaty PWA (apple-web-app, theme-color atd.) | | `public/icon-512.png` | Ikona PNG 512×512 (Android, úvodní obrazovka) | | `public/apple-touch-icon.png` | Ikona PNG 180×180 (domovská obrazovka iOS) | | `public/icon-192.svg` | Ikona SVG 192×192 (adaptivní ikona pro Android) | | `public/apple-touch-icon.svg` | Ikona SVG 180×180 (záložní varianta pro Apple) |