Faceți aplicația dvs. de lucru offline cu lucrătorii de servicii

Lucrătorii de servicii pot fi utilizați pentru a îmbunătăți timpul de încărcare și suportul offline pentru site-urile dvs. și aplicațiile web. În acest tutorial vă vom arăta cum să îmbunătățiți progresiv o aplicație web cu un lucrător de service. Mai întâi vom acoperi ceea ce este un lucrător de service și modul în care funcționează ciclul de viață, atunci vă vom arăta cum să utilizați apoi să accelerați site-ul dvs. (această pagină) și să oferiți conținut offline (pagina 2).

Atunci vă vom arăta cum să Cum de a construi o aplicație cu lucrătorii de servicii. Veți învăța cum să înființezi un lucrător de oase goale care să facă cache-ul și să servească active statice (oferind un impuls imens de performanță pe încărcături ulterioare), atunci cum să memorizează răspunsurile API dinamice și să ofere asistența deplină a aplicației Demo Complet offline. În primul rând, să ne uităm la ceea ce sunt exact lucrătorii de servicii și cum funcționează.

Construirea unui site web? Îmbunătățiți-vă procesul cu un mare Builder de site-uri web , și mențineți-o cu un decent web hosting serviciu. Și obțineți depozitarea dvs. sortată cu acestea Stocare in cloud Opțiuni.

Ce este un lucrător de service?

Deci, ce este un lucrător de service? Este un script, scris în JavaScript, că browserul dvs. rulează în fundal. Nu afectează firul principal (unde JavaScript rulează de obicei pe o pagină web) și nu va intra în conflict cu codul de aplicație sau să afecteze performanța runtime.

Un lucrător de servicii nu are acces direct la DOM sau evenimentele și interacțiunea utilizatorilor care se întâmplă în pagina web. Gândiți-vă la acesta ca un strat care se află între pagina web și rețea, permițându-i să intercepteze și să manipuleze cererile de rețea (de exemplu, cererile AJAX) efectuate de pagina dvs. Acest lucru îl face ideal pentru gestionarea cache-urilor și pentru a sprijini utilizarea offline.

Ciclul de viață al lucrătorului de servicii

Viața unui lucrător de serviciu urmează un flux simplu, dar poate fi un pic confuz atunci când sunteți obișnuiți cu scripturile JS doar că lucrați imediat:

Instalarea & GT; Așteptare (instalată) și GT; Activarea & GT; Activat & GT; Redundant

Când pagina dvs. este încărcată pentru prima dată, codul de înregistrare pe care l-am adăugat la index.html. Începe instalarea lucrătorului de service. Când nu există lucrător existent, noul lucrător de servicii va fi activat imediat după instalare. O pagină web poate avea doar un lucrător de servicii activ la un moment dat.

Dacă un lucrător este deja instalat, noul lucrător de service va fi instalat și apoi așezați la pasul de așteptare până când pagina este complet închisă și apoi reîncărcată. Pur și simplu răcoritoare nu este suficient pentru că ați putea avea alte file deschise. Trebuie să vă asigurați că toate cazurile de pagină sunt închise, altfel noul lucrător nu se va activa. Nu trebuie să închideți filele, puteți să navigați la un alt site și să vă întoarceți.

Ambii instalare și Activati Evenimentele vor apărea doar o dată pe lucrător. Odată activat, lucrătorul de servicii va avea apoi controlul asupra paginii și poate începe să manipuleze evenimente precum preluarea pentru a manipula cererile.

În cele din urmă, un lucrător de servicii va deveni redundant dacă browserul detectează că fișierul lucrătorului în sine a fost actualizat sau dacă instalarea sau activarea eșuează. Browserul va căuta o diferență octet pentru a determina dacă un script de lucrători a fost actualizat.

Este important să rețineți că nu ar trebui să schimbați niciodată (sau Rev) numele lucrătorului dvs. de service. Nici nu ar trebui să memorizați fișierul lucrătorului pe server, deoarece nu veți putea să îl actualizați cu ușurință, deși browserele sunt acum suficiente pentru a ignora anteturile de cache.

01. Clonează aplicația demo

Bine, să începem să învățăm cum să construim o aplicație web cu ajutorul lucrătorilor de servicii. Pentru acest tutorial, veți avea nevoie de versiuni recente ale NODE.JS și NPM instalate pe computer.

