Offline režim (offline mode)

Příklady z praxe

1. 01

   Terénní technik bez signálu

   Servisní aplikace stahuje ráno seznam zakázek do SQLite v telefonu. Technik v suterénu bez signálu vyplní protokol, vyfotí zařízení a uloží podpis; záznam dostane lokální UUID a příznak nesynchronizováno. Po návratu do dosahu sítě fronta odešle protokoly i fotky a server je přijme právě jednou, protože UUID slouží jako idempotenční klíč.

2. 02

   Fronta zápisů v IndexedDB

   Webová aplikace nezapisuje přímo na API, ale do fronty v IndexedDB. Odesílací rutina se spustí při startu aplikace a při události online; každý pokus buď položku odstraní, nebo ji ponechá pro další kolo. Díky stabilnímu clientId nevzniknou duplicity ani při opakovaném odeslání.

   async function enqueue(op) {
     const db = await openDB('sync');
     await db.put('queue', { ...op, clientId: crypto.randomUUID(), at: Date.now() });
     flush().catch(() => {}); // pokus hned, jinak později
   }
   
   async function flush() {
     const db = await openDB('sync');
     for (const item of await db.getAll('queue')) {
       const res = await fetch('/api/records', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json',
                    'Idempotency-Key': item.clientId },
         body: JSON.stringify(item)
       });
       if (res.ok) await db.delete('queue', item.clientId);
       else break; // zachovej pořadí operací
     }
   }
   
   window.addEventListener('online', () => flush());

Časté omyly

MýtusStačí zapnout cache a aplikace bude fungovat offline.

Ve skutečnostiCache vyřeší jen načtení souborů a čtení dat. Offline režim stojí a padá s tím, co se stane se změnami pořízenými bez sítě: potřebuje frontu zápisů, idempotentní API a pravidlo pro řešení konfliktů.

Mýtusnavigator.onLine spolehlivě řekne, jestli je uživatel online.

Ve skutečnostinavigator.onLine hlásí pouze existenci síťového rozhraní. Zařízení připojené k captive portálu nebo k síti s nedostupným backendem je stále hlášeno jako online, takže skutečný stav se pozná až podle výsledku reálného požadavku.

MýtusOffline režim je záležitost nativních aplikací, web to neumí.

Ve skutečnostiService worker, IndexedDB a Cache Storage umožňují plnohodnotný offline provoz i v prohlížeči. Rozdíly zůstávají v limitech úložiště, v možnosti běhu na pozadí a v tom, jak agresivně systém data odpojené aplikace uklízí.

Časté dotazy

Kolik dat lze v prohlížeči uložit pro offline režim?

Kapacita offline úložiště v prohlížeči není pevně daná. Prohlížeče přidělují kvótu podle volného místa na disku a podle toho, jak často uživatel web navštěvuje; typicky jde o podíl z dostupného prostoru, nikoli o pevný limit v megabajtech. Skutečnou hodnotu zjistí aplikace přes Storage API. Data mohou být při nedostatku místa smazána, pokud si web nevyžádá trvalé úložiště. Pro velké objemy, například mapové podklady nebo fotodokumentaci, se proto vyplatí stahovat data po částech a nabídnout uživateli ruční správu stažených balíčků.

Jak zajistit, aby se offline zápisy neuložily na serveru dvakrát?

Duplicitám v offline režimu se předchází idempotencí. Klient vygeneruje identifikátor operace už v zařízení, typicky UUID, a posílá ho s každým pokusem o odeslání, například v hlavičce Idempotency-Key. Server si zpracované identifikátory pamatuje a při opakovaném doručení vrátí původní výsledek místo vytvoření nového záznamu. Tento postup je nutný, protože fronta nikdy nemá jistotu, zda předchozí požadavek serverem prošel a odpověď se jen ztratila cestou zpět.

Je bezpečné držet citlivá data v offline úložišti?

