Service Worker

Příklady z praxe

1. 01

   Předvyplnění cache při instalaci

   E-shop chce, aby se úvodní obrazovka zobrazila i bez připojení. Při instalaci Service Worker uloží kostru aplikace a fallback stránku do pojmenované cache. Při každém nasazení se změní název cache, čímž se stará verze při aktivaci smaže.

   const CACHE = 'app-v7';
   
   self.addEventListener('install', (event) => {
     event.waitUntil(
       caches.open(CACHE).then((c) =>
         c.addAll(['/', '/offline.html', '/app.css', '/app.js'])
       )
     );
   });
   
   self.addEventListener('activate', (event) => {
     event.waitUntil(
       caches.keys().then((keys) =>
         Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)))
       )
     );
   });

2. 02

   Network first s offline záložkou

   Zpravodajský web potřebuje vždy čerstvý článek, ale nechce ukázat chybovou stránku prohlížeče, když metro projíždí tunelem. Service Worker zkusí síť, odpověď si uloží, a při selhání sáhne do cache nebo vrátí připravenou offline stránku.

   self.addEventListener('fetch', (event) => {
     if (event.request.mode !== 'navigate') return;
   
     event.respondWith(
       fetch(event.request)
         .then((res) => {
           const copy = res.clone();
           caches.open('pages').then((c) => c.put(event.request, copy));
           return res;
         })
         .catch(() =>
           caches.match(event.request).then((hit) => hit || caches.match('/offline.html'))
         )
     );
   });

Časté omyly

MýtusService Worker se nasadí jednou a pak se o něj není potřeba starat.

Ve skutečnostiService Worker si prohlížeč drží i po nasazení nové verze webu a starou logiku uplatňuje dál, dokud neproběhne aktualizace skriptu a aktivace. Bez promyšleného verzování cache a strategie aktualizace uživatelé vidí zastaralý obsah, aniž by to na serveru šlo poznat.

MýtusService Worker je jen jiný název pro Web Worker.

Ve skutečnostiWeb Worker slouží k výpočtům na pozadí a žije jen po dobu existence stránky, která ho vytvořila. Service Worker je vázaný na původ, ne na záložku, běží i po jejím zavření a jeho hlavní role je zachytávání síťových požadavků.

MýtusSe Service Workerem funguje web offline automaticky.

Ve skutečnostiService Worker sám o sobě nic neukládá. Offline režim vzniká teprve tím, že vývojář explicitně určí, co se do Cache Storage uloží a jak se v události fetch odpovídá při výpadku sítě.

Časté dotazy

Jak vynutit aktualizaci Service Workeru u uživatelů, kteří mají starou verzi?

Aktualizace Service Workeru se spustí tím, že prohlížeč stáhne skript a zjistí, že se jeho obsah bajtově liší od uložené verze. Nová verze pak čeká, dokud uživatel nezavře všechny záložky pod kontrolou staré. Zkrátit to lze voláním skipWaiting v události install a claim v activate, ideálně po potvrzení uživatelem přes zprávu ze stránky. Doporučuje se také posílat skript Service Workeru s krátkou dobou platnosti v HTTP cache, aby prohlížeč nekontroloval zastaralou kopii.

Proč Service Worker vyžaduje HTTPS?

Service Worker může libovolně měnit odpovědi na požadavky celého původu a zůstává registrovaný i po opuštění stránky. Na nešifrovaném spojení by útočník uprostřed cesty mohl podstrčit vlastní skript, který by se v prohlížeči oběti usadil natrvalo a upravoval veškerý obsah webu. Specifikace proto registraci omezuje na zabezpečené kontexty. Výjimkou je localhost a obdobné lokální adresy, aby byl možný vývoj bez certifikátu.

Jak Service Worker odladit, když neběží ve stránce?

Service Worker má vlastní kontext, takže jeho výpisy se neobjeví v konzoli stránky. V Chrome i Edge slouží záložka Application a sekce Service Workers, kde lze vidět stav registrace, vynutit aktualizaci, odregistrovat instanci nebo simulovat offline. Obsah Cache Storage je vidět ve stejné sekci. Firefox nabízí obdobný přehled na adrese about:debugging. Při hledání chyb pomáhá i volba, která dočasně obejde Service Worker a pošle požadavky rovnou na síť.

Ovlivňuje Service Worker SEO a indexaci obsahu?

Service Worker při prvním načtení robotem nehraje roli: vyhledávací robot přichází bez registrovaného skriptu, takže dostane odpověď přímo ze serveru. Obsah tedy musí být dostupný i bez něj. Riziko vzniká opačným směrem: pokud aplikace spoléhá na to, že data doplní až Service Worker z cache, robot uvidí prázdnou stránku. Rychlost načítání pro vracející se uživatele může Service Worker zlepšit, ale měřené metriky Core Web Vitals se sbírají z reálných návštěv, nikoli z prvního průchodu robota.

Zdroje

1. Service Worker API(otevře se v novém okně)MDN Web Docs
2. Cache API(otevře se v novém okně)MDN Web Docs
3. Fetch Standard(otevře se v novém okně)WHATWG

Související pojmy

• HTTPSHTTPS je zabezpečená varianta protokolu HTTP, která přenáší webovou komunikaci přes TLS a tím šifruje obsah, ověřuje identitu serveru a chrání data před úpravou po cestě. Používá se u webů, API i aplikací, kde prohlížeč nebo klient potřebuje důvěryhodné spojení se serverem.
• 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.
• Push notifikacePush notifikace je způsob doručení krátké zprávy z aplikace nebo webu uživateli bez nutnosti, aby měl danou službu právě otevřenou. Využívá oprávnění uživatele, registrační token nebo subscription a doručovací službu platformy; hodí se pro časově důležité události, ne pro běžnou reklamu.
• Hybridní aplikaceHybridní aplikace je aplikace kombinující webové technologie, například HTML, CSS a JavaScript, s nativním obalem pro konkrétní platformu. Uživatel ji obvykle instaluje jako běžnou mobilní aplikaci, ale část rozhraní a logiky běží ve WebView nebo podobné vrstvě. Výhodou je sdílení kódu, kompromisem výkon a integrace se systémem.
• Single Page ApplicationSingle Page Application je webová aplikace, která po prvním načtení obvykle nemění celý HTML dokument, ale aktualizuje rozhraní pomocí JavaScriptu a dat z API. Uživatel tak vnímá plynulejší navigaci, zatímco vývojář řeší klientský routing, stav aplikace, výkon prvního načtení a dopady na SEO.
• LocalStorageLocalStorage je prohlížečové úložiště typu klíč–hodnota, které webové stránce umožňuje ukládat řetězce na disk uživatele bez data expirace. Data zůstávají po zavření záložky i restartu počítače, jsou oddělená podle původu (schéma, doména, port) a přistupuje se k nim synchronně z JavaScriptu přes rozhraní window.localStorage.
• Offline režimOffline režim je schopnost aplikace fungovat i bez připojení k síti: data i kód má uložené lokálně v zařízení, změny zapisuje do místního úložiště a odesílá je na server až ve chvíli, kdy se spojení obnoví. Uživatel tak může číst obsah i pořizovat záznamy bez ohledu na dostupnost sítě.
• 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.