Am bătut o aplicație demo pe care o vom folosi ca bază pentru acest tutorial ( clonează aplicația demo aici ). Aplicația este un proiect distractiv mic care aduce prognoza meteo de cinci zile pe baza locației utilizatorului. Apoi va verifica dacă ploaia este prognozată înainte de sfârșitul zilei și va actualiza UI în consecință.

Acesta a fost construit ineficient (intenționat) folosind biblioteci mari, inutile, cum ar fi jquery și bootstrap, cu imagini mari neobișnuite pentru a demonstra diferența de performanță atunci când se utilizează un lucrător de service. În prezent se cântărește la un procent de 4.1MB.

02. Obțineți cheia API

Pentru a prelua datele meteorologice de la API, va trebui să vă aduceți o cheie API gratuită de la Openweathermap. :

Odată ce ați primit cheia, deschideți-vă index.html. și căutați fereastră.Api_key. variabilă în & lt; head & gt; . Inserați cheia în valoarea:

    window.API_KEY = 'paste-your-key-here';

03. Porniți serverul de dezvoltare

Acum suntem gata să începem să lucrăm la proiect. În primul rând, să instalăm dependențele prin rularea:

    npm install

Există două sarcini pentru instrumentul de construire. Alerga NPM Start. Pentru a porni serverul de dezvoltare pe portul 3000. Rulați NPM Run Build. pentru a pregăti versiunea "Producția". Țineți minte că acest lucru este doar un demo, deci nu este într-adevăr o versiune de producție - nu există nici o miniere sau nimic - fișierele primesc "revizuite".

Un algoritm este utilizat pentru a crea un hash, cum ar fi 9C616053E5, din conținutul fișierului. Algoritmul va transmite întotdeauna același hash pentru același conținut, ceea ce înseamnă că, atâta timp cât nu modificați fișierul, hash nu se va schimba. Hash este apoi atașat la numele de fișier, deci de exemplu stiluri.Css ar putea deveni stiluri-9C616053E5.css. Hash reprezintă revizia dosarului - prin urmare, "revizuit".

Puteți cache în siguranță fiecare revizuire a fișierului de pe serverul dvs., fără a fi nevoie să invităm cache-ul dvs., care este scump sau vă faceți griji cu privire la alte cache-uri terțe care servesc versiunea incorectă.

04. Introduceți lucrătorul dvs. de service

Acum, să începem cu lucrătorul nostru de servicii. Creați un fișier numit SW.JS în rădăcina SRC. Directory. Apoi adăugați acești doi ascultători de evenimente pentru a loga instalare și Activati evenimente:

 Self.adDeventlistener ("Instalare", (eveniment) = & gt; {
      consola.log (eveniment);
    });

    Sell.AdDeventlistener ("Activați", (eveniment) = & gt; {
      consola.log (eveniment);
    }); 

de sine Variabila aici reprezintă domeniul de aplicare global de citire a lucrătorului de serviciu. Este un pic ca fereastră obiect într-o pagină web.

Apoi, trebuie să ne actualizăm fișierul index.html și să adăugați comenzile pentru a instala lucrătorul de service. Adăugați acest script chiar înainte de închidere & lt; / corp & gt; etichetă. Acesta va înregistra lucrătorul nostru și va înregistra starea actuală.

 & lt; script & gt;
     Dacă ("Serviceworker" în Navigator) {
       navigator.serviceworker.Register ('/ SW.Js')
         . Atunci (funcția (reg) {
           dacă (reg.installing) {
             consola.log ("Instalarea SW");
           } altfel dacă (reg.waiting) {
             consola.log ("SW de așteptare");
           } altfel dacă (reg.activ) {
             consola.log ("SW activat");
           }
         }). captură (funcție (eroare) {
           // inregistrare esuata
           consola.log ("înregistrarea a eșuat cu" eroare +);
         });
     }
   & lt; / script & gt; 

Porniți serverul de dezvoltare prin rularea NPM Start. și deschideți pagina într-un browser modern. Ne recomandăm să utilizați Google Chrome, deoarece are un bun sprijin pentru lucrător-lucrător în devtools, pe care îl vom referi la acest tutorial. Ar trebui să vedeți trei lucruri înregistrate în consola voastră; doi de la lucrătorul de servicii pentru instalare și Activati Evenimente, iar celălalt va fi mesajul de la înregistrare.