Offline úložiště zvyšuje riziko úniku, protože data zůstávají v zařízení i po zavření aplikace. Doporučuje se ukládat jen nezbytný výřez dat, nikoli celou databázi, mazat lokální obsah při odhlášení a spoléhat na šifrování celého disku, které nabízejí mobilní operační systémy. Přihlašovací tokeny patří do systémového bezpečného úložiště, ne do IndexedDB. U zdravotnických nebo osobních údajů je navíc nutné posoudit uložení dat v zařízení v rámci GDPR a popsat ho v dokumentaci zpracování.

Jak testovat offline režim, aby se chyby našly před nasazením?

Testování offline režimu vyžaduje víc než vypnutí Wi-Fi. Kromě úplného výpadku je potřeba simulovat pomalou a ztrátovou síť, přerušení uprostřed odesílání a captive portál, který vrací HTML místo odpovědi API. Vývojářské nástroje prohlížeče umožňují omezit propustnost i vypnout síť pro konkrétní záložku. Automatizované testy by měly ověřit, že fronta přežije restart aplikace, že se pořadí operací zachová a že souběžná editace stejného záznamu skončí definovaným výsledkem, ne tichou ztrátou dat.

Zdroje

1. Service Worker API(otevře se v novém okně)MDN Web Docs
2. IndexedDB API(otevře se v novém okně)MDN Web Docs
3. Service Workers(otevře se v novém okně)W3C
4. SQLite Documentation(otevře se v novém okně)SQLite
5. Conflict-free replicated data type(otevře se v novém okně)Wikipedia

Související pojmy

• CacheCache je mezipaměť, do které se ukládá výsledek náročné operace, aby se při dalším stejném dotazu nemusel počítat znovu. Vyměňuje čerstvost dat za rychlost a téměř vždycky přináší otázku, kdy uloženou hodnotu zahodit.
• IdempotenceIdempotence je vlastnost operace, u které opakované provedení se stejnými vstupy skončí ve stejném stavu jako provedení jediné. Je to základní pojistka proti dvojímu zaúčtování, když se požadavek kvůli výpadku sítě odešle dvakrát.
• Progressive Web AppProgressive Web App je webová aplikace navržená tak, aby se v podporovaném prohlížeči chovala zčásti jako aplikace instalovaná v zařízení. Využívá HTTPS, manifest webové aplikace a service worker pro spouštění z ikony, práci s cache, offline režim a případně notifikace, aniž musí být distribuována přes obchod s aplikacemi.
• Service WorkerService Worker je skript prohlížeče, který běží na pozadí mimo stránku a funguje jako programovatelný proxy server mezi webovou aplikací a sítí. Zachytává odchozí požadavky, může na ně odpovědět z mezipaměti Cache Storage, a díky tomu umožňuje offline režim, rychlejší načítání i příjem push notifikací bez otevřené záložky.
• 3D model3D model je digitální reprezentace objektu nebo prostoru ve třech rozměrech, složená z geometrie, materiálů a často i textur, animací či fyzikálních vlastností. Používá se v hrách, filmech, průmyslovém návrhu, architektuře, e-commerce i simulacích, kde software z modelu počítá zobrazení nebo další data.
• ACIDACID je sada čtyř vlastností databázové transakce: atomicity, consistency, isolation a durability. Zaručuje, že skupina zápisů proběhne jako jeden celek, neporuší definovaná pravidla databáze, nebude se nebezpečně míchat s jinými transakcemi a po potvrzení přežije pád systému, například při převodu peněz.
• Adaptive IconAdaptivní ikona je formát ikony aplikace na Androidu, který se místo jedné hotové bitmapy skládá z oddělených vrstev: pozadí a popředí. Systém výsledný tvar sám ořízne podle masky výrobce zařízení a může vrstvy animovat nebo přebarvit. Vývojář tak dodá jeden zdroj a launcher z něj vytvoří kruh, čtverec i squircle.
• Adresa v pamětiAdresa v paměti je číslo, kterým procesor jednoznačně označuje konkrétní buňku operační paměti, obvykle jeden bajt. Program pomocí adresy říká, odkud má data načíst nebo kam je zapsat. Adresy tvoří souvislý číselný rozsah, jehož velikost určuje šířka adresní sběrnice a architektura, typicky 32 nebo 64 bitů.