Jeste li se ikada zapitali kako se čini da neke web stranice rade čak i kada ste izvan mreže? Tajna je jednostavna: ove web stranice imaju servisne radnike.

Uslužni radnici ključna su tehnologija iza mnogih izvornih značajki modernih web aplikacija sličnih aplikacijama.

Što su uslužni radnici?

Uslužni radnici su specijalizirana vrsta JavaScript web radnici. Service Worker je JavaScript datoteka koja funkcionira pomalo poput proxy poslužitelja. Hvata odlazne mrežne zahtjeve vaše aplikacije, omogućujući vam stvaranje prilagođenih odgovora. Možete, na primjer, poslužiti predmemorirane datoteke korisniku kada je izvan mreže.

Uslužni radnici vam također omogućuju dodavanje značajki poput pozadinske sinkronizacije u vaše web aplikacije.

Zašto uslužni radnici?

Web programeri već dugo pokušavaju proširiti mogućnosti svojih aplikacija. Prije nego što su se pojavili uslužni radnici, mogli ste koristiti različita rješenja kako biste to omogućili. Posebno značajan bio je AppCache, koji je resurse za predmemoriju učinio praktičnim. Nažalost, imao je problema koji su ga učinili nepraktičnim rješenjem za većinu aplikacija.

instagram viewer

AppCache se činio dobrom idejom jer vam je omogućio vrlo jednostavno navođenje sredstava za predmemoriju. Međutim, napravio je mnoge pretpostavke o tome što ste pokušavali učiniti, a onda se užasno pokvario kada vaša aplikacija nije točno slijedila te pretpostavke. Pročitajte Jakea Archibalda (nažalost s naslovom, ali dobro napisan) Predmemorija aplikacije je glupost za više detalja. (Izvor: MDN)

Servisni radnici trenutačni su pokušaj smanjenja ograničenja web-aplikacija, bez nedostataka tehnologije poput AppCachea.

Slučajevi korištenja za uslužne radnike

Dakle, što vam točno dopuštaju uslužni radnici? Servisni radnici omogućuju vam da svojoj web aplikaciji dodate značajke koje su karakteristične za izvorne aplikacije. Također mogu pružiti normalno iskustvo na uređajima koji ne podržavaju servisne radnike. Ovakve aplikacije se ponekad nazivaju Progresivne web aplikacije (PWA).

Evo nekih značajki koje servisni radnici omogućuju:

  • Omogućuje korisniku da nastavi koristiti aplikaciju (ili barem njezine dijelove) kada više nije spojen na internet. Uslužni radnici to postižu posluživanjem predmemoriranih sredstava kao odgovor na zahtjeve.
  • U preglednicima koji se temelje na Chromiumu, servisni radnik jedan je od uvjeta da bi se web-aplikacija mogla instalirati.
  • Uslužni radnici su neophodni da bi vaša web aplikacija mogla implementirati push obavijesti.

Životni ciklus uslužnog radnika

Uslužni radnici mogu kontrolirati zahtjeve za cijelu stranicu ili samo dio stranica stranice. Određena web stranica može imati samo jednog aktivnog uslužnog radnika, a svi uslužni radnici imaju životni ciklus temeljen na događajima. Životni ciklus uslužnog radnika općenito izgleda ovako:

  1. Prijava i preuzimanje radnika. Život uslužnog radnika počinje kada ga registrira JavaScript datoteka. Ako je registracija uspješna, servisni radnik se preuzima, a zatim se pokreće unutar posebne niti.
  2. Kada se učita stranica kojom upravlja servisni radnik, servisni radnik prima događaj 'instalacija'. Ovo je uvijek prvi događaj koji uslužni radnik prima, a možete postaviti slušatelja za ovaj događaj unutar radnika. Događaj 'install' općenito se koristi za dohvaćanje i/ili predmemoriju svih resursa koji su potrebni uslužnom radniku.
  3. Nakon što serviser završi instalaciju, prima događaj 'aktivacije'. Ovaj događaj omogućuje radniku da očisti suvišne resurse koje su koristili prethodni uslužni radnici. Ako ažurirate uslužnog radnika, događaj aktivacije aktivirat će se samo kada je to sigurno učiniti. Ovo je kada nema učitanih stranica koje još uvijek koriste staru verziju uslužnog radnika.
  4. Nakon toga serviser ima punu kontrolu nad svim stranicama koje su učitane nakon što je uspješno registriran.
  5. Posljednja faza životnog ciklusa je redundancija, koja se događa kada se servisni radnik ukloni ili zamijeni novijom verzijom.

