Co je to servisní pracovník? Přeměňte svůj web na výkonný systém pro okamžité načítání!“

Snažíte se zjistit, co je to service worker? Nejste sami!

Service Worker je skript, který se spouští na pozadí, ve vlákně odděleném od uživatelského rozhraní prohlížeče. Díky mezipaměti Service Worker může web fungovat offline. Jsou technickou silou, která webovou stránku povyšuje na progresivní webovou aplikaci. Umožňují hlubokou integraci platformy, například bohaté ukládání do mezipaměti, push oznámení a synchronizaci na pozadí.

Service workers jsou navrženy jako rozšiřitelná platforma, v současné době se plánují další funkce.

Nemají přístup k DOM, ale mohou zachytit všechny síťové požadavky. To dává vývojářům možnost kontrolovat, jak jsou požadavky zpracovávány, a poskytuje bohatý způsob, jak zajistit, aby webové stránky fungovaly offline.

Service workers jsou označovány za převratnou změnu pro web. Nemyslím si, že je to pouhé přehánění, protože umožňují mnoho tolik potřebných funkcí a činí základní architekturu, kterou jsem léta používal, nativní.

Service Workers zní úžasně!“

Jedná se o klíčovou technologii neboli moderní webové API, které stojí za progresivními webovými aplikacemi. Bez service workeru je web jen webem, přidejte service worker a máte aplikaci.

Existuje několik klíčových vlastností servisních pracovníků, kterým musíte rozumět:

1. Service Worker je soubor JavaScriptu
2. Spustí se v odděleném vlákně od uživatelského rozhraní
3. Nemají přímý přístup k DOM
4. Existuje životní cyklus neboli řada událostí, kterými service worker prochází, aby se stal aktivním, vysvětlíme později
5. Jsou živé pouze v době, kdy se používají, takže nezatěžují baterii
6. Jsou izolovány od původu nebo domény, u které jsou registrovány
7. Service Workers vyžadují HTTPS
8. Mohou posílat zprávy do uživatelského rozhraní a z něj
9. K fungování nevyžadují otevřenou webovou stránku
10. Podporují je všechny hlavní prohlížeče, včetně Safari pro iOS
11. Jsou podobné webovým operátorům, ale v mnoha ohledech lepší

• Jak fungují operátoři služeb?
• Rozšiřitelnost Service Workerů
• Životní cyklus Service Workerů
• Jak dlouho vydrží Service Workery
• Jak zjistím, zda je Service Worker registrován?
• Jak zruším registraci pracovníka služby
• Ukládání pracovníků služby do mezipaměti
• Jak aktualizuji mezipaměť pracovníka služby
• Jaké prohlížeče podporují pracovníky služby?
• Jaký je rozdíl mezi Service Workerem a Web Workerem
• Co Service Worker neumí

Jak Service Workery fungují?

Service Worker stojí mezi prohlížečem a sítí, funguje jako proxy server a zpracovává soubor úloh, které nejsou zaměřeny na uživatelské rozhraní. Jsou řízeny událostmi a žijí mimo proces prohlížeče, což jim umožňuje pracovat bez aktivní relace prohlížeče. Service worker je skript, který se spouští ve vlákně odděleném od uživatelského rozhraní. Díky tomu může service worker vykonávat úlohy nesouvisející s uživatelským rozhraním a web tak funguje lépe.

Service workery se ukončují, když se nepoužívají, a obnovují se, když jsou potřeba, což zabraňuje jejich zatěžování procesoru a vybíjení baterie. Fungují jako programovatelný síťový proxy server neboli prostředník mezi prohlížečem a sítí a umožňují vývojářům navrhnout, jak budou síťové požadavky zpracovávány.

První schopností, kterou service worker přináší na web, je možnost povolit funkce offline s granulární kontrolou. K tomu slouží bohaté rozhraní API pro ukládání do mezipaměti a zachycení všech síťových požadavků před jejich odchodem.

Ukládání do mezipaměti umožňuje nejen offline zážitky, ale webové stránky se mohou po načtení z mezipaměti načíst okamžitě. Díky ukládání do mezipaměti Service Worker je síť postupným vylepšením nebo není nutná k tomu, aby byl web použitelný.

Rozšiřitelnost Service Worker

Podceňovanou vlastností Service Worker je jeho rozšiřitelnost Service Worker je navržen jako páteř, která podporuje další funkce. První dvě funkce dodávané v prohlížečích jsou nativní push oznámení a synchronizace na pozadí. V současné době se diskutuje o dalších nových API, které by se měly v prohlížečích začít objevovat v blízké budoucnosti.