05. Activați lucrătorul

Vom spune muncitorului nostru să renunțe la pasul de așteptare și să activez acum. Deschideți fișierul SW.JS și adăugați această linie oriunde în interiorul instalare Eveniment ascultător:

 auto.skipwaiting (); 

Acum, când actualizăm scriptul lucrătorului, acesta va lua controlul asupra paginii imediat după instalare. Merită să aveți în vedere că acest lucru poate însemna că noul lucrător va lua controlul asupra unei pagini care ar fi putut fi încărcate de o versiune anterioară a lucrătorului dvs. - dacă aceasta va cauza probleme, nu utilizați această opțiune în aplicația dvs.

Puteți confirma acest lucru prin navigarea departe de pagină și apoi reveniți. Ar trebui să vezi instalare și Activati Evenimentele de foc din nou când a fost instalat noul lucrător.

Chrome devtools are o opțiune utilă care înseamnă că vă puteți actualiza lucrătorul doar prin reîncărcarea. Deschideți DevTools și mergeți la fila Aplicație, apoi alegeți Service Worker din coloana din stânga. În partea de sus a panoului este o casetă de bifare marcată actualizată pe reîncărcare, bifați-o. Lucrătorul dvs. actualizat va fi acum instalat și activat pe reîmprospătare.

06. Confirmați modificările

Să confirmăm acest lucru prin adăugarea consola.log ("foo") Sunați la oricare dintre ascultătorii evenimentului și răcorirea paginii. Acest lucru ne-a prins pentru că ne așteptam să vedem jurnalul în consola când am reîmprospătat, dar tot ce vedem a fost mesajul "SW activat". Se pare că cromul reîmprospătează de două ori pagina când opțiunea de actualizare a reîncărcării este bifată.

Puteți confirma acest lucru prin bifarea casetei de primire a jurnalului din panoul Setări consolă și răcoritoare din nou. Ar trebui să vedeți instalarea și activarea evenimentelor înregistrate, împreună cu "foo", urmată de "navigat la http: // localhost: 3000 / 'pentru a indica faptul că pagina a fost reîncărcată și apoi apoi final" SW activat ".

07. Urmăriți evenimentul Fetch

Timp pentru a adăuga un alt ascultător. De data aceasta vom urmări Fetch. Eveniment care este concediat de fiecare dată când pagina încarcă o resursă, cum ar fi un fișier CSS, imagine sau chiar răspuns API. Vom deschide o memorie cache, returnați răspunsul la cerere la pagină și apoi - în fundal - memoria cache a răspunsului. În primul rând, să adăugăm ascultătorul și să reîmprospătați astfel încât să puteți vedea ce se întâmplă. În consola ar trebui să vezi mulți Fetchevent. busteni.

 Self.adDeventlistener ("Fetch", (eveniment) = & gt; {
 consola.log (eveniment);
}); 

Modul nostru de servire utilizează browsersync, care adaugă propriul script la pagină și face cererile de site-uri web. Veți vedea și fetcheventele pentru acestea, dar vrem să le ignorăm. De asemenea, dorim doar ca memoria cache primim cereri din domeniu propriu. Deci, să adăugăm câteva lucruri pentru a ignora cererile nedorite, inclusiv ignorând în mod explicit / Calea indexului:

 Self.adDeventlistener ("Fetch", (eveniment) = & gt; {
 // ignora cererile Crossdomain
 Dacă (eventual.Request.url.Startswith (Self.Location.oriGin)) {
   întoarcere;
 }
 // ignorați cererile non-primite
 dacă (eveniment.request.method! == "Get ') {
   întoarcere;
 }
 // Ignorați Browser-Sync
 dacă (eveniment.request.url.Indexof ("browser-sincron") & gt; -1) {
   întoarcere;
 }
 // împiedică cache cached
 dacă (Event.Request.url === (Self.Location.ORIGIN + '/')) {
   întoarcere;
 }
 // preveni index.html fiind cache
 dacă (eveniment.request.url.endswith ('index.html')) {
   întoarcere;
 }
 consola.log (eveniment);
}); 

