Ste se kdaj vprašali, kako se zdi, da nekatera spletna mesta delujejo tudi, ko ste brez povezave? Skrivnost je preprosta: te spletne strani imajo storitvene delavce.

Storitveni delavci so ključna tehnologija, ki stoji za številnimi domačimi aplikacijami podobnimi funkcijami sodobnih spletnih aplikacij.

Kaj so storitveni delavci?

Storitveni delavci so specializirana vrsta JavaScript spletni delavci. Storitveni delavec je datoteka JavaScript, ki deluje podobno kot strežnik proxy. Ujame odhodne omrežne zahteve vaše aplikacije in vam omogoča ustvarjanje odzivov po meri. Uporabniku lahko na primer servirate predpomnjene datoteke, ko je brez povezave.

Storitveni delavci vam omogočajo tudi dodajanje funkcij, kot je sinhronizacija v ozadju, v vaše spletne aplikacije.

Zakaj storitveni delavci?

Spletni razvijalci že dolgo poskušajo razširiti zmogljivosti svojih aplikacij. Preden so se pojavili serviserji, ste lahko to omogočili z različnimi rešitvami. Posebej opazen je bil AppCache, ki je naredil predpomnjenje virov priročno. Na žalost je imel težave, zaradi katerih je bil za večino aplikacij nepraktična rešitev.

instagram viewer

AppCache se je zdel dobra ideja, saj vam je omogočal, da zelo preprosto določite sredstva za predpomnilnik. Vendar pa je naredil veliko predpostavk o tem, kaj ste poskušali narediti, nato pa se je grozno zlomil, ko vaša aplikacija ni natančno sledila tem predpostavkam. Preberite Jakea Archibalda (na žalost z naslovom, vendar dobro napisano) Predpomnilnik aplikacij je neumnost za več podrobnosti. (Vir: MDN)

Storitveni delavci so trenutni poskus zmanjšanja omejitev spletnih aplikacij brez pomanjkljivosti tehnologije, kot je AppCache.

Primeri uporabe za storitvene delavce

Torej, kaj točno vam dovolijo storitveni delavci? Storitveni delavci vam omogočajo, da svoji spletni aplikaciji dodate funkcije, ki so značilne za izvorne aplikacije. Prav tako lahko zagotovijo normalno izkušnjo na napravah, ki ne podpirajo servisnih delavcev. Takšne aplikacije se včasih imenujejo Progresivne spletne aplikacije (PWA).

Tukaj je nekaj funkcij, ki jih omogočajo servisni delavci:

  • Omogoča uporabniku, da še naprej uporablja aplikacijo (ali vsaj njene dele), ko ni več povezan z internetom. Storitveni delavci to dosežejo tako, da kot odgovor na zahteve strežejo predpomnjena sredstva.
  • V brskalnikih, ki temeljijo na Chromiumu, je servisni delavec ena od zahtev, da je spletno aplikacijo mogoče namestiti.
  • Storitveni delavci so potrebni, da vaša spletna aplikacija lahko izvaja potisna obvestila.

Življenjski cikel storitvenega delavca

Storitveni delavci lahko nadzorujejo zahteve za celotno spletno mesto ali samo del strani spletnega mesta. Določena spletna stran ima lahko samo enega aktivnega storitvenega delavca, vsi storitveni delavci pa imajo življenjski cikel, ki temelji na dogodkih. Življenjski cikel storitvenega delavca na splošno izgleda takole:

  1. Registracija in prenos delavca. Življenje storitvenega delavca se začne, ko ga registrira datoteka JavaScript. Če je registracija uspešna, se servisni delavec prenese in nato začne izvajati znotraj posebne niti.
  2. Ko se naloži stran, ki jo nadzoruje servisni delavec, storitveni delavec prejme dogodek 'namestitev'. To je vedno prvi dogodek, ki ga prejme storitveni delavec, in lahko nastavite poslušalca za ta dogodek znotraj delavca. Dogodek 'namestitev' se običajno uporablja za pridobivanje in/ali predpomnilnik vseh virov, ki jih potrebuje servisni delavec.
  3. Ko servisni delavec konča namestitev, prejme dogodek 'aktiviraj'. Ta dogodek omogoča delavcu, da počisti odvečne vire, ki so jih uporabljali prejšnji storitveni delavci. Če posodabljate storitvenega delavca, se bo dogodek aktiviranja sprožil samo, če je to varno. To je, ko ni nobene naložene strani, ki še vedno uporablja staro različico storitvenega delavca.
  4. Po tem ima servisni delavec popoln nadzor nad vsemi stranmi, ki so bile naložene po uspešni registraciji.
  5. Zadnja faza življenjskega cikla je redundanca, do katere pride, ko se servisni delavec odstrani ali nadomesti z novejšo različico.