Servisní pracovníci žijí ve vlastním vlákně a nemají přístup k DOM. Mají také svůj vlastní globální rozsah, na který se odkazuje pomocí objektu ‚self‘.

Také vyžadují, aby byla stránka obsluhována pomocí protokolu HTTPS. Tento požadavek je způsoben výkonnými funkcemi, které service workers nabízejí. Protokol HTTPS zabraňuje mnoha běžným útokům. Dnes by měly být všechny weby obsluhovány pomocí protokolu HTTPS, protože byly odstraněny překážky pro implementaci a minimální množství zabezpečení, které nabízejí.

Ty jsou také asynchronní. To znamená, že všechna rozhraní API podporují sliby. To také znamená, že některá rozhraní API a funkce nejsou v service workers přístupné. Nejvýznamnější z nich je localStorage. Místo toho by se data měla ukládat pomocí IndexedDB.

Životní cyklus service workeru

Než se vývojáři ponoří do těchto skvělých funkcí service workeru, musí pochopit životní cyklus.

Service worker musí být registrován webovou stránkou. Protože některé prohlížeče stále nepodporují service workery, měli byste před registrací service workeru provést kontrolu funkcí. To se provádí kontrolou přítomnosti ‚serviceWorker‘ v navigátoru.

if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(function(registration) { // Registration was successful }) .catch(function(err) { // registration failed :( }); } 

Pro registraci service workeru zavolejte navigator.serviceWorker.register. Předejte cestu k service workeru. Funkce register vrátí slib.

Pokud je slib úspěšný, vrátí odkaz na objekt registrace service workeru. Odtud můžete podle potřeby provádět specifické úlohy uživatelského rozhraní.

Standardní události Service Worker

1. install
2. activate
3. fetch
4. push (není podporováno prohlížečem Safari)
5. sync (zatím není podporováno většinou prohlížečů)

Při registraci service workeru dojde k události „install“. V této události se nejčastěji provádí úloha zvaná pre-caching.

Pre-caching je, když se předem definovaný seznam souborů aktiv potřebných k vytvoření stránky nebo webu a přidá do mezipaměti předtím, než jsou vyžádány. Při tom se využívá mezipaměť pracovníka služby k uchování těchto odpovědí.

self.addEventListener("install", event => { event.waitUntil( caches.open(preCacheName) .then(function (cache) { return cache.addAll(precache_urls); }) ); }); 

Událost instalace se spouští pouze jednou za životnost pracovníka služby. Událost se znovu nespustí, dokud není pracovník služeb aktualizován.

Další událostí, která se spouští v rámci životního cyklu registrace, je ‚activate‘. Když je pracovník služby nainstalován, nestane se okamžitě aktivním. Přirozenou posloupností je, že nový service worker čeká, dokud nejsou všichni ‚klienti‘ service workeru uzavřeni.

Důvodem, proč jsou service workery navrženy tak, aby nepřevzaly činnost okamžitě, je, aby nenarušovaly uživatelské prostředí.

Funkce skipWaiting donutí čekající service worker stát se aktivním. Tato funkce by měla být použita pouze v případě, že jste si jisti, že nový pracovník služby nerozbije žádné stávající klienty.

self.skipWaiting(); 

Jakmile se pracovník služby stane aktivním, vyvolá se událost „activate“.

self.addEventListener("activate", event => { //on activate event.waitUntil(clients.claim()); }); 

Tato událost se běžně používá k provádění jakýchkoli úkolů čištění nebo migrace. Například odstranění starších mezipamětí, které by mohly být v konfliktu s novými mezipaměťmi service workerů.

Jak dlouho vydrží service workery pracovat?

Neexistuje žádné pevné pravidlo, jak dlouho prohlížeč udržuje service worker v chodu. Vnitřní engine prohlížeče použije sadu heuristik, aby určil, kdy proces service worker ukončit.

Všeobecně platí, že pokud je webová stránka neaktivní, proces se ukončí po minutě nebo dvou, možná už po 30 sekundách.

V realitě bude přesná doba záviset na hardwaru, způsobu používání atd.

Dobrá zpráva je, že zapnutí pracovníka služby trvá několik milisekund. Je to tak rychlé, že si žádného zpoždění ani nevšimnete. Také nemusíte nic speciálního programovat, abyste se vypořádali se scénářem bez service workeru, vaše stránky budou prostě fungovat. Kouzlo postupného vylepšování.

Jak zkontrolovat, zda je pracovník služby zaregistrován?

Existuje několik způsobů, jak zkontrolovat, zda je pracovník služby zaregistrován. Nejjednodušší je zavolat metodu serviceworkers.getRegistrations.

 navigator.serviceWorker.getRegistrations().then(registrations => { console.log(registrations); });

Jedná se o kód, který můžete přidat do skriptu svých stránek, aby zaznamenával registraci pro účely technické podpory nebo ladění vývojářů.

Metoda ‚getRegistrations‘ vrací pole všech pracovníků služeb registrovaných v rámci aktuálního oboru nebo webové stránky.

Pokud pouze zaznamenáváte registraci do konzoly, bude lepší zobrazit záložku Dev Tools ‚Application‘. Ta má podpanel, který zobrazuje vizuální zobrazení registrovaného pracovníka služby originu. Můžete také spouštět události synchronizace na pozadí a testovat push oznámení.

Můžete také odstranit service worker, vynutit aktualizaci a další obecnou správu, která pomáhá při vývoji.

Skutečnou hodnotu nabízí getRegistrations pro jakousi funkci podpory zadních vrátek. Všichni víme, jaké to je, když se snažíte někomu vzdáleně pomoci a nemáte přístup k nástrojům DevTools, abyste mohli problém skutečně vyřešit. Někdy budete chtít nějakou vizuální stránku podpory nebo modální okno, které poskytne informace o stavu aplikace.

Běžný spotřebitel nebude vědět, jak přistupovat k panelu konzoly DevTools. Místo toho můžete v aplikaci vytvořit uživatelské rozhraní pro echo vlastností objektu registrace service workeru.

Jak zrušit registraci service workeru

Snad se nesetkáte se scénářem, kdy by váš kód service workeru vytvořil chybu uživatelského prostředí. V případě, že ano, existuje několik věcí, které můžete udělat pro odstranění nebo zrušení registrace service workeru.

Většina scénářů, kdy budete potřebovat odstranit service worker, bude při vývoji aplikace. V takovém případě můžete k odebrání nebo odstranění service workeru použít nástroje DevTools.

Pokud potřebujete odebrat nebo odstranit nasazeného pracovníka služby, je to trochu složitější. Existují programové způsoby, jak se z této šlamastyky dostat.

Přečtěte si více o technikách odstraňování.

Ukládání pracovníků služeb do mezipaměti

Specifikace pracovníků služeb obsahuje nativní možnosti ukládání do mezipaměti. Ta nahrazuje tradiční appCache, která od svého vzniku způsobovala mnoho problémů se správou. Ukládání do mezipaměti service workerů je mnohem lépe spravovatelné.

Api rozhraní cache poskytuje vrstvu perzistence, která ukládá síťové odpovědi, jež lze vyhledat pomocí odpovídajícího požadavku.

Klíčem k použití ukládání do mezipaměti service workerů je událost „fetch“ service workeru. Tato událost se spouští pro každý síťový požadavek, což umožňuje zachytit požadavek a zkontrolovat, zda byla odpověď uložena do mezipaměti, než se odešle do sítě.

Přístupem k aktivům v místní mezipaměti se můžete vzdát nákladných síťových požadavků. To znamená, že web může fungovat, když není k dispozici žádná síť, je offline nebo je špatné síťové připojení, nízké čárky nebo falešné mobilní připojení (známé jako LiFi).

self.addEventListener("fetch", event => { event.respondWith( fetchFromCache(event) .catch(() => fetch(request) .then(response => addToCache(cacheKey, request, response)) .catch(() => offlineResponse(resourceType, opts)) ) ); }); 

V příkladu výše kód kontroluje, zda byla odpověď dříve uložena do mezipaměti. Pokud ano, je vrácena odpověď uložená v mezipaměti. Pokud ne, je požadavek předán do sítě.

Pokud se požadavek vrátí, je odpověď uložena do mezipaměti a vrácena do uživatelského rozhraní.

Pokud síť selže, logika se vrátí k offline odpovědi.

V kódu příkladu je použito mnoho pohyblivých částí. Podrobnější informace poskytnu v navazujících článcích.

Jak aktualizovat mezipaměť pracovníka služby

Častým omylem je, že jakmile jednou uložíte síťový požadavek do mezipaměti, bude uložen na věčné časy. Není tomu tak. Máte plnou kontrolu nad tím, kdy a jak je mezipaměť zneplatněna a aktualizována.

Jedná se o velmi složité a obsáhlé téma. Myslím, že osobně mohu podrobně popsat asi tři desítky strategií kešování, všechny zahrnují způsob řízení zneplatnění nebo aktualizace mezipaměti.

Myslím, že klíčem ke zneplatnění je určení buď hodnoty času zneplatnění (time to live), manifestu nebo procesu aktualizace na pozadí. V pozdějším případě můžete provést požadavek HEAD, abyste zjistili, zda byla na serveru provedena aktualizace, porovnáním hodnoty naposledy aktualizované hlavičky s časem uložení odpovědi do mezipaměti.

Neexistuje jediná odpověď pro každou aplikaci. Budete si muset naplánovat strategii a být připraveni ji upravit podle toho, jak se bude vaše aplikace používat.

Jaké prohlížeče podporují service workery?

Všechny moderní prohlížeče podporují service workery, přinejmenším ukládání do mezipaměti. Chrome, FireFox a Edge podporují nativní push oznámení a Chrome a Edge mají podporu synchronizace na pozadí.

To znamená, že základní funkce PWA jsou dostupné ve všech zařízeních a prohlížečích. Push a synchronizace na pozadí jsou vylepšení.

Vytvořili jsme několik progresivních webových aplikací, které vyžadovaly sofistikované strategie offline cachování, aby aplikace mohly fungovat offline i v systému iOS. Tyto aplikace vyžadují, aby všechny požadavky, dokonce i akce POST, PUT a DELETE, byly ukládány do mezipaměti ve frontě. Tyto aplikace jsme synchronizovali i v systému iOS, když bylo známo, že připojení jsou dostupná.

Jaký je rozdíl mezi Service Worker a Web Worker

Service Worker a Web Worker jsou podobné nástroje. Oba vykonávají procesy ve vlákně odděleném od uživatelského rozhraní. Skutečný rozdíl spočívá ve skutečném kontextu použití.

Žádný z nich nemá přístup k objektu DOM nebo oknu. Jsou vhodnější pro střední vrstvu nebo dlouhé, procesně náročné úlohy.

Weboví pracovníci se spouštějí pouze tehdy, když je otevřena webová stránka a úloha je spuštěna skriptem na stránce.

Služební pracovník se také může spustit při otevření stránky, ale může být také spuštěn událostí platformy, jako je oznámení push. Webová stránka nemusí být otevřená, aby se service worker mohl spustit.

Service workery také fungují jako proxy mezi sítí a uživatelským rozhraním. Pokud se používá stránka (nejčastější scénář), všechny síťové požadavky HTTPS procházejí přes service worker, jak jste se dozvěděli v části o cachování.

Komunikace mezi uživatelským rozhraním a oběma workery probíhá pomocí metody postMessage a události message. Pokud jste někdy programovali ve více vláknech, je vám tento model velmi dobře známý.

Co servisní pracovník nemůže dělat

Servisní pracovníci nemají přístup k objektu okna

Objekt okna se vykonává ve vlákně uživatelského rozhraní, odděleně od vlákna servisního pracovníka. To znamená, že pracovník služby nemůže přímo manipulovat s prvky DOM. Pracovník služby a okno mohou komunikovat prostřednictvím metody postMessage. Ta umožňuje předávání zpráv tam a zpět. Na každé straně budete muset mít logiku, která bude zprávy zpracovávat a spouštět různé pracovní postupy.

Service Workers vyžadují HTTPS

Protože Service Workers mají tak velký výkon, jsou povoleny pouze tehdy, pokud je stránka servírována pomocí HTTPS. Tím je zajištěna určitá úroveň zabezpečení, aby Service Worker mohl provádět činnosti, k nimž je určen.

Přes protokol HTTP by byl service worker náchylný k útokům typu man in the middle. Vývojáři mohou pracovat na localhostu, díky čemuž nemusíme instalovat místní certifikát TLS.

Jinými slovy odpověď na otázku, zda service worker pracuje na HTTP, zní ne. Stránka se stále vykreslí, ale service worker se nezaregistruje a neprovede.

Jsou pouze asynchronní

Service workery jsou asynchronní, což znamená, že používají a spoléhají se na Promises a API, které Promises používají. To znamená, že synchronní API jako XHR a localStorage nejsou pro service worker dostupné. Nebojte se, můžete použít rozhraní API Fetch (které nahradilo XHR) a IndexedDB. Většina rozhraní API, která přímo neinteragují s objektem okna, je přístupná v service workeru.