Acum, jurnalele ar trebui să fie mult mai curate și este sigur să începeți cache-ul.

08. Cache Activele

Acum putem începe cacherea acestor răspunsuri. Mai întâi trebuie să oferim cache un nume. Să numim al nostru V1-Active . Adăugați această linie în partea de sus a fișierului SW.JS:

 Const AssesCachename = "V1-active"; 

Apoi, trebuie să devenim fetchevenții astfel încât să putem controla ceea ce este returnat la pagină. Putem face asta folosind evenimentul răspunde metodă. Această metodă acceptă o promisiune, astfel încât să putem adăuga acest cod, înlocuindu-l consola.log. :

 // Spuneți preluării pentru a răspunde cu acest lanț de promisiune
 eveniment.Respwith (
   // deschide cache-ul
   cacher.open (ActiveCachename)
     . Atunci ((cache) = & gt; {
       // Faceți cererea către rețea
       Return Fetch (Event.Request)
         . Atunci ((răspuns) = & gt; {
           // cache răspunsul
           cache.put (eveniment.request, răspuns.clone ());
           // returnați răspunsul original la pagină
           răspunsul la returnare;
         });
     })
 ); 

Acest lucru va transmite cererea la rețea, apoi să stocați răspunsul în memoria cache, înainte de a trimite răspunsul original înapoi la pagină.

Este demn de remarcat aici că această abordare nu va memora de fapt răspunsurile până la a doua oară, utilizatorul încărcați pagina. Prima dată va instala și activa lucrătorul, dar până la momentul Fetch. Ascultătorul este gata, totul va fi fost deja solicitat.

Reîmprospătați de câteva ori și verificați memoria cache în DevTools & GT; Fila de aplicare. Extindeți arborele de stocare cache din coloana din stânga și ar trebui să vedeți cache-ul cu toate răspunsurile stocate.

09. Serviți din memorie cache

Totul este stocat, dar nu folosim cache-ul pentru a servi încă fișiere. Să facem asta acum. Mai întâi vom căuta un meci pentru cererea din memoria cache și dacă există, vom servi asta. Dacă nu există, vom folosi rețeaua și apoi vom memora acest răspuns.

// spuneți preluarea pentru a răspunde cu acest lanț
 eveniment.Respwith (
   // deschide cache-ul
   cacher.open (ActiveCachename)
     . Atunci ((cache) = & gt; {
       // Căutați o cerere de potrivire în memoria cache
       Return cache.match (events.Request)
         . Atunci ((potrivite) = & gt; {
           // Dacă se găsește un meci, returnează mai întâi versiunea în cache
           Dacă (potrivite) {
             întoarcere potrivită;
           }
           // În caz contrar, continuați cu rețeaua
           Return Fetch (Event.Request)
             . Atunci ((răspuns) = & gt; {
               // cache răspunsul
               cache.put (eveniment.request, răspuns.clone ());
               // returnați răspunsul original la pagină
               răspunsul la returnare;
             });
         });
     })
); 

Salvați fișierul și reîmprospătați. Verificați DevTools & GT; Fila de rețea și ar trebui să vedeți (de la Serviceworker) enumerate în coloana de dimensiuni pentru fiecare dintre activele statice.

PHEW, am terminat. Pentru o astfel de cantitate mică de cod, există multe de înțeles. Ar trebui să vedeți că reîmprospătarea paginii odată ce toate activele sunt stocate cache este destul de snappy, dar să facem o verificare rapidă (nelegisificată) a timpilor de încărcare pe o conexiune de două ori (DevTools & GT; fila de rețea).

Fără lucrătorul de servicii, încărcarea pe o rețea Fast 3G simulată durează aproape 30 de secunde pentru ca totul să se încarce. Cu lucrătorul de service, cu aceeași legătură cu acelasi conexiune, dar încărcarea din memoria cache, este nevoie de doar o secundă.

Verificați caseta offline și reîmprospătați și veți vedea, de asemenea, că încărcăturile paginii fără o conexiune, deși nu putem obține datele prognozate de la API. La pagina 2 vom reveni la acest lucru și vom învăța cum să memorizați și răspunsul API.

Pagina următoare: Utilizați lucrătorul de servicii pentru a oferi acces online

• 1.
• 2.

Pagina curenta: Pagina 1: Încărcarea mai rapidă