Share
API-ul Worker API pentru browsere permite proiectanților web să ofere vizitatorilor ceva ce nu au mai avut înainte: accesul la site-uri sau aplicații web chiar și offline, fie pentru perioade scurte, fie lungi.
Indiferent dacă doriți să vă asigurați că un vizitator poate citi în continuare site-ul dvs. în timp ce trece printr-un tunel de tren sau dacă doriți să creați aplicații care nu necesită o conexiune la internet, lucrătorii din servicii oferă soluția perfectă.
La fel de bine ca și lucrătorii de serviciu, atunci când începeți să le codificați pentru prima dată, există câteva piedici care vă pot încetini progresul - cu excepția cazului în care sunteți conștienți de ce se întâmplă în față. Acest tutorial vă va oferi cinci sfaturi esențiale pentru dezvoltarea serviciilor pentru angajați și sperăm că vă vor ajuta să evitați aceste sughițuri și să vă salvați de durerile de cap asociate.
Dacă sunteți nou la serviciul de muncitori, verificați cursanții noștri de la Simple Service Workers pentru site-urile offline și cartea lui Jeremy Keith Going Offline, ambele disponibile pe Envato Elements.
Cea mai veche problemă care te-ar putea opri atunci când scrii primul tău slujitor, este că probabil vei face ceea ce faci mereu și vei pune scenariul într-un sub-director numit js sau script-uri. Cu toate acestea, cu lucrătorii de serviciu, această acțiune de tip "run-of-the-mill" poate fi problematică.
Motivul este că domeniul de aplicare al lucrătorului dvs. de serviciu este, în mod implicit, definit de locația acestuia. Ce inseamna asta? Înseamnă că dacă îți dai scenariul într-un / js directorul său de domeniu este acum limitat la aceasta / js director. În consecință, se pot ocupa numai de solicitările de pagină care vin prin intermediul www.yoursite.com/js/, și va ignora complet alte cereri, cum ar fi cele prin intermediul www.yoursite.com sau www.yoursite.com/news/ de exemplu.
Acest domeniu de aplicare limitat înseamnă, în schimb, că nu veți putea furniza opțiuni de rezervă offline pentru cea mai mare parte a site-ului dvs. Pentru ca lucrătorul dvs. de serviciu să poată face față oricăror solicitări care vin prin orice parte a site-ului dvs., domeniul său de aplicare trebuie să fie cuprinzător.
Notă: puteți de fapt să înlocuiți domeniul de aplicare prestabilit al angajatului dvs. de service atunci când îl înregistrați, de ex.
Accentsconagua
navigator.serviceWorker.register ('/ sw.js', domeniu: '/'); Cu această abordare puteți încă să găzduiți toate scenariile într-un sub-director, dacă acest lucru este foarte important pentru proiectul dvs..
Dar, în general vorbind, cea mai ușoară abordare este de a pune angajatul dvs. de serviciu în directorul rădăcină, prin urmare, stabilirea automată a domeniului său de aplicare pentru a acoperi întregul site.
În timp ce utilizatorii de servicii de asistență sunt sprijiniți în toate browserele importante, Chrome sau Chromium sunt, în prezent, cel mai bun browser pentru a le dezvolta. Acest lucru se datorează panoului de aplicații foarte util, care se găsește în Instrumentele pentru dezvoltatori. Când treceți prin procesul de dezvoltare, veți trăi destul de mult în această filă:
În această filă există o secțiune dedicată pentru lucrătorii de serviciu unde puteți verifica dacă scriptul dvs. este înregistrat, activ și care rulează. De asemenea, puteți utiliza această filă pentru a simula offline, a ocoli temporar lucrătorii dvs. de serviciu și a anula înregistrarea manuală a scripturilor anterioare pe care nu mai aveți nevoie.
Pe lângă faptul că nu puneți scripturi într-un sub-director, un alt obicei de dezvoltare va trebui să vă întrerupeți atunci când puneți împreună muncitorii cu ajutorul serviciului "Hard Reload" sau "Empty Cache and Hard Reload". Probabil ați făcut acest lucru de mii de ori atunci când testați site-uri, folosind funcționalitatea pentru a vă curăța cache-ul și pentru a vă asigura că vedeți o reflectare exactă a schimbărilor dvs. de dezvoltare. Dar cu lucrătorii de serviciu acest lucru nu va obține efectul dorit.
Când aveți un angajat de serviciu înscris și activ, orice utilizare a "Hard Reload" va fi complet ocolită. S-ar putea să reîncărcați greu site-ul dvs., să vedeți că codul dvs. nu a executat așa cum vă așteptați și credeți că ați făcut o greșeală, doar pentru a realiza mai târziu scriptul nu a fugit niciodată în primul rând.
Deci vestea proastă este "Hard Reload" și "Empty Cache and Hard Reload" sunt în afara limitelor în timpul dezvoltării lucrătorilor de serviciu, ceea ce ne conduce la întrebarea următoare:
Cum puteți reîmprospăta corect pagina dvs. și testați modificările codului lucrătorului dvs. de serviciu dacă nu puteți utiliza funcția "Reîncărcare greu" sau "Golire cache și reîncărcare greu"?
Răspunsul la această întrebare constă în următoarele două sfaturi:
În mod prestabilit, atunci când actualizați o pagină pe care încercați un lucrător de serviciu, nu veți vedea rezultatele oricăror modificări ale codului. Acest lucru se datorează faptului că versiunea scriptului pe care ați înregistrat-o inițial este cea care rămâne activă în browser, chiar și după reîncărcarea paginii, cu excepția cazului în care faceți o acțiune explicită pentru ao actualiza.
Deci, din nou aici, avem o situație în care ați putea să vă reîmprospătați pagina și să vă întrebați de ce modificările codului nu au efect, cu excepția cazului în care sunteți conștient de ciudățenii lucrătorilor din domeniul serviciilor.
Pentru a vă asigura că încărcați întotdeauna cea mai recentă versiune a scriptului dvs., mergeți la Aplicații și verificați Actualizați la Reîncărcare cutie. Acest lucru asigură că, de fiecare dată când reîncărcați pagina, (și rețineți, utilizați numai reîncărcare normală, nu reîncărcați greu), browserul va actualiza automat serviciul pentru dvs..
Notă: există opțiunea suplimentară de a face clic pe Actualizați linkul afișat lângă angajatul dvs. de serviciu înregistrat, însă utilizarea abordării automate privind reîncărcarea este, de obicei, mai ușoară.
Caracteristica finală, foarte utilă a Aplicații fila pe care o vom atinge este capacitatea de a privi în interiorul obiectelor stocate în memoria cache și le ștergeți manual după cum este necesar. Dat fiind că nu vrem să o folosim Empty Cache și Hard Reload, această funcționalitate va deveni o parte esențială a procesului de dezvoltare a unui serviciu de servicii.
În coloana din stânga a coloanei Aplicații , veți vedea o zonă etichetată Memorarea memoriei cache. Dacă extindeți această zonă, veți putea vedea obiecte memorate în cache stocate în spațiul de stocare care se referă la adresa URL curentă.
Dați clic pe oricare dintre aceste elemente și le puteți examina conținutul, ceea ce este foarte util pentru a verifica dacă resursele pe care doriți să le difuzați offline sunt adăugate corespunzător în cache de către angajatul dvs. de service.
Pentru a scăpa de obiectele cache nu mai aveți nevoie, faceți clic dreapta pe un obiect și alegeți Șterge.
Între această funcție de ștergere a obiectului cache și Actualizați la Reîncărcare căutați cu toții să rămânem la folosirea reîncărcării normale a paginii, asigurându-vă totuși că testați în mod corespunzător cele mai recente modificări ale lucrării.
Pentru mai multe informații despre lucrătorii din domeniul serviciilor, consultați noul nostru program de lucru Simple Service Workers pentru site-urile offline și cartea lui Jeremy Keith Going Offline, disponibilă acum pe Envato Elements.