Kako uporabljati storitvene delavce v JavaScriptu

API Service Worker (MDN) zagotavlja vmesnik, ki vam omogoča ustvarjanje in interakcijo s servisnimi delavci v JavaScriptu.

Storitveni delavci se ukvarjajo predvsem z omrežnimi zahtevami in drugimi asinhronimi dogodki. Posledično API storitvenega delavca močno uporablja Obljube in asinhrono programiranje.

Če želite ustvariti storitvenega delavca, morate najprej poklicati navigator.serviceWorker.register() metoda. Takole bi to lahko izgledalo:

če ('serviceWorker' v navigatorju) {
 navigator.serviceWorker.register('/sw.js').then(funkcijo(registracija){
 console.log('Registracija storitvenega delavca je uspela:', registracija);
 }).catch((napaka) => {console.log('Registracija storitvenega delavca ni uspela:', napaka); });
} drugače {
 console.log('Storitveni delavci niso podprti.');
}

Najbolj oddaljeni blok if izvaja zaznavanje funkcij. Zagotavlja, da se koda, povezana s servisnimi delavci, izvaja samo v brskalnikih, ki podpirajo storitvene delavce.

Nato koda pokliče register metoda. Posreduje pot do storitvenega delavca (glede na izvor spletnega mesta), da se registrira in prenese. The register metoda sprejema tudi izbirni parameter, imenovan obseg, ki se lahko uporablja za omejevanje strani, ki jih nadzoruje delavec. Storitveni delavci privzeto nadzorujejo vse strani aplikacije. The register metoda vrne obljubo, ki označuje, ali je bila registracija uspešna.

Če se obljuba razreši, se je servisni delavec uspešno registriral. Koda nato na konzolo natisne objekt, ki predstavlja registriranega storitvenega delavca.

Če postopek registracije ne uspe, koda ujame napako in jo zabeleži v konzolo.

Nato je tukaj poenostavljen primer, kako bi lahko izgledal servisni delavec:

self.addEventListener('namestite', (dogodek) => {
 event.waitUntil(novoObljuba((razreši, zavrni) => {
 console.log("dela nastavitve")
 razreši()
 }))
 console.log("Serviser je končal namestitev")
})
self.addEventListener('aktivirati', (dogodek) => {
 event.waitUntil(novoObljuba((razreši, zavrni) => {
 console.log("delati čistilne stvari!")
 razreši()
 }))
 console.log('aktivacija opravljena!')
})
self.addEventListener('prinašati', (dogodek) => {
 console.log("Zahteva prestrežena", dogodek)
});

Ta delavec predstavitvene storitve ima tri poslušalce dogodkov, registrirane proti sebi. Ima eno za dogodek 'install', dogodek 'activate' in dogodek 'fetch'.

Znotraj prvih dveh poslušalcev koda uporablja počakaj dokler metoda. Ta metoda sprejme obljubo. Njegova naloga je zagotoviti, da bo storitveni delavec počakal, da se obljuba razreši ali zavrne, preden se premakne na naslednji dogodek.

Poslušalec pridobivanja se sproži vsakič, ko je podana zahteva za vir, ki ga nadzoruje servisni delavec.

Viri, ki jih nadzoruje servisni delavec, vključujejo vse strani, ki jih nadzoruje, kot tudi vsa sredstva, navedena na teh straneh.

Izboljšajte svoje spletne aplikacije s servisnimi delavci

Storitveni delavci so posebna vrsta spletnih delavcev, ki služijo edinstvenemu namenu. Sedijo pred omrežnimi zahtevami, da omogočijo funkcije, kot je dostop do aplikacij brez povezave. Uporaba storitvenih delavcev v spletni aplikaciji lahko znatno izboljša njeno uporabniško izkušnjo. Storitvene delavce lahko ustvarite in z njimi komunicirate z API-jem storitvenega delavca.