Přemýšleli jste někdy nad tím, jak se zdá, že některé weby fungují, i když jste offline? Tajemství je jednoduché: tyto webové stránky mají servisní pracovníky.
Servisní pracovníci jsou klíčovou technologií mnoha nativních funkcí moderních webových aplikací podobných aplikacím.
Co jsou servisní pracovníci?
Servisní pracovníci jsou specializovaným typem Weboví pracovníci JavaScriptu. Service worker je soubor JavaScriptu, který funguje trochu jako proxy server. Zachycuje odchozí síťové požadavky z vaší aplikace a umožňuje vám vytvářet vlastní odpovědi. Můžete například uživateli poskytnout soubory uložené v mezipaměti, když je offline.
Servisní pracovníci vám také umožňují přidat do webových aplikací funkce, jako je synchronizace na pozadí.
Proč servisní pracovníci?
Weboví vývojáři se již dlouhou dobu snaží rozšířit možnosti svých aplikací. Než přišli servisní pracovníci, mohli jste k tomu použít různá řešení. Zvláště pozoruhodný byl AppCache, díky kterému bylo ukládání zdrojů do mezipaměti pohodlné. Bohužel to mělo problémy, které z něj udělaly nepraktické řešení pro většinu aplikací.
AppCache se zdál být dobrý nápad, protože vám umožnila určit aktiva, která se mají uložit do mezipaměti opravdu snadno. Vytvářela však mnoho předpokladů o tom, co jste se snažili udělat, a pak se strašlivě rozbila, když vaše aplikace tyto předpoklady přesně nesplňovala. Přečtěte si knihu Jake Archibald (bohužel s názvem, ale dobře napsanou) Aplikační mezipaměť je douchebag Více podrobností. (Zdroj: MDN)
Servisní pracovníci jsou současným pokusem snížit omezení webových aplikací bez nevýhod techniky, jako je AppCache.
Případy použití pro servisní pracovníky
Co přesně vám tedy pracovníci služeb nechávají dělat? Servisní pracovníci vám umožňují přidávat do vaší webové aplikace funkce, které jsou charakteristické pro nativní aplikace. Mohou také poskytovat běžné prostředí na zařízeních, která nepodporují servisní pracovníky. Takovým aplikacím se někdy říká Progresivní webové aplikace (PWA).
Zde jsou některé z funkcí, které servisní pracovníci umožňují:
- Umožnit uživateli pokračovat v používání aplikace (nebo alespoň jejích částí), když již není připojen k internetu. Servisní pracovníci toho dosahují poskytováním prostředků uložených v mezipaměti v reakci na požadavky.
- V prohlížečích založených na Chromiu je servisní pracovník jedním z požadavků na instalaci webové aplikace.
- Servisní pracovníci jsou nezbytní k tomu, aby vaše webová aplikace mohla implementovat push notifikace.
Životní cyklus servisního pracovníka
Servisní pracovníci mohou kontrolovat požadavky na celý web nebo pouze na část stránek webu. Konkrétní webová stránka může mít pouze jednoho aktivního servisního pracovníka a všichni servisní pracovníci mají životní cyklus založený na událostech. Životní cyklus servisního pracovníka obecně vypadá takto:
- Registrace a stažení pracovníka. Život servisního pracovníka začíná, když jej zaregistruje soubor JavaScript. Pokud je registrace úspěšná, servisní pracovník se stáhne a poté spustí ve speciálním vláknu.
- Když se načte stránka řízená servisním pracovníkem, servisní pracovník obdrží událost 'instalace'. Toto je vždy první událost, kterou servisní pracovník obdrží, a můžete pro tuto událost nastavit posluchače uvnitř pracovníka. Událost 'install' se obecně používá k načtení a/nebo kešování jakýchkoli prostředků, které servisní pracovník potřebuje.
- Poté, co servisní pracovník dokončí instalaci, obdrží událost 'activate'. Tato událost umožňuje pracovníkovi vyčistit nadbytečné zdroje používané předchozími servisními pracovníky. Pokud aktualizujete servisního pracovníka, událost activate se spustí pouze tehdy, když je to bezpečné. To je, jakmile nejsou načteny žádné stránky, které stále používají starou verzi service worker.
- Poté má servisní pracovník plnou kontrolu nad všemi stránkami, které byly načteny po úspěšné registraci.
- Poslední fází životního cyklu je redundance, ke které dochází, když je servisní pracovník odebrán nebo nahrazen novější verzí.
Jak používat Service Workers v JavaScriptu
Service Worker API (MDN) poskytuje rozhraní, které vám umožňuje vytvářet a komunikovat s pracovníky služeb v JavaScriptu.
Servisní pracovníci řeší především síťové požadavky a další asynchronní události. Výsledkem je, že rozhraní API pro servisního pracovníka intenzivně využívá Sliby a asynchronní programování.
Chcete-li vytvořit servisního pracovníka, první věc, kterou musíte udělat, je zavolat na navigator.serviceWorker.register() metoda. Zde je návod, jak by to mohlo vypadat:
pokud ('serviceWorker' v navigátoru) {
navigator.serviceWorker.register('/sw.js').then(funkce(Registrace){
console.log('Registrace servisního pracovníka byla úspěšná:', Registrace);
}).catch((chyba) => { console.log('Registrace servisního pracovníka se nezdařila:', chyba); });
} jiný {
console.log('Servisní pracovníci nejsou podporováni.');
}
Nejvzdálenější blok if provádí detekci prvků. Zajišťuje, že kód související se servisním pracovníkem poběží pouze v prohlížečích, které podporují servisní pracovníky.
Dále kód zavolá Registrovat metoda. Předá mu cestu servisnímu pracovníkovi (vzhledem k původu webu), aby jej zaregistroval a stáhl. The Registrovat metoda také přijímá volitelný parametr zvaný rozsah, který lze použít k omezení stránek ovládaných pracovníkem. Servisní pracovníci ve výchozím nastavení řídí všechny stránky aplikace. The Registrovat metoda vrací Promise, který označuje, zda byla registrace úspěšná.
Pokud se příslib vyřeší, servisní pracovník se úspěšně zaregistroval. Kód pak vytiskne do konzole objekt představující registrovaného servisního pracovníka.
Pokud se proces registrace nezdaří, kód zachytí chybu a zaznamená ji do konzole.
Dále je zde zjednodušený příklad toho, jak může samotný servisní pracovník vypadat:
self.addEventListener('Nainstalujte', (událost) => {
event.waitAuttil(NovýSlib((vyřešit, zamítnout) => {
console.log("dělat nastavovací věci")
odhodlání()
}))
console.log("Servisní pracovník dokončil instalaci")
})self.addEventListener('aktivovat', (událost) => {
event.waitAuttil(NovýSlib((vyřešit, zamítnout) => {
console.log("dělat úklidové práce!")
odhodlání()
}))
console.log('aktivace hotová!')
})
self.addEventListener('vynést', (událost) => {
console.log("Požadavek zachycen", událost)
});
Tento demo service worker má tři posluchače událostí, registrované proti sobě. Má jeden pro událost 'install', 'activate' a 'fetch'.
Uvnitř prvních dvou posluchačů kód používá Počkej do metoda. Tato metoda přijímá slib. Jeho úkolem je zajistit, aby servisní pracovník počkal na vyřešení nebo odmítnutí slibu, než přejde k další události.
Posluchač načtení se spustí vždy, když je zadán požadavek na prostředek, který servisní pracovník řídí.
Prostředky ovládané servisním pracovníkem zahrnují všechny stránky, které kontroluje, a také veškerá aktiva, na která tyto stránky odkazují.
Vylepšete své webové aplikace pomocí Service Workers
Servisní pracovníci jsou zvláštním druhem webových pracovníků, kteří slouží jedinečnému účelu. Sedí před síťovými požadavky, aby umožnily funkce, jako je offline přístup k aplikacím. Použití servisních pracovníků ve webové aplikaci může výrazně zlepšit její uživatelskou zkušenost. Pomocí rozhraní API pro servisní pracovníky můžete vytvářet servisní pracovníky a komunikovat s nimi.