Kako koristiti servisne radnike u JavaScriptu

API Service Worker (MDN) pruža sučelje koje vam omogućuje stvaranje i interakciju s uslužnim radnicima u JavaScriptu.

Servisni radnici prvenstveno se bave mrežnim zahtjevima i drugim asinkronim događajima. Kao rezultat toga, API servisnog radnika intenzivno koristi Obećanja i asinkrono programiranje.

Da biste kreirali uslužnog radnika, prvo što trebate učiniti je nazvati navigator.serviceWorker.register() metoda. Evo kako bi to moglo izgledati:

ako ('serviceWorker' u navigatoru) {
 navigator.serviceWorker.register('/sw.js').then(funkcija(registracija){
 console.log('Registracija uslužnog radnika uspjela:', registracija);
 }).catch((greška) => { console.log('Registracija uslužnog radnika nije uspjela:', pogreška); });
} drugo {
 console.log('Uslužni radnici nisu podržani.');
}

Najudaljeniji if blok izvodi otkrivanje značajki. Osigurava da će se kod vezan uz uslužnog radnika izvoditi samo na preglednicima koji podržavaju uslužnog radnika.

Zatim, kod poziva Registar metoda. Prosljeđuje mu put do uslužnog radnika (u odnosu na izvor stranice) da se registrira i preuzme. The Registar metoda također prihvaća izborni parametar koji se zove opseg, koji se može koristiti za ograničavanje stranica koje kontrolira radnik. Servisni radnici prema zadanim postavkama kontroliraju sve stranice aplikacije. The Registar metoda vraća Promise koji pokazuje je li registracija bila uspješna.

Ako se obećanje riješi, serviser se uspješno registrirao. Kod zatim ispisuje objekt koji predstavlja registriranog servisera na konzoli.

Ako proces registracije ne uspije, kod hvata pogrešku i bilježi je u konzolu.

Zatim, evo pojednostavljenog primjera kako bi sam servisni radnik mogao izgledati:

self.addEventListener('instalirati', (događaj) => {
 event.waitUntil(noviObećanje((riješi, odbaci) => {
 console.log("radeći stvari postavljanja")
 odlučnost()
 }))
 console.log("Serviser je završio instalaciju")
})
self.addEventListener('aktivirati', (događaj) => {
 event.waitUntil(noviObećanje((riješi, odbaci) => {
 console.log("čistiti stvari!")
 odlučnost()
 }))
 console.log('aktivacija gotova!')
})
self.addEventListener('dohvatiti', (događaj) => {
 console.log("Zahtjev presretnut", događaj)
});

Ovaj radnik demo usluge ima tri slušatelja događaja, registrirana protiv sebe. Ima jedan za događaj 'install', događaj 'activate' i događaj 'fetch'.

Unutar prva dva slušatelja, kod koristi čekati do metoda. Ova metoda prihvaća obećanje. Njegov je posao osigurati da će servisni radnik čekati da se obećanje riješi ili odbije prije nego što prijeđe na sljedeći događaj.

Slušatelj dohvaćanja aktivira se svaki put kada se napravi zahtjev za resursom koji kontrolira serviser.

Resursi koje kontrolira serviser uključuju sve stranice koje kontrolira, kao i sva sredstva navedena na tim stranicama.

Poboljšajte svoje web-aplikacije uz Service Workers

Uslužni radnici su posebna vrsta web radnika koji služe jedinstvenoj svrsi. Oni sjede ispred mrežnih zahtjeva kako bi omogućili značajke poput izvanmrežnog pristupa aplikacijama. Korištenje uslužnih radnika u web aplikaciji može uvelike poboljšati korisničko iskustvo. Možete stvoriti uslužne radnike i komunicirati s njima pomoću API-ja uslužnog radnika.