Co je to servisní pracovník?
Service worker je malý soubor, který vám umožní ukládat soubory a další aktiva do mezipaměti na počítači uživatele. Jak se to liší od ukládání do mezipaměti na straně serveru? Protože jsou aktiva uložena na počítači uživatele, nikoli na serveru, není třeba procházet sítí. To nabízí mnoho výhod pro spolehlivost a rychlost vaší aplikace. Vzhledem k tomu, že aplikace je poskytována z mezipaměti, není nutné přecházet přes síť, což může zabrat spoustu času.
Proč to vaší aplikaci pomůže
Přidání servisního pracovníka nejen pomůže zvýšit rychlost vaší aplikace, ale nabídne spolehlivost, kterou vaši uživatelé dosud neviděli. Odstraněním okamžité potřeby přístupu k internetu můžeme pomoci komukoli, kdo má špinavé připojení k internetu – a opravdu každému má špinavé připojení k internetu.
Životní cyklus
Životní cyklus servisního pracovníka vypadá trochu takto:
- Instalovat
- Aktivovat
- Načíst
Podívejme se na tyto události jednotlivě.
Instalovat
Před událostí instalace vaše aplikace nemá servisního pracovníka. Prohlížeč zjistí událost registrace z vašeho kódu a nainstaluje servisního pracovníka. Váš servisní pracovník bude obsahovat funkci nazvanou oninstall který se postará o to, které soubory jsou uloženy v mezipaměti na počítači uživatele.
Aktivovat
Událost activate se spustí poté, co je servisní pracovník nainstalován a připraven k použití. Toto je opravdu dobré místo, kde můžete vyčistit staré soubory a mezipaměti, které již nepotřebujete. V tomto příkladu však s naší aktivační událostí nic neuděláme.
Načíst
Tady náš servisní pracovník opravdu září. Když je podán požadavek na načtení, náš servisní pracovník jej zachytí pomocí funkce s příhodným názvem fetch . Váš servisní pracovník může vyhledat podobný požadavek na načtení z naší mezipaměti nebo požadavek odeslat dál.
Zajímavé na životním cyklu servisního pracovníka je, že aktivace a načítání nemusí nutně běžet zpětně. Načítání se spustí pouze v případě, že existuje událost načtení, která má být zachycena, takže mezi událostí activate a událostí načítání může uplynout nějaký čas. Během této doby je servisní pracovník nečinný.
Nyní, když dobře rozumíme životnímu cyklu servisních pracovníků, pojďme se podívat na ukázku.
Ukázkový servisní pracovník
Pro tento příklad použijme FayePI. Toto je malé API, které jsem napsal, abych pomohl ženám naučit se vytvářet dynamické webové stránky, a stránka dokumentace využívá velmi jednoduchého servisního pracovníka.
Než bude možné nainstalovat servisního pracovníka, musíme do kódu naší aplikace přidat funkci registrace.
// index.js
if(navigator.serviceWorker) {
navigator.serviceWorker.register('serviceworker.js');
}
Obvykle to bude ve vašem index.js soubor, který se má spustit při načtení stránky. Toto je jediný odkaz na vašeho servisního pracovníka v kódu pro konkrétní aplikaci.
Nyní budeme mít samostatný soubor pro našeho servisního pracovníka.
// serviceworker.js
self.oninstall = function() {
caches.open('fayeFrontEndV1').then(function(cache) {
cache.addAll([ / ... / ])
.catch( / ... / );
})
.catch( / ... /)
}
Toto je funkce, která se spustí při instalaci našeho servisního pracovníka. Nejprve inicializujeme a otevřeme mezipaměť. Toto je konkrétní místo, kde budou soubory uloženy na počítači uživatele.
caches.open vrátí slib s odkazem na cache, kterou otevíráme. Pak použijeme addAll předat v poli řetězců. Toto jsou cesty k souborům a jsou přidány do mezipaměti, kterou jsme vytvořili. Nakonec přidáme několik catch funkce pro jakékoli zpracování chyb, které potřebujeme.
Dalším krokem je aktivace:
// serviceworker.js
self.onactivate = function(event) {
console.log('sw is up and running!');
}
Může to být dobré místo pro úklid, ale necháme si to na další blogový příspěvek.
To nejlepší jsme si nechali na konec! Pojďme se podívat na načítání.
// serviceworker.js
self.onfetch = function(event) {
event.respondWith(
caches.match(event.request)
.then(function(cachedFiles) {
if(cachedFiles) {
return cachedFiles;
} else {
return fetch(event.request);
}
})
);
}
Tato funkce se spustí, když servisní pracovník zjistí požadavek na načtení. Tato funkce ve všech cache pokoušející se najít odpovídající požadavek. Pokud je nalezen odpovídající požadavek, funkce tento požadavek vrátí. V opačném případě bude servisní pracovník pokračovat a přejde přes síť s požadavkem.
Podívejme se blíže na event.respondWith a caches.match , obě jsou specifické pro servisní pracovníky.
event.respondWith je funkce, která vám umožňuje zachytit žádost o načtení a místo toho poskytnout vlastní odpověď. Je důležité použít tuto funkci místo prostého vracení odpovědi, protože to umožňuje, aby vaše zachycená odpověď byla odeslána na správné místo.
caches.match je funkce, která nám umožňuje prohledávat CacheStorage a najít shodu pro náš požadavek. Když něco přidáme do naší mezipaměti, bude to uloženo v zásobníku s nejstaršími přírůstky dole a nejnovějšími nahoře. caches.match najde nejnovější shodu a vrátí ji. Pokud nenajde žádnou shodu, vrátí null .
A to je vše! To je vše, co potřebujete pro jednoduchého začínajícího servisního pracovníka! Pokud si myslíte, že servisní pracovníci jsou super cool, doporučoval bych v tomto příspěvku na blogu zjistit, co dalšího mohou dělat, včetně načítání na pozadí.
Pokud se chcete dozvědět více o servisních pracovnících, doufám, že zamíříte na serviceworkerbook.com a zaregistrujete se do mého seznamu adresátů a budete mě sledovat na Twitteru! Budete první, kdo se to dozví, až vyjde moje kniha 'Let's Take This Offline'!