Kas olete kunagi mõelnud, kuidas mõned veebisaidid töötavad isegi siis, kui olete võrguühenduseta? Saladus on lihtne: neil veebisaitidel on teenindustöötajad.

Teenindustöötajad on paljude kaasaegsete veebirakenduste loomulike rakendusetaoliste funktsioonide põhitehnoloogia.

Mis on teenindustöötajad?

Teenindustöötajad on spetsialiseerunud tüüp JavaScripti veebitöötajad. Teenindustöötaja on JavaScripti fail, mis toimib veidi nagu puhverserver. See püüab kinni teie rakendusest väljuvad võrgupäringud, võimaldades teil luua kohandatud vastuseid. Näiteks võite kasutajale pakkuda vahemällu salvestatud faile, kui nad on võrguühenduseta.

Teenindustöötajad võimaldavad teil lisada oma veebirakendustele ka selliseid funktsioone nagu taustal sünkroonimine.

Miks teenindustöötajad?

Veebiarendajad on pikka aega püüdnud oma rakenduste võimalusi laiendada. Enne teenindustöötajate tulekut võisite selle võimaldamiseks kasutada erinevaid lahendusi. Eriti tähelepanuväärne oli AppCache, mis muutis ressursside vahemällu salvestamise mugavaks. Kahjuks oli sellel probleeme, mis muutsid selle enamiku rakenduste jaoks ebapraktiliseks lahenduseks.

AppCache tundus olevat hea mõte, kuna see võimaldas teil vahemällu salvestatavaid varasid väga lihtsalt määrata. Siiski tegi see palju oletusi selle kohta, mida üritasite teha, ja läks siis kohutavalt katki, kui teie rakendus ei järginud neid eeldusi täpselt. Lugege Jake Archibaldi (kahjuks pealkirjaga, kuid hästi kirjutatud) Rakenduse vahemälu on Douchebag lisateabe saamiseks. (Allikas: MDN)

Teenindustöötajad püüavad praegu vähendada veebirakenduste piiranguid ilma selliste tehnoloogiate nagu AppCache puudusteta.

Kasutusjuhtumid teenindustöötajatele

Mida siis teenindustöötajad teil täpselt teha lasevad? Teenindustöötajad võimaldavad teil lisada oma veebirakendusele funktsioone, mis on iseloomulikud omarakendustele. Need võivad pakkuda tavapärast kasutuskogemust ka seadmetes, mis ei toeta teenindustöötajaid. Selliseid rakendusi nimetatakse mõnikord Progressiivsed veebirakendused (PWA).

Siin on mõned funktsioonid, mida teenindustöötajad võimaldavad:

  • Lubab kasutajal jätkata rakenduse (või vähemalt selle osa) kasutamist, kui ta pole enam Internetiga ühendatud. Teenindustöötajad saavutavad selle, teenindades taotlustele vastuseks vahemällu salvestatud varasid.
  • Chromiumipõhistes brauserites on teenindustöötaja üks veebirakenduse installitavuse nõudeid.
  • Teenindustöötajad on vajalikud, et teie veebirakendus saaks tõukemärguandeid rakendada.

Teenindustöötaja elutsükkel

Teenindustöötajad võivad kontrollida kogu saidi või ainult osa lehtede taotlusi. Konkreetsel veebilehel võib olla ainult üks aktiivne teenindustöötaja ja kõigil teenindustöötajatel on sündmusepõhine elutsükkel. Teenindustöötaja elutsükkel näeb üldiselt välja järgmine:

  1. Töötaja registreerimine ja allalaadimine. Teenindustöötaja eluiga algab siis, kui JavaScripti fail selle registreerib. Kui registreerimine õnnestub, laadib teenindustöötaja alla ja hakkab seejärel spetsiaalses lõimes töötama.
  2. Kui teenindustöötaja juhitud leht laaditakse, saab teenindustöötaja installisündmuse. See on alati esimene sündmus, mille teenindustöötaja saab, ja saate selle sündmuse jaoks töötaja sees kuulaja seadistada. Installisündmust kasutatakse tavaliselt teenindustöötajale vajalike ressursside toomiseks ja/või vahemällu salvestamiseks.
  3. Kui teenindustöötaja on installimise lõpetanud, saab ta aktiveerimissündmuse. See sündmus võimaldab töötajal puhastada varasemate teenindustöötajate kasutatud üleliigseid ressursse. Kui värskendate teenindustöötajat, käivitub aktiveerimissündmus ainult siis, kui seda on ohutu teha. See on siis, kui pole ühtegi laaditud lehte, mis kasutavad endiselt teenindustöötaja vana versiooni.
  4. Pärast seda on teenindustöötajal täielik kontroll kõigi lehtede üle, mis laaditi pärast edukat registreerimist.
  5. Elutsükli viimane faas on koondamine, mis tekib siis, kui teenindustöötaja eemaldatakse või asendatakse uuema versiooniga.

Kuidas JavaScriptis teenusetöötajaid kasutada

Service Worker API (MDN) pakub liidest, mis võimaldab teil JavaScriptis teenusetöötajaid luua ja nendega suhelda.

Teenindustöötajad tegelevad peamiselt võrgupäringute ja muude asünkroonsete sündmustega. Selle tulemusena kasutab teenindustöötaja API palju Lubadused ja asünkroonne programmeerimine.

Teenindustöötaja loomiseks peate esimese asjana helistama navigator.serviceWorker.register() meetod. See võib välja näha järgmiselt.

kui ('teenindustöötaja' navigaatoris) {
 navigator.serviceWorker.register('/sw.js').then(funktsiooni(registreerimine){
 console.log('Teenindustöötaja registreerimine õnnestus:', registreerimine);
 }).catch((viga) => { console.log('Teenindaja registreerimine ebaõnnestus:', viga); });
} muidu {
 console.log('Teenindustöötajaid ei toetata.');
}

Välisim kui-plokk teostab funktsioonide tuvastamise. See tagab, et teenindustöötajaga seotud kood töötab ainult teenindustöötajaid toetavates brauserites.

Järgmisena kutsub kood välja Registreeri meetod. See edastab tee teenindustöötajale (saidi päritolu suhtes), et see registreerida ja alla laadida. The Registreeri meetod aktsepteerib ka valikulist parameetrit nimega ulatus, mida saab kasutada töötaja kontrollitavate lehtede piiramiseks. Teenindajad juhivad vaikimisi kõiki rakenduse lehti. The Registreeri meetod tagastab lubaduse, mis näitab, kas registreerimine oli edukas.

Kui lubadus laheneb, registreerus teenindustöötaja edukalt. Seejärel prindib kood konsooli registreeritud teenindustöötajat esindava objekti.

Kui registreerimisprotsess ebaõnnestub, tabab kood vea ja logib selle konsooli.

Järgmiseks on siin lihtsustatud näide selle kohta, milline võib teenindustöötaja ise välja näha.

self.addEventListener('installida', (sündmus) => {
 event.waitUntil(uusLubadus((lahendada, tagasi lükata) => {
 console.log("seadistamisasju tegemas")
 lahenda ()
 }))
 console.log("Teenindaja lõpetas installimise")
})
self.addEventListener('aktiveerida', (sündmus) => {
 event.waitUntil(uusLubadus((lahendada, tagasi lükata) => {
 console.log("koristustöid tegemas!")
 lahenda ()
 }))
 console.log('aktiveerimine tehtud!')
})
self.addEventListener('tooma', (sündmus) => {
 console.log("Taotlus pealtkuulatud", sündmus)
});

Sellel demoteenuse töötajal on kolm tema enda vastu registreeritud sündmuste kuulajat. Sellel on üks sündmuste „installi”, „aktiveerimise” ja „toomise” sündmuse jaoks.

Kahe esimese kuulaja sees kasutab kood oota kuni meetod. See meetod võtab lubaduse vastu. Selle ülesanne on tagada, et teenindustöötaja ootaks enne järgmise sündmuse juurde liikumist lubaduse lahendamist või tagasilükkamist.

Tõmbamiskuulaja käivitub alati, kui taotletakse ressurssi, mida teenindustöötaja juhib.

Teenindustöötaja juhitavad ressursid hõlmavad kõiki tema kontrollitavaid lehti ja kõiki nendel lehtedel viidatud varasid.

Täiustage oma veebirakendusi teenindustöötajate abil

Teenindustöötajad on erilist tüüpi veebitöötajad, kes teenivad ainulaadset eesmärki. Nad istuvad võrgupäringute ees, et võimaldada selliseid funktsioone nagu võrguühenduseta juurdepääs rakendustele. Teenindustöötajate kasutamine veebirakenduses võib selle kasutajakogemust oluliselt parandada. Saate luua teenindustöötajaid ja nendega suhelda, kasutades teenindustöötaja API-t.