Te-ai întrebat vreodată cum unele site-uri web par să continue să funcționeze chiar și atunci când ești offline? Secretul este simplu: aceste site-uri au lucrători de servicii.
Lucrătorii de servicii sunt tehnologia cheie din spatele multora dintre funcțiile native asemănătoare aplicațiilor ale aplicațiilor web moderne.
Ce sunt lucrătorii de servicii?
Lucrătorii de servicii sunt un tip specializat de Lucrători web JavaScript. Un lucrător de service este un fișier JavaScript care funcționează un pic ca un server proxy. Captează solicitările de rețea trimise din aplicația dvs., permițându-vă să creați răspunsuri personalizate. S-ar putea, de exemplu, să difuzați fișiere stocate în cache utilizatorului când acesta este offline.
Lucrătorii de servicii vă permit, de asemenea, să adăugați funcții precum sincronizarea în fundal la aplicațiile dvs. web.
De ce lucrătorii de servicii?
Dezvoltatorii web au încercat să-și extindă capacitățile aplicațiilor lor de mult timp. Înainte să vină lucrătorii de service, ați putea folosi diverse soluții pentru a face acest lucru posibil. Unul deosebit de notabil a fost AppCache, care a făcut ca resursele să fie convenabile. Din păcate, a avut probleme care au făcut-o o soluție nepractică pentru majoritatea aplicațiilor.
AppCache părea a fi o idee bună, deoarece vă permitea să specificați activele pentru a stoca în cache foarte ușor. Cu toate acestea, a făcut multe presupuneri despre ceea ce încercați să faceți și apoi s-a rupt îngrozitor când aplicația dvs. nu a respectat exact acele ipoteze. Citește-l pe Jake Archibald (din păcate, intitulat, dar bine scris) Application Cache este un Douchebag pentru mai multe detalii. (Sursă: MDN)
Lucrătorii de servicii sunt încercarea actuală de a reduce limitările aplicațiilor web, fără dezavantajele tehnologiei precum AppCache.
Cazuri de utilizare pentru lucrătorii de servicii
Deci, ce anume vă lasă lucrătorii din service să faceți? Lucrătorii de servicii vă permit să adăugați caracteristici caracteristice aplicațiilor native la aplicația dvs. web. De asemenea, pot oferi o experiență normală pe dispozitivele care nu acceptă lucrătorii de service. Aplicații ca aceasta sunt uneori numite Aplicații web progresive (PWA).
Iată câteva dintre funcțiile pe care lucrătorii de service le fac posibile:
- Permiteți utilizatorului să continue să folosească aplicația (sau cel puțin părți ale acesteia) atunci când nu mai este conectat la internet. Lucrătorii de servicii reușesc acest lucru prin furnizarea de active stocate în cache ca răspuns la solicitări.
- În browserele bazate pe Chromium, un service worker este una dintre cerințele pentru ca o aplicație web să poată fi instalată.
- Lucrătorii de service sunt necesari pentru ca aplicația dvs. web să poată implementa notificări push.
Ciclul de viață al unui lucrător de servicii
Lucrătorii de servicii pot controla solicitările pentru un întreg site sau doar o parte din paginile site-ului. O anumită pagină web poate avea un singur lucrător de serviciu activ și toți lucrătorii de servicii au un ciclu de viață bazat pe evenimente. Ciclul de viață al unui lucrător de servicii arată în general astfel:
- Înregistrarea și descărcarea lucrătorului. Viața unui lucrător de service începe atunci când un fișier JavaScript îl înregistrează. Dacă înregistrarea are succes, lucrătorul de servicii se descarcă și apoi începe să ruleze într-un fir special.
- Când o pagină controlată de lucrătorul de service este încărcată, lucrătorul de service primește un eveniment de „instalare”. Acesta este întotdeauna primul eveniment pe care îl primește un lucrător de servicii și puteți configura un ascultător pentru acest eveniment în interiorul lucrătorului. Evenimentul „instalare” este utilizat în general pentru a prelua și/sau a stoca în cache orice resurse de care lucrătorul de servicii are nevoie.
- După ce lucrătorul de service termină instalarea, primește un eveniment „activare”. Acest eveniment permite lucrătorului să curețe resursele redundante utilizate de lucrătorii anteriori ai serviciului. Dacă actualizați un lucrător de service, evenimentul de activare se va declanșa numai atunci când puteți face acest lucru în siguranță. Aceasta se întâmplă odată ce nu există pagini încărcate care utilizează încă versiunea veche a lucrătorului de servicii.
- După aceea, lucrătorul de service are control deplin asupra tuturor paginilor care au fost încărcate după ce a fost înregistrată cu succes.
- Ultima fază a ciclului de viață este redundanța, care are loc atunci când lucrătorul de service este eliminat sau înlocuit cu o versiune mai nouă.
Cum să utilizați lucrătorii de servicii în JavaScript
API-ul Service Worker (MDN) oferă interfața care vă permite să creați și să interacționați cu lucrătorii de servicii în JavaScript.
Lucrătorii de servicii se ocupă în primul rând de solicitările de rețea și de alte evenimente asincrone. Drept urmare, API-ul pentru lucrători de servicii folosește intens Promisiuni și programare asincronă.
Pentru a crea un lucrător de service, primul lucru pe care trebuie să-l faceți este să sunați la navigator.serviceWorker.register() metodă. Iată cum ar putea arăta:
dacă ('serviceWorker' în navigator) {
navigator.serviceWorker.register('/sw.js').then(funcţie(înregistrare){
console.log('Înregistrarea lucrătorilor de servicii a reușit:', înregistrare);
}).catch((eroare) => { console.log('Înregistrarea lucrătorului de servicii a eșuat:', eroare); });
} altfel {
console.log('Lucrătorii de servicii nu sunt sprijiniți.');
}
Cel mai exterior bloc if efectuează detectarea caracteristicilor. Se asigură că codul legat de lucrătorii de service va rula numai pe browserele care acceptă lucrătorii de service.
Apoi, codul apelează Inregistreaza-te metodă. Îi transmite calea lucrătorului de servicii (față de originea site-ului) pentru a-l înregistra și a-l descărca. The Inregistreaza-te metoda acceptă și un parametru opțional numit scope, care poate fi folosit pentru a limita paginile controlate de lucrător. Lucrătorii de servicii controlează toate paginile unei aplicații în mod implicit. The Inregistreaza-te metoda returnează o Promisiune care indică dacă înregistrarea a avut succes.
Dacă Promisiunea se rezolvă, lucrătorul de service s-a înregistrat cu succes. Codul imprimă apoi un obiect reprezentând lucrătorul de service înregistrat pe consolă.
Dacă procesul de înregistrare eșuează, codul prinde eroarea și o înregistrează în consolă.
În continuare, iată un exemplu simplificat despre cum ar putea arăta lucrătorul de servicii în sine:
self.addEventListener('instalare', (eveniment) => {
event.waitUntil(nouPromisiune((rezolvare, respingere) => {
console.log("fac chestii de configurare")
rezolva()
}))
console.log("Muncitorul de service a terminat instalarea")
})self.addEventListener('Activati', (eveniment) => {
event.waitUntil(nouPromisiune((rezolvare, respingere) => {
console.log("fac chestii de curățenie!")
rezolva()
}))
console.log('activare gata!')
})
self.addEventListener('aduce', (eveniment) => {
console.log("Solicitare interceptată", eveniment)
});
Acest lucrător al serviciului demonstrativ are trei ascultători de evenimente, înregistrate împotriva sa. Are unul pentru evenimentul „instalare”, evenimentul „activare” și evenimentul „preluare”.
În interiorul primilor doi ascultători, codul folosește asteapta pana cand metodă. Această metodă acceptă o Promisiune. Sarcina acestuia este să se asigure că lucrătorul de service va aștepta ca Promisiunea să se rezolve sau să o respingă înainte de a trece la următorul eveniment.
Ascultătorul de preluare se declanșează ori de câte ori se face o solicitare pentru o resursă controlată de lucrătorul de servicii.
Resursele controlate de un lucrător de servicii includ toate paginile pe care le controlează, precum și orice active la care se face referire în acele pagini.
Îmbunătățiți-vă aplicațiile web cu lucrători de servicii
Lucrătorii de servicii sunt un tip special de lucrători web care servesc unui scop unic. Aceștia stau în fața solicitărilor de rețea pentru a activa funcții precum accesul offline la aplicații. Utilizarea lucrătorilor de servicii într-o aplicație web poate îmbunătăți considerabil experiența utilizatorului. Puteți crea lucrători de servicii și puteți interacționa cu aceștia folosind API-ul pentru lucrători de servicii.