Premýšľali ste niekedy nad tým, ako sa zdá, že niektoré webové stránky fungujú, aj keď ste offline? Tajomstvo je jednoduché: tieto webové stránky majú servisných pracovníkov.
Servisní pracovníci sú kľúčovou technológiou mnohých natívnych funkcií moderných webových aplikácií podobných natívnym aplikáciám.
Čo sú to servisní pracovníci?
Servisní pracovníci sú špecializovaným typom Weboví pracovníci JavaScript. Service worker je súbor JavaScript, ktorý funguje trochu ako proxy server. Zachytáva odchádzajúce sieťové požiadavky z vašej aplikácie a umožňuje vám vytvárať vlastné odpovede. Môžete napríklad poskytnúť používateľovi súbory uložené vo vyrovnávacej pamäti, keď je offline.
Servisní pracovníci vám tiež umožňujú pridať do webových aplikácií funkcie, ako je synchronizácia na pozadí.
Prečo Service Workers?
Weboví vývojári sa už dlho snažia rozširovať možnosti svojich aplikácií. Pred príchodom servisných pracovníkov ste mohli použiť rôzne riešenia, aby to bolo možné. Obzvlášť pozoruhodný bol AppCache, vďaka ktorému bolo ukladanie zdrojov do vyrovnávacej pamäte pohodlné. Bohužiaľ mal problémy, ktoré z neho urobili nepraktické riešenie pre väčšinu aplikácií.
AppCache sa zdalo byť dobrým nápadom, pretože vám umožnila určiť aktíva, ktoré sa majú uložiť do vyrovnávacej pamäte, naozaj jednoducho. Vytvoril však veľa predpokladov o tom, čo ste sa pokúšali urobiť, a potom sa hrozne zlomil, keď vaša aplikácia tieto predpoklady presne nespĺňala. Prečítajte si knihu Jake Archibald (bohužiaľ s názvom, ale dobre napísaná) Aplikačná vyrovnávacia pamäť je douchebag pre viac detailov. (Zdroj: MDN)
Servisní pracovníci sú súčasným pokusom o zníženie obmedzení webových aplikácií bez nevýhod techniky, ako je AppCache.
Prípady použitia pre servisných pracovníkov
Čo presne vám teda pracovníci služieb nechajú robiť? Servisní pracovníci vám umožňujú pridávať funkcie, ktoré sú charakteristické pre natívne aplikácie, do vašej webovej aplikácie. Môžu tiež poskytnúť bežné prostredie na zariadeniach, ktoré nepodporujú servisných pracovníkov. Aplikáciám, ako je táto, sa niekedy hovorí Progresívne webové aplikácie (PWA).
Tu sú niektoré z funkcií, ktoré pracovníci servisu umožňujú:
- Umožniť používateľovi naďalej používať aplikáciu (alebo aspoň jej časti), keď už nie je pripojený k internetu. Servisní pracovníci to dosahujú poskytovaním prostriedkov uložených vo vyrovnávacej pamäti v reakcii na požiadavky.
- V prehliadačoch založených na prehliadači Chromium je servisný pracovník jednou z požiadaviek na inštaláciu webovej aplikácie.
- Servisní pracovníci sú potrební na to, aby vaša webová aplikácia mohla implementovať upozornenia push.
Životný cyklus servisného pracovníka
Servisní pracovníci môžu kontrolovať požiadavky pre celú lokalitu alebo len pre časť stránok lokality. Konkrétna webová stránka môže mať iba jedného aktívneho servisného pracovníka a všetci servisní pracovníci majú životný cyklus založený na udalostiach. Životný cyklus servisného pracovníka vo všeobecnosti vyzerá takto:
- Registrácia a stiahnutie pracovníka. Život servisného pracovníka začína, keď ho zaregistruje súbor JavaScript. Ak je registrácia úspešná, servisný pracovník stiahne a potom začne bežať v špeciálnom vlákne.
- Keď sa načíta stránka riadená servisným pracovníkom, servisný pracovník dostane udalosť „inštalácia“. Toto je vždy prvá udalosť, ktorú servisný pracovník dostane, a pre túto udalosť môžete v rámci pracovníka nastaviť poslucháča. Udalosť „install“ sa vo všeobecnosti používa na načítanie a/alebo uloženie akýchkoľvek zdrojov, ktoré servisný pracovník potrebuje.
- Keď servisný pracovník dokončí inštaláciu, dostane udalosť 'activate'. Táto udalosť umožňuje pracovníkovi vyčistiť nadbytočné zdroje používané predchádzajúcimi servisnými pracovníkmi. Ak aktualizujete servisného pracovníka, udalosť aktivácie sa spustí iba vtedy, keď je to bezpečné. Toto je, keď už nie sú načítané žiadne stránky, ktoré stále používajú starú verziu servisného pracovníka.
- Potom má servisný pracovník plnú kontrolu nad všetkými stránkami, ktoré boli načítané po úspešnej registrácii.
- Poslednou fázou životného cyklu je redundancia, ktorá nastáva, keď je servisný pracovník odstránený alebo nahradený novšou verziou.
Ako používať Service Workers v JavaScripte
Service Worker API (MDN) poskytuje rozhranie, ktoré vám umožňuje vytvárať a komunikovať s pracovníkmi služieb v jazyku JavaScript.
Servisní pracovníci sa primárne zaoberajú sieťovými požiadavkami a inými asynchrónnymi udalosťami. Výsledkom je, že API servisného pracovníka intenzívne využíva Sľuby a asynchrónne programovanie.
Ak chcete vytvoriť servisného pracovníka, prvá vec, ktorú musíte urobiť, je zavolať na navigator.serviceWorker.register() metóda. Takto by to mohlo vyzerať:
ak ('serviceWorker' v navigátore) {
navigator.serviceWorker.register('/sw.js').then(funkciu(registrácia){
console.log('Registrácia servisného pracovníka bola úspešná:', registrácia);
}).catch((chyba) => { console.log('Registrácia servisného pracovníka zlyhala:', chyba); });
} inak {
console.log('Servisní pracovníci nie sú podporovaní.');
}
Najvzdialenejší blok if vykonáva detekciu funkcie. Zabezpečuje, že kód súvisiaci so servisným pracovníkom sa spustí iba v prehliadačoch, ktoré podporujú servisných pracovníkov.
Ďalej kód zavolá Registrovať metóda. Odovzdá cestu servisnému pracovníkovi (vzhľadom na pôvod stránky), aby ju zaregistroval a stiahol. The Registrovať metóda tiež akceptuje voliteľný parameter s názvom scope, ktorý možno použiť na obmedzenie stránok kontrolovaných pracovníkom. Servisní pracovníci štandardne riadia všetky stránky aplikácie. The Registrovať metóda vráti Promise, ktorý indikuje, či bola registrácia úspešná.
Ak sa prísľub vyrieši, servisný pracovník sa úspešne zaregistroval. Kód potom vytlačí do konzoly objekt reprezentujúci registrovaného servisného pracovníka.
Ak proces registrácie zlyhá, kód zachytí chybu a prihlási ju do konzoly.
Ďalej uvádzame zjednodušený príklad toho, ako môže vyzerať samotný servisný pracovník:
self.addEventListener('Inštalácia', (udalosť) => {
event.waitUntil(NovýSľub((vyriešiť, zamietnuť) => {
console.log("robiť nastavovacie veci")
vyriešiť()
}))
console.log("Servisný pracovník dokončil inštaláciu")
})self.addEventListener('Aktivovať', (udalosť) => {
event.waitUntil(NovýSľub((vyriešiť, zamietnuť) => {
console.log("robiť upratovacie veci!")
vyriešiť()
}))
console.log('aktivácia hotová!')
})
self.addEventListener('aport', (udalosť) => {
console.log("Žiadosť bola zachytená", udalosť)
});
Tento pracovník demo služby má troch poslucháčov udalostí, ktoré sú zaregistrované proti sebe. Má jednu pre udalosť 'install', 'activate' a 'fetch'.
Vo vnútri prvých dvoch poslucháčov kód používa Počkaj pokial metóda. Táto metóda prijíma prísľub. Jeho úlohou je zabezpečiť, aby servisný pracovník počkal na vyriešenie alebo odmietnutie prísľubu, než prejde na ďalšiu udalosť.
Poslucháč načítania sa spustí vždy, keď sa zadá požiadavka na prostriedok, ktorý obsluhuje servisný pracovník.
Zdroje kontrolované servisným pracovníkom zahŕňajú všetky stránky, ktoré kontroluje, ako aj všetky aktíva, na ktoré sa odkazuje na týchto stránkach.
Vylepšite svoje webové aplikácie pomocou servisných pracovníkov
Servisní pracovníci sú špeciálnym druhom webových pracovníkov, ktorí slúžia jedinečnému účelu. Sedia pred sieťovými požiadavkami, aby umožnili funkcie, ako je prístup k offline aplikáciám. Používanie servisných pracovníkov vo webovej aplikácii môže výrazne zlepšiť jej používateľskú skúsenosť. Pomocou rozhrania API pre servisných pracovníkov môžete vytvoriť servisných pracovníkov a komunikovať s nimi.
