Gjør din app arbeid offline med servicearbeidere

Tjenestearbeidere kan brukes til å forbedre lastetider og offline støtte for nettsteder og webapper. I denne opplæringen skal vi vise deg hvordan du gradvis forbedrer en webapp med en servicevirksomhet. Først vil vi dekke hva som er en servicevirksomhet og hvordan livssyklusen fungerer, så viser vi deg hvordan du bruker deretter å øke hastigheten på nettstedet ditt (denne siden) og tilby offline innhold (side 2).

Da viser vi deg hvordan du skal Hvordan bygge en app med servicearbeidere. Du lærer hvordan du konfigurerer en bare-ben-arbeidstaker som vil cache og servere statiske eiendeler (som leverer et stort ytelsesforsterkning på påfølgende belastninger), og hvordan kan du cache dynamiske API-svar og gi vår demo-app full offline støtte. Først, la oss se på hva akkurat servicearbeidere er, og hvordan de fungerer.

Bygg et nettsted? Strømlinjeforme prosessen med en stor Nettstedbygger , og hold den med en anstendig Web Hosting. service. Og få lagringen din sortert med disse skylagring alternativer.

Hva er en servicevirksomhet?

Så hva er en servicevirksomhet? Det er et skript, skrevet i JavaScript, som nettleseren din går i bakgrunnen. Det påvirker ikke hovedtråden (hvor JavaScript vanligvis kjører på en nettside), og vil ikke komme i konflikt med app-koden din eller påvirke kjøretidsytelsen.

En servicevirksomhet har ikke direkte tilgang til DOM eller hendelser, og brukerinteraksjonen som skjer i selve nettsiden. Tenk på det som et lag som sitter mellom nettsiden og nettverket, slik at det kan avskjære og manipulere nettverksforespørsler (f.eks. Ajax-forespørsler) laget av siden din. Dette gjør det ideelt for å administrere caches og støtte frakoblet bruk.

Tjenestearbeideren Lifecycle

Livet til en servicevirksomhet følger en enkel flyt, men det kan være litt forvirrende når du er vant til JS-skript, bare jobber umiddelbart:

Installere & gt; Venter (installert) & gt; Aktivering og GT; Aktivert og GT; Overflødig

Når siden din først lastes, legges registreringskoden vi til index.html. Starter installasjonen av servicenes arbeidstaker. Når det ikke er noen eksisterende arbeider, vil den nye serviceventen bli aktivert umiddelbart etter installasjonen. En nettside kan bare ha en servicearbeider aktiv om gangen.

Hvis en arbeidstaker allerede er installert, vil den nye servicenes arbeidstaker installeres og deretter sitte på ventetiden til siden er helt lukket og deretter lastes på nytt. Bare forfriskende er ikke nok fordi du kanskje har andre faner åpne. Du må sørge for at alle forekomster av siden er stengt, ellers vil den nye arbeideren ikke aktivere. Du trenger ikke å lukke fanene, du kan bare navigere til et annet nettsted og returnere.

Både installere og aktiveres Hendelser vil bare skje en gang per arbeidstaker. Når du er aktivert, vil servicevirksomheten ha kontroll over siden og kan starte håndtering av hendelser som henting for å manipulere forespørsler.

Endelig vil en servicevirksomhet bli overflødig hvis nettleseren registrerer at arbeidstakerfilen selv har blitt oppdatert eller hvis installasjonen eller aktiveringen mislykkes. Nettleseren vil se etter en byteforskjell for å avgjøre om et arbeidskript har blitt oppdatert.

Det er viktig å merke deg at du aldri bør endre (eller rev) navnet på tjenestemannen. Du bør heller ikke cache til at arbeideren filen selv på serveren, da du ikke vil kunne oppdatere den enkelt, selv om nettlesere er nå smarte nok til å ignorere cachinghodene.

01. Klon Demo-appen

Ok, la oss komme i gang med å lære å bygge en webapp med hjelp fra servicearbeidere. For denne opplæringen, vil du trenge nyere versjoner av node.js og npm som er installert på datamaskinen din.

Vi har slått opp en demo-app som vi vil bruke som grunnlag for denne opplæringen ( klone demo-appen her ). Appen er et morsomt lite prosjekt som henter den fem-dagers værvarsel basert på brukerens plassering. Det vil da sjekke om regn er prognose før slutten av dagen og oppdatere brukergrensesnittet tilsvarende.

Det har blitt bygget ineffektivt (forsettlig) ved hjelp av store, unødvendige biblioteker som jquery og bootstrap, med store uopplærede bilder for å demonstrere forskjellen i ytelse når du bruker en servicevirksomhet. Det veier for tiden inn på en latterlig 4,1 MB.

02. Få API-nøkkelen din

For å hente værdataene fra API, må du få deg en gratis API-nøkkel fra OpenweathMap. :

Når du har nøkkelen din, åpne opp index.html. og se etter window.api_key. variabel i den & lt; head & gt; . Lim inn nøkkelen til verdien:

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

03. Start utviklingsserveren

Nå er vi klare til å begynne å jobbe med prosjektet. Først av alt, la oss installere avhengighetene ved å kjøre:

    npm install

Det er to oppgaver for byggverktøyet. Løpe NPM start For å starte utviklingsserveren på Port 3000. Kjør NPM Run Build. å forberede "produksjon" versjonen. Husk at dette bare er en demo, så er det ikke egentlig en produksjonsversjon - det er ingen minness eller noe - filene får bare "revved".

En algoritme brukes til å skape en hash, for eksempel 9C616053E5, fra filens innhold. Algoritmen vil alltid utføre samme hash for det samme innholdet, noe som betyr at så lenge du ikke endrer filen, vil hashen ikke endres. Hashen er så lagt til filnavnet, så for eksempel Styles.CS kan bli Styles-9C616053E5.CSS. Hashen representerer filens revisjon - derav "revved".

Du kan sikkert cache hver revisjon av filen på serveren din uten å måtte ugyldiggjøre cachen din, som er dyr, eller bekymre deg for en annen tredjeparts cache som serverer feil versjon.

04. Innfør din servicevirksomhet

La oss nå komme i gang med vår servicearbeider. Lag en fil som heter Sw.js i roten til src. katalog. Deretter legger du til disse to hendelseslyttene for å logge på installere og aktiveres arrangementer:

 Self.addeventListener ('install', (Event) = & GT; {
      konsoll.log (begivenhet);
    });

    Self.addeventlistener ('Aktiver', (Event) = & GT; {
      konsoll.log (begivenhet);
    }); 

De selv- Variabel her representerer servicearbeiderens globale skrivebeskyttet omfang. Det er litt som vindu objekt på en nettside.

Deretter må vi oppdatere vår index.html-fil og legge til kommandoene for å installere servicearbeiderne. Legg til dette skriptet like før avslutningen & lt; / body & gt; stikkord. Det registrerer vår arbeidstaker og logger sin nåværende status.

 & lt; script & gt;
     hvis ('servicearbeideren' i navigatoren) {
       navigator.serviceworker.register ('/ sw.js')
         .Den (funksjon (reg) {
           hvis (reg.installering) {
             konsoll.log ("SW installasjon");
           } ellers hvis (reg.waiting) {
             Console.log ('SW VENT');
           } ellers hvis (reg.active) {
             konsoll.log ('SW aktivert');
           }
         }). Fangst (funksjon (feil) {
           // registrering feilet
           Console.log ("Registrering mislyktes med" + feil);
         });
     }
   & lt; / script & gt; 

Start din utviklingsserver ved å kjøre NPM start og åpne siden i en moderne nettleser. Vi vil anbefale å bruke Google Chrome, da den har god service-arbeidere støtte i sine Devtools, som vi vil referere til gjennom denne opplæringen. Du bør se tre ting logget på konsollen din; to fra servicearbeider for installere og aktiveres Hendelser, og den andre vil være meldingen fra registreringen.

05. Aktiver arbeideren

Vi skal fortelle vår arbeidstaker å hoppe over det ventersteget og aktivere nå. Åpne SW.Js-filen og legg til denne linjen hvor som helst inne i installere Event Listener:

 selv.skipwaiting (); 

Nå, når vi oppdaterer arbeidstakerskriptet, vil det ta kontroll over siden umiddelbart etter installasjonen. Det er verdt å huske på at dette kan bety at den nye arbeideren tar kontroll over en side som kan ha blitt lastet av en tidligere versjon av arbeideren din - hvis det kommer til å forårsake problemer, ikke bruk dette alternativet i appen din.

Du kan bekrefte dette ved å navigere vekk fra siden og deretter returnere. Du bør se installere og aktiveres Hendelser brann igjen når den nye arbeideren er installert.

Chrome Devtools har et nyttig alternativ som betyr at du kan oppdatere arbeideren din bare ved å laste på nytt. Åpne DevTools og gå til Program-fanen, og velg deretter Service Worker fra den venstre kolonnen. På toppen av panelet er en kryssboks merket oppdatering på Reload, merk av det. Din oppdaterte arbeidstaker vil nå bli installert og aktivert på oppdatering.

06. Bekreft endringer

La oss bekrefte dette ved å legge til konsoll.log ('foo') Ring inn en av hendelseslyttene og forfriskningen på siden. Dette fanget oss ut fordi vi ventet å se loggen i konsollen når vi oppdaterte, men alt vi så var "SW-aktivert" melding. Det viser seg at Chrome oppdaterer siden to ganger når oppdateringen på Reload-alternativet er krysset.

Du kan bekrefte dette ved å krysse Preserve Log Tick-boksen i Konsollinnstillinger-panelet og forfriskende igjen. Du bør se installasjons- og aktivere hendelser som er logget, sammen med 'Foo', etterfulgt av 'navigert til http: // localhost: 3000 /' for å indikere at siden ble lastet ned og deretter deretter endelig 'SW-aktivert' melding.

07. Spor fetch-hendelsen

Tid til å legge til en annen lytter. Denne gangen spore vi hente det Event som er sparket hver gang siden laster en ressurs, for eksempel en CSS-fil, bilde eller til og med API-respons. Vi åpner en cache, returnerer forespørselen på siden og deretter - i bakgrunnen - Cache svaret. Først av La oss legge til lytteren og oppdatere, slik at du kan se hva som skjer. I konsollen bør du se mange FetchEvent. tømmerstokker.

 Self.addeventlistener ('hente', (begivenhet) = & gt; {
 konsoll.log (begivenhet);
}); 

Vår serveringsmodus bruker Browsersync, som legger til eget skript på siden og gjør Websocket-forespørsler. Du vil se FetchEvents for disse også, men vi vil ignorere disse. Vi vil også bare cache få forespørsler fra vårt eget domene. Så la oss legge til noen ting å ignorere uønskede forespørsler, inkludert eksplisitt å ignorere / / Indekssti:

 Self.addeventlistener ('hente', (begivenhet) = & gt; {
 // Ignorer CrossDomain-forespørsler
 Hvis (! Event.Request.url.Startswith (Self.Location.Origin)) {
   komme tilbake;
 }
 // Ignorer ikke-få forespørsler
 hvis (event.request.method! == 'få') {
   komme tilbake;
 }
 // ignorere nettleser-synkronisering
 hvis (event.request.url.indexof ('nettleser-synkronisering') & gt; -1) {
   komme tilbake;
 }
 // Forhindre at indeksveien blir bufret
 hvis (event.request.url === (self.location.origin + '/')) {
   komme tilbake;
 }
 // forhindre indeks.html blir bufret
 hvis (event.request.url.endswith ('index.html')) {
   komme tilbake;
 }
 konsoll.log (begivenhet);
}); 

Nå skal loggene være mye renere, og det er trygt å starte caching.

08. Buffer De eiendelene

Nå kan vi begynne å caching disse svarene. Først må vi gi vår cache et navn. La oss kalle vår V1-eiendeler . Legg til denne linjen på toppen av SW.Js-filen:

 constabscachename = 'v1-eiendeler'; 

Da må vi hijack fetefinnerne, slik at vi kan kontrollere hva som returneres til siden. Vi kan gjøre det som bruker arrangementet reagerer med metode. Denne metoden aksepterer et løfte, slik at vi kan legge til denne koden, erstatte Console.Log. :

 // Fortell henting å svare med denne løftekjeden
 Event.respondwith (
   // Åpne hurtigbufferen
   caches.open (eiendelerCachename)
     .Den ((cache) = & gt; {
       // Gjør forespørselen til nettverket
       Return Fetch (Event.Request)
         .Nå ((svar) = & gt; {
           // cache svaret
           Cache.Put (Event.Request, Response.Clone ());
           // returner det opprinnelige svaret på siden
           returneres respons;
         });
     })
 ); 

Dette vil videresende forespørselen til nettverket, og lagre svaret i hurtigbufferen, før du sender det opprinnelige svaret tilbake til siden.

Det er verdt å merke seg at denne tilnærmingen faktisk ikke vil cache svarene til andre gang brukeren laster siden. Første gang vil installere og aktivere arbeideren, men når den tiden hente det Listener er klar, alt vil allerede ha blitt forespurt.

Oppdater et par ganger og kontroller hurtigbufferen i DevTools & GT; Programfanen. Utvid cache lagringstreet i den venstre kolonnen, og du bør se cachen din med alle lagrede svar.

09. Server fra hurtigbufferen

Alt er bufret, men vi bruker ikke cachen til å betjene noen filer ennå. La oss hekte det opp nå. Først ser vi etter en kamp for forespørselen i hurtigbufferen, og hvis den eksisterer, vil vi tjene det. Hvis det ikke eksisterer, bruker vi nettverket og deretter cache svaret.

// Fortell henting å svare med denne kjeden
 Event.respondwith (
   // Åpne hurtigbufferen
   caches.open (eiendelerCachename)
     .Den ((cache) = & gt; {
       // Se etter matchende forespørsel i hurtigbufferen
       Return Cache.Match (Event.Request)
         .Den ((matchet) = & gt; {
           // Hvis en kamp er funnet, returner den bufret versjonen først
           hvis (matchet) {
             returnerer matchet;
           }
           // ellers fortsetter du til nettverket
           Return Fetch (Event.Request)
             .Nå ((svar) = & gt; {
               // cache svaret
               Cache.Put (Event.Request, Response.Clone ());
               // returner det opprinnelige svaret på siden
               returneres respons;
             });
         });
     })
); 

Lagre filen og oppdatere. Sjekk DevTools & GT; Nettverksfanen og du bør se (fra serviceveier) som er oppført i størrelses-kolonnen for hver av de statiske eiendelene.

Phew, vi er ferdige. For så liten mengde kode, er det mye å forstå. Du bør se at forfriskende siden når alle eiendeler er bufret, er ganske snappy, men la oss gjøre en rask (uvennlig) sjekk av lastetider på en thrjulet tilkobling (DevTools & GT; nettverksfanen).

Uten tjenestearbeideren tar lasting over et simulert fast 3G-nettverk nesten 30 sekunder for alt å laste. Med servicearbeider, med samme gasspjeld, men lasting fra hurtigbufferen, tar det bare under et sekund.

Sjekk den offline-boksen og oppdatere, og du vil også se at siden laster uten tilkobling, selv om vi ikke kan få prognosedataene fra API. På side 2 vil vi gå tilbake til dette og lære å buffe API-svaret også.

Neste side: Bruk servicearbeider til å tilby online-tilgang

• 1
• 2.

Nåværende side: Side 1: Raskere lasting