Tee sovellustyösi offline-tilassa palveluntyöntekijöiden kanssa

Palveluntyöntekijöitä voidaan käyttää latausaikojen parantamiseen ja sivuston ja web-sovellusten offline-tukeen. Tässä opetusohjelmassa aiomme näyttää, miten voit asteittain parantaa web-sovellusta palvelutoiminnassa. Ensin kattaa palvelustyöntekijä ja miten sen elinkaari toimii, niin näytämme, kuinka voit käyttää sivustossasi (tätä sivua) ja tarjota offline-sisältöä (sivu 2).

Sitten näytämme sinulle Miten rakentaa sovellus palvelun työntekijöiden kanssa. Opit luomaan paljain base-työntekijä, joka välimuistiin ja palvella staattisia varoja (toimittaa valtava suorituskykyä myöhemmillä kuormilla), miten välimuistin dynaamiset API-vastaukset ja antavat demo-sovelluksemme täydelle offline-tukea. Ensinnäkin katsotaanpa, mitä palvelustyöntekijät ovat ja miten he toimivat.

Verkkosivuston rakentaminen? Virtaviivaistaa prosessiasi hyvällä Verkkosivuston rakentaja ja ylläpitää sitä kunnollisella sivujen ylläpito Palvelu. Ja saat tallennuksesi lajitella näiden kanssa pilvivarasto vaihtoehtoja.

Mikä on palvelutoiminto?

Mikä on palvelutoiminto? Se on käsikirjoitus, joka on kirjoitettu JavaScript, että selaimesi kulkee taustalla. Se ei vaikuta pääkierteeseen (jossa JavaScript toimii yleensä Web-sivulla), ja se ei ole ristiriidassa sovelluksen koodin kanssa tai vaikuta runtime-suorituskykyyn.

Palvelutoiminnassa ei ole suoraa pääsyä DOM- tai tapahtumiin ja käyttäjän vuorovaikutukseen, joka tapahtuu itse verkkosivulla. Ajattele sitä kerrosta, joka istuu verkkosivun ja verkon välillä, jolloin se voi siepata ja manipuloida verkkopyyntöjä (esim. AJAX-pyynnöt). Tämä tekee siitä ihanteellisen kätköjen hallintaan ja tukemalla offline-käyttöä.

Palvelutyöntekijän elinkaari

Palvelun työntekijän elämä seuraa yksinkertaista virtausta, mutta se voi olla hieman hämmentävä, kun käytät JS-komentosarjoja vain työskentelemään välittömästi:

Asennus & gt; Odotetaan (asennettu) & gt; Aktivointi & gt; Aktivoitu & GT; Irtisanomaton

Kun sivusi on ensin ladattu, rekisteröintikoodi, johon lisätään index.html aloittaa palvelun työntekijän asennuksen. Kun olemassa olevaa työntekijää ei ole, uusi huoltotyöntekijä aktivoidaan välittömästi asennuksen jälkeen. Web-sivulla voi olla vain yksi huoltotyöntekijä aktiivisesti kerrallaan.

Jos työntekijä on jo asennettu, uusi huoltotyöntekijä asennetaan ja istuudu sitten odotusvaiheeseen, kunnes sivu on täysin suljettu ja sitten ladattu uudelleen. Yksinkertaisesti virkistävä ei riitä, koska sinulla saattaa olla muita välilehtiä. Sinun on varmistettava, että kaikki sivun tapaukset suljetaan, muuten uusi työntekijä ei aktivoi. Sinun ei tarvitse sulkea välilehtiä, voit vain navigoida toiseen sivustoon ja palata.

Molemmat Asentaa ja aktivoida Tapahtumia esiintyy vain kerran työntekijää kohden. Kun aktivoidaan, huoltotyöntekijällä on sitten ohjaus sivulta ja voi aloittaa tapahtumien käsittelyn, kuten hakemuksen manipuloida pyyntöjä.

Lopuksi palvelustyöntekijä irtisanotaan, jos selain havaitsee, että itse työntekijätiedosto on päivitetty tai jos asennus tai aktivointi epäonnistuu. Selain etsii tavun ero määrittää, onko työntekijän komentosarja päivitetty.

On tärkeää huomata, että sinun ei pitäisi koskaan muuttaa (tai rev) palvelun työntekijän nimeä. Ei myöskään pitäisi välimuistia itse palvelimelle, koska et voi päivittää sitä helposti, vaikka selaimet ovat nyt tarpeeksi älykkäitä välimuistin otsikoista.

01. Klooni demo-sovellus

Okei, aloitamme oppimisen Miten rakentaa web-sovellus palvelutoimintojen avulla. Tähän opetusohjelmaan tarvitset äskettäiset versiot Node.js ja NPM asennettuna tietokoneellesi.

Olemme koputtaneet demo-sovelluksen, jota käytämme tämän opetusohjelman perustana ( klooni demo-sovellus täällä ). Sovellus on hauska pieni projekti, joka hakee viiden päivän sääennusteen käyttäjän sijainnin perusteella. Se sitten tarkistaa, jos sade ennustetaan ennen päivän loppua ja päivittää käyttöliittymän.

Se on rakennettu tehottomasti (tarkoituksellisesti) käyttämällä suuria, tarpeettomia kirjastoja, kuten jquery ja bootstrap, jossa on suuria käyttämättömiä kuvia, jotka osoittavat suorituskyvyn eroa palvelun työntekijää käytettäessä. Se painaa tällä hetkellä naurettavissa 4.1MB.

02. Hanki API-avain

Jotta voisit hakea säätiedot API: sta, sinun on saatava itsesi ilmainen API-avain OpenWeatherMap :

Kun olet saanut avaimen, avaa index.html ja etsi window.api_key muuttuja & lt; pää & gt; . Liitä avain arvoon:

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

03. Aloita kehityspalvelin

Nyt olemme valmiita aloittamaan projektin työskentelyn. Ensinnäkin asennat riippuvuudet käynnissä:

    npm install

Rakennustyökalulle on kaksi tehtävää. Juosta npm alkaa Käynnistä kehityspalvelin portti 3000. Suorita NPM Run Build Valmistele "tuotanto" -versio. Muista, että tämä on vain demo, joten ei ole oikeastaan ​​tuotantoversio - ei ole minkäänlaisia ​​tai mitään - tiedostoja vain "Revved".

Algoritmia käytetään luomaan hash, kuten 9C616053E5, tiedostojen sisällöstä. Algoritmi tuottaa aina saman sisällön saman hajautuksen, mikä tarkoittaa sitä, että niin kauan kuin et muokkaa tiedostoa, hash ei muutu. Hash liitetään sitten tiedostonimelle, joten esimerkiksi tyylit.css voi tulla tyylit-9c616053e5.css. Hash edustaa tiedoston tarkistusta - siten "Reved".

Voit turvallisesti välimuistin tiedoston versio palvelimellasi ilman, että sinun tarvitsee mitätöidä välimuistin, joka on kallista tai huolehtia siitä, että jokin muu kolmannen osapuolen välimuisti, joka palvelee virheellistä versiota.

04. Esittele palvelutoimesi

Nyt aloitetaan palvelutarjontaamme. Luo tiedosto nimeltä SW.JS src Hakemisto. Lisää sitten nämä kaksi tapahtumien kuuntelijoita kirjautumaan Asentaa ja aktivoida Tapahtumat:

 SELF.ADDEVENTLISTER ('asennus', (tapahtuma) = & gt; {
      konsoli.log (tapahtuma);
    });

    SELF.ADDEVENTLISTER ("Aktivoi", (tapahtuma) = & gt; {
      konsoli.log (tapahtuma);
    }); 

The itse Muuttuja edustaa palvelun työntekijän maailmanlaajuista lukua. Se on vähän kuin ikkuna Objekti verkkosivulla.

Seuraavaksi meidän on päivitettävä Index.html-tiedosto ja lisää komennot palvelun työntekijän asentamiseksi. Lisää tämä käsikirjoitus juuri ennen sulkemista & lt; / body & gt; tag. Se rekisteröi työntekijämme ja kirjata sen nykyisen tilan.

 & lt; skripti & gt;
     Jos ("Serviceworker" navigaattorissa) {
       navigator.serviceworker.register ('/ sw.js')
         - (toiminto (reg) {
           jos (reg.enning) {
             konsoli.log ("SW-asennus");
           } muu, jos (reg.waiting) {
             konsoli.log ('SW Odotus');
           } muu jos (reg.active) {
             konsoli.log ('SW Activoitu ");
           }
         }). saalis (toiminto (virhe) {
           // Rekisteröityminen epäonnistui
           Console.log ("Rekisteröinti epäonnistui" + virhe);
         });
     }
   & lt; / script & gt; 

Aloita kehityspalvelin käynnissä npm alkaa ja avaa sivu modernissa selaimessa. Suosittelemme Google Chromen käyttöä, koska sillä on hyvä palvelu-työntekijä tukee sen devotools, jota viitataan koko tähän opetusohjelmaan. Sinun pitäisi nähdä kolme asiaa, jotka on kirjautunut konsoliin; kaksi palvelusta työntekijästä Asentaa ja aktivoida Tapahtumat ja toinen on viesti rekisteröinnistä.

05. Aktivoi työntekijä

Aiomme kertoa työntekijälle ohittaa odotusvaiheen ja aktivoida nyt. Avaa SW.JS-tiedosto ja lisää tämä rivi missä tahansa Asentaa Tapahtumien kuuntelija:

 Self.skipwaiting (); 

Nyt kun päivitämme työntekijän komentosarjan, se hallitsee sivun välittömästi asennuksen jälkeen. On syytä katsoa, ​​että tämä voi tarkoittaa, että uusi työntekijä hallitsee sivua, joka on ehkä ladattu työntekijän aiemmasta versiosta - jos se aiheuttaa ongelmia, älä käytä tätä vaihtoehtoa sovelluksessa.

Voit vahvistaa tämän navigoimalla pois sivulta ja palaa sitten. Sinun pitäisi nähdä Asentaa ja aktivoida Tapahtumat tulipalo uudelleen, kun uusi työntekijä on asennettu.

Chrome Devools on hyödyllinen vaihtoehto, joka tarkoittaa, että voit päivittää työntekijän vain uudelleenlataamalla. Avaa DevTools ja siirry sovellus-välilehdelle ja valitse sitten Palvelutoimittaja vasemmasta sarakkeesta. Paneelin yläosassa on rasti-ruutu, joka on merkitty päivitys uudelleen lataamalla, valitse se. Päivitetty työntekijä asennetaan nyt ja aktivoidaan päivitys.

06. Vahvista muutokset

Vahvista tämä lisäämällä konsoli.log ('foo') Soita jompaankumpaan tapahtuman kuuntelijoista ja virkistämällä sivua. Tämä tarttui meidät ulos, koska odotimme näkemään lokin konsolissa, kun virkistämme, mutta kaikki näimme, että oli "SW Activated" -viesti. Se osoittautuu Chrome päivittää sivun kahdesti, kun päivitys latautuu.

Voit vahvistaa tämän valitsemalla konsolin asetukset-paneelissa olevasta säästämislokeron ja virkistämällä uudelleen. Sinun pitäisi nähdä asennuksen ja aktivoida tapahtumia kirjautuneena yhdessä "Foo": n kanssa, jota seuraa "navigoitu http: // localhost: 3000 /" osoittamaan, että sivu reloaded ja sitten lopullinen "SW Actited" -viesti.

07. Seuraa hakutapahtumaa

Aika lisätä toinen kuuntelija. Tällä kertaa seuraamme hakea Tapahtuma, joka on ampui joka kerta, kun sivu lataa resurssia, kuten CSS-tiedoston, kuvan tai jopa API-vasteen. Avaa välimuistin, palauttaa pyynnön vastauksen sivulle ja sitten - taustalla - välimuisti vastaus. Ensinnäkin lisätään kuuntelija ja virkistys, jotta voit nähdä, mitä tapahtuu. Konsolissa sinun pitäisi nähdä monia Fetchevent Lokit.

 SELF.ADDEVENTLISTER ("FETCH", (tapahtuma) = & gt; {
 konsoli.log (tapahtuma);
}); 

Palvelutila käyttää selausta, joka lisää oman komentosarjan sivulle ja tekee WebSocket-pyyntöjä. Näet myös fetchentsit myös, mutta haluamme sivuuttaa nämä. Haluamme myös vain välimuisti saada pyyntöjä omasta verkkotunnuksestamme. Joten lisäävät muutamia asioita sivuuttaa ei-toivotut pyynnöt, mukaan lukien nimenomaisesti huomiotta / Indeksireitti:

 SELF.ADDEVENTLISTER ("FETCH", (tapahtuma) = & gt; {
 // sivuuttaa crossdomain-pyyntöjä
 jos (! Tapahtuma.Request.url.startswith (self.Location.origiini) {
   palata;
 }
 // sivuuttaa ei-saat pyyntöjä
 jos (Event.request.metod! == "get ') {
   palata;
 }
 // sivuuttaa selaimen synkronointi
 jos (Event.request.url.indexof ("selain synkronointi) & gt; -1) {
   palata;
 }
 // estää indeksireitin välimuistiin
 jos (Event.request.url === (self.Location.origin + '/')) {
   palata;
 }
 // estää index.html välimuistiin
 jos (Event.request.url.endwith ("index.html)) {
   palata;
 }
 konsoli.log (tapahtuma);
}); 

Nyt lokit pitäisi olla paljon puhtaampaa ja on turvallista aloittaa välimuisti.

08. Välimuisti omaisuus

Nyt voimme aloittaa näiden vastausten välimuistin. Ensin meidän on annettava välimuisti nimi. Soitamme meidän V1-varoja . Lisää tämä rivi SW.JS-tiedoston yläosaan:

 CONST CONSTOMSCACHENAME = "V1-varoja"; 

Sitten meidän täytyy kaapata fetchevents, jotta voimme hallita, mitä palautetaan sivulle. Voimme tehdä sen tapahtuman avulla Vastaa menetelmä. Tämä menetelmä hyväksyy lupauksen, jotta voimme lisätä tämän koodin, korvata Console.log :

 // Kerro hakemaan tämän lupausketjun kanssa
 tapahtuma.respondwith (
   // avaa välimuisti
   caches.open (varatCachename)
     ., (välimuisti) = & gt; {
       // tee pyyntö verkkoon
       Paluu Fetch (Event.request)
         ., (vastaus) = & gt; {
           // välimuisti vastaus
           Cache.put (Event.request, Response.clone ());
           // palauta alkuperäinen vastaus sivulle
           palautusvaste;
         });
     }))
 ); 

Tämä lähettää verkon pyynnön ja tallentaa vastauksen välimuistiin, ennen kuin lähetät alkuperäisen vastauksen takaisin sivulle.

On syytä huomata tässä, että tämä lähestymistapa ei itse asiassa välimuistiin vastauksiin vasta toista kertaa käyttäjä lataa sivun. Ensimmäistä kertaa asentaa ja aktivoi työntekijä, mutta siihen mennessä hakea Kuuntelija on valmis, kaikki on jo pyydetty.

Päivitä pari kertaa ja tarkista välimuisti devtools & gt; Sovellus-välilehti. Laajenna välimuistin tallennuspuun vasemmassa sarakkeessa ja sinun pitäisi nähdä välimuisti kaikki tallennetut vastaukset.

09. Tarjoile välimuisti

Kaikki on välimuistiin, mutta emme todellakaan käytä välimuistia palvelemaan vielä tiedostoja vain. Katsotaanko se nyt. Ensin etsimme ottelun välimuistin pyynnöstä ja jos se on olemassa, palvelemme sitä. Jos sitä ei ole olemassa, käytämme verkkoa ja välimuistin vastaus.

// kerro hakemaan tämän ketjun
 tapahtuma.respondwith (
   // avaa välimuisti
   caches.open (varatCachename)
     ., (välimuisti) = & gt; {
       // etsi vastaavaa pyyntöä välimuistiin
       Palauta Cache.match (Event.request)
         .Tää ((sovitettu) = & gt; {
           // Jos ottelu löytyy Palauta välimuistissa oleva versio ensin
           jos (sovitettu) {
             Palautus sovitettu;
           }
           // muuten edelleen verkolle
           Paluu Fetch (Event.request)
             ., (vastaus) = & gt; {
               // välimuisti vastaus
               Cache.put (Event.request, Response.clone ());
               // palauta alkuperäinen vastaus sivulle
               palautusvaste;
             });
         });
     }))
); 

Tallenna tiedosto ja päivitä. Tarkista devtools & gt; Verkko-välilehti ja sinun pitäisi nähdä (Serviceworker), joka on lueteltu koon sarakkeessa kullekin staattiselle varalle.

Phew, olemme tehneet. Tällaisen pienen määrän koodia varten on paljon ymmärrettävää. Sinun pitäisi nähdä, että sivun virkistäminen, kun kaikki varat ovat välimuistissa, on varsin snappy, mutta teen nopea (unscientific) tarkistus kuormitusaikoina kuristuksella (devtools & gt, verkko-välilehti).

Ilman palvelun työntekijää lastaus simuloidun nopean 3G-verkon yli kestää lähes 30 sekuntia kaiken lataamiseen. Palvelutoimiston kanssa, jolla on sama kuristettu yhteys, mutta lataus välimuistista, kestää vain alle sekunnin.

Tarkista offline-ruutu ja päivitä, ja näet myös, että sivun lataukset ilman yhteyttä, vaikka emme voi saada ennustetietoja API: ltä. Sivulla 2 Palaan tähän ja oppia välimuistin myös API-vastaus.

Seuraava sivu: Käytä palvelun työntekijää tarjoamaan verkkoyhteyttä

• 1
• 2

Tämänhetkinen sivu: Page 1: nopeampi lataus