Naj vaša aplikacija deluje brez povezave s servisnimi delavci

Stran 1 od 2: Stran 1: Hitrejše nalaganje

Storitvene delavce lahko uporabite za izboljšanje časa nalaganja in podporo brez povezave za vaša spletna mesta in spletne aplikacije. V tej vadnici vam bomo pokazali, kako postopoma izboljšati spletno aplikacijo s Service Workerjem. Najprej bomo obravnavali, kaj je uslužbenec in kako deluje njegov življenjski cikel, nato pa vam bomo pokazali, kako nato uporabiti za pospešitev vašega spletnega mesta (ta stran) in ponujanje vsebine brez povezave (stran 2).

Potem vam bomo pokazali, kako kako zgraditi aplikacijo s uslužbenci. Naučili se boste, kako nastaviti golo kost Workerja, ki bo predpomnil in uporabljal statična sredstva (kar bo povečalo zmogljivost pri naslednjih obremenitvah), nato pa, kako lahko predpomni dinamične odzive API-ja in naši demo aplikaciji nudi popolno podporo brez povezave. Najprej si oglejmo, kaj natančno so uslužbenci in kako delujejo.



Izdelava spletnega mesta? Poenostavite svoj postopek z odličnim graditelj spletnih strani in ga vzdržujte s spodobnim spletno gostovanje storitev. In shranite shrambo s temi shranjevanje v oblaku opcije.



Kaj je uslužbenec?

Kaj je torej uslužbenec? To je skript, napisan v JavaScript, ki ga brskalnik izvaja v ozadju. To ne vpliva na glavno nit (kjer se JavaScript običajno izvaja na spletni strani) in ne bo v navzkrižju s kodo aplikacije ali vplivalo na zmogljivost izvajanja.

Uslužbenec nima neposrednega dostopa do DOM-a ali dogodkov in interakcije uporabnika, ki se dogajajo na sami spletni strani. Pomislite na to kot na plast, ki se nahaja med spletno stranjo in omrežjem ter ji omogoča prestrezanje in obdelavo omrežnih zahtev (npr. Zahtev Ajax), ki jih poda vaša stran. Zaradi tega je idealen za upravljanje predpomnilnikov in podporo uporabi brez povezave.



Življenjski cikel uslužbenca

Življenje uslužbenca poteka po preprostem toku, vendar je lahko nekoliko zmedeno, če ste navajeni, da JS skripti delajo takoj:

kubo in konceptualna umetnost dveh strun

Namestitev> Čakanje (nameščeno)> Aktiviranje> Aktivirano> Odvečno

Ko je vaša stran prvič naložena, registracijska koda, ki smo jo dodali index.html zažene namestitev serviserja. Ko ni obstoječega Workerja, se novi Service Worker aktivira takoj po namestitvi. Na spletni strani je lahko hkrati aktiven samo en uslužbenec.



Če je Worker že nameščen, bo nameščen novi Service Worker, ki bo nato čakal, dokler se stran popolnoma ne zapre in nato znova naloži. Preprosto osvežitev ni dovolj, ker imate morda odprte druge zavihke. Zagotoviti morate, da so vsi primerki strani zaprti, sicer se novi Worker ne bo aktiviral. Zavihkov vam ni treba zapreti, lahko se preprosto odpravite na drugo spletno mesto in se vrnete.

Oboje namestite in aktivirati dogodki se bodo zgodili samo enkrat na delavca. Ko je uslužbenec aktiviran, bo imel nadzor nad stranjo in lahko začne obdelovati dogodke, kot je pridobivanje, za obdelavo zahtev.

Končno bo Service Worker postal odveč, če brskalnik zazna, da je bila sama datoteka delavca posodobljena ali če namestitev ali aktivacija ne uspe. Brskalnik bo poiskal razliko v bajtih, da ugotovi, ali je bil posodobljen delovni skript.

Pomembno je vedeti, da nikoli ne smete spremeniti (ali popraviti) imena svojega serviserja. Prav tako ne bi smeli sami shraniti delovne datoteke v strežnik, saj je ne boste mogli enostavno posodobiti, čeprav so brskalniki zdaj dovolj pametni, da prezrejo glave predpomnjenja.

01. Klonirajte predstavitveno aplikacijo

V redu, začnimo se učiti, kako izdelati spletno aplikacijo s pomočjo serviserjev. Za to vadnico boste potrebovali najnovejše različice Node.js in npm, nameščene v računalniku.

Razbili smo predstavitveno aplikacijo, ki jo bomo uporabili kot osnovo za to vadnico ( tukaj klonirajte predstavitveno aplikacijo ). Aplikacija je zabaven mali projekt, ki pridobi petdnevno vremensko napoved glede na lokacijo uporabnika. Nato bo preveril, ali je napovedan dež pred koncem dneva, in ustrezno posodobil uporabniški vmesnik.

Z velikimi nepotrebnimi knjižnicami, kot sta jQuery in Bootstrap, je bila zgrajena neučinkovito (namerno) z velikimi neoptimiziranimi slikami, ki dokazujejo razlike v zmogljivosti pri uporabi storitvenega delavca. Trenutno tehta smešnih 4,1 MB.

02. Pridobite svoj ključ API

Če želite iz API-ja pridobiti vremenske podatke, si morate priskrbeti brezplačen ključ API-ja OpenWeatherMap :

Ko dobite ključ, odprite index.html in poiščite okno.API_KEY spremenljivka v . Prilepite svoj ključ v vrednost:

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

03. Zaženite razvojni strežnik

Zdaj smo pripravljeni začeti delati na projektu. Najprej namestimo odvisnosti tako, da zaženemo:

npm install

Orodje za gradnjo ima dve nalogi. Teči nadmorske višine za zagon razvojnega strežnika na vratih 3000. Zaženi npm zaženi graditi za pripravo 'produkcijske' različice. Upoštevajte, da je to samo predstavitev, torej v resnici ni produkcijska različica - ni minifikacije ali česar koli drugega - datoteke se preprosto 'revvirajo'.

Algoritem se uporablja za ustvarjanje razpršitve, na primer 9c616053e5, iz vsebine datoteke. Algoritem bo vedno izpisal isto razpršitev za isto vsebino, kar pomeni, da dokler ne spremenite datoteke, se razpršitev ne bo spremenila. Hash je nato dodan imenu datoteke, tako da lahko na primer styles.css postane styles-9c616053e5.css. Hash predstavlja revizijo datoteke - torej 'revved'.

Vsako revizijo datoteke lahko varno shranite v predpomnilnik na strežniku, ne da bi vam bilo treba razveljaviti predpomnilnik, ki je drag, ali skrbeti, da bi kak drug predpomnilnik drugih proizvajalcev napačno različico.

04. Predstavite svojega serviserja

Zdaj pa začnimo z našim serviserjem. Ustvari datoteko z imenom sw.js v korenu datoteke src imenik. Nato dodajte ta dva poslušalca dogodkov, da prijavite datoteko namestite in aktivirati dogodki:

self.addEventListener('install', (event) => { console.log(event); }); self.addEventListener('activate', (event) => { console.log(event); });

The sebe spremenljivka tukaj predstavlja globalni obseg storitve Service Worker samo za branje. Malo je podobno okno predmet na spletni strani.

photoshop ali ilustrator za digitalno umetnost

Nato moramo posodobiti datoteko index.html in dodati ukaze za namestitev Service Workerja. Ta skript dodajte tik pred zaključkom oznaka. Registriral bo našega delavca in zapisal njegovo trenutno stanje.

if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(function(reg) { if (reg.installing) { console.log('SW installing'); } else if (reg.waiting) { console.log('SW waiting'); } else if (reg.active) { console.log('SW activated'); } }).catch(function(error) { // registration failed console.log('Registration failed with ' + error); }); }

Zaženite svoj razvojni strežnik z zagonom nadmorske višine in odprite stran v sodobnem brskalniku. Priporočamo uporabo brskalnika Google Chrome, saj ima v svojih napravah DevTools dobro podporo serviserjev, na katere se bomo sklicevali v tej vadnici. V konzoli bi morali biti zabeležene tri stvari; dva od uslužbenca za namestite in aktivirati dogodkov, drugo pa bo sporočilo iz registracije.

05. Aktivirajte delavca

Rekli bomo svojemu delavcu, naj preskoči čakalni korak in se aktivira zdaj. Odprite datoteko sw.js in dodajte to vrstico kjer koli znotraj datoteke namestite poslušalec dogodka:

self.skipWaiting();

Zdaj, ko posodobimo skript Worker, bo prevzel nadzor nad stranjo takoj po namestitvi. Upoštevati je treba, da to lahko pomeni, da bo novi Worker prevzel nadzor nad stranjo, ki jo je morda naložila prejšnja različica vašega Workerja - če bo to povzročalo težave, ne uporabljajte te možnosti v svoji aplikaciji.

To lahko potrdite tako, da se odmaknete s strani in nato vrnete. Morali bi videti namestite in aktivirati dogodki se znova zaženejo, ko je nameščen novi Worker.

Chrome DevTools ima koristno možnost, ki pomeni, da lahko Worker posodobite s ponovnim nalaganjem. Odprite DevTools in pojdite na zavihek Application, nato v levem stolpcu izberite Service Worker. Na vrhu plošče je potrditveno polje Posodobitev ob ponovnem nalaganju, označite ga. Vaš posodobljeni Worker bo zdaj nameščen in aktiviran ob osvežitvi.

06. Potrdite spremembe

Potrdimo to z dodajanjem console.log ('foo') pokličite katerega od poslušalcev dogodkov in osvežite stran. To nas je ujelo, ker smo pričakovali, da bomo ob osvežitvi videli dnevnik v konzoli, a vse, kar smo videli, je bilo sporočilo 'SW aktivirano'. Izkazalo se je, da Chrome dvakrat osveži stran, ko je označena možnost Posodobi ob ponovnem nalaganju.

To lahko potrdite tako, da na plošči z nastavitvami konzole označite potrditveno polje Ohrani dnevnik in znova osvežite. Videti bi morali zabeležene dogodke namestitve in aktiviranja, skupaj z 'foo', čemur sledi 'Navigation to http: // localhost: 3000 /', kar pomeni, da je bila stran ponovno naložena, nato pa končno sporočilo 'SW enabled'.

07. Sledite dogodku prenosa

Čas je, da dodam še enega poslušalca. Tokrat bomo spremljali prinesi dogodek, ki se sproži vsakič, ko stran naloži vir, na primer datoteko CSS, sliko ali celo odziv API. Odprli bomo predpomnilnik, vrnili odgovor na zahtevo na stran in nato v ozadju predpomnili odgovor. Najprej dodamo poslušalca in osvežimo, da boste lahko videli, kaj se zgodi. V konzoli bi morali videti veliko FetchEvent hlodi.

self.addEventListener('fetch', (event) => { console.log(event); });

Naš način prikazovanja uporablja BrowserSync, ki strani doda svoj skript in pošlje zahteve za spletno vtičnico. Tudi za te boste videli FetchEvents, vendar jih želimo prezreti. Prav tako želimo predpomniti zahteve GET iz lastne domene. Torej, dodajte nekaj stvari, da prezrete neželene zahteve, vključno z izrecnim ignoriranjem / pot indeksa:

self.addEventListener('fetch', (event) => { // Ignore crossdomain requests if (!event.request.url.startsWith(self.location.origin)) { return; } // Ignore non-GET requests if (event.request.method !== 'GET') { return; } // Ignore browser-sync if (event.request.url.indexOf('browser-sync') > -1) { return; } // Prevent index route being cached if (event.request.url === (self.location.origin + '/')) { return; } // Prevent index.html being cached if (event.request.url.endsWith('index.html')) { return; } console.log(event); });

Zdaj bi morali biti dnevniki veliko čistejši in varno je začeti predpomniti.

08. Predpomni sredstva

Zdaj lahko začnemo predpomniti te odgovore. Najprej moramo svojemu predpomnilniku dati ime. Pokličimo svojega v1-sredstva . To vrstico dodajte na vrh datoteke sw.js:

const assetsCacheName = 'v1-assets';

Nato moramo ugrabiti FetchEvents, da lahko nadzorujemo, kaj se vrne na stran. To lahko storimo s pomočjo dogodka responseWith metoda. Ta metoda sprejema Promise, tako da lahko dodamo to kodo in nadomestimo console.log :

// Tell the fetch to respond with this Promise chain event.respondWith( // Open the cache caches.open(assetsCacheName) .then((cache) => { // Make the request to the network return fetch(event.request) .then((response) => { // Cache the response cache.put(event.request, response.clone()); // Return the original response to the page return response; }); }) );

To bo zahtevo posredovalo v omrežje, odgovor shranilo v predpomnilnik, preden bo prvotni odgovor poslal nazaj na stran.

kako stopite in ponovite v ilustratorju

Tu je treba omeniti, da ta pristop odzivov dejansko ne bo predpomnil, dokler uporabnik strani ne naloži drugič. Prvič bo delavec namestil in aktiviral, do takrat pa prinesi poslušalec je pripravljen, vse bo že zahtevano.

Nekajkrat osvežite in preverite predpomnilnik na zavihku DevTools> Application. Razširite drevo Cache Storage v levem stolpcu in videli bi predpomnilnik z vsemi shranjenimi odgovori.

09. Postrezite iz predpomnilnika

Vse je predpomnjeno, vendar v resnici še ne uporabljamo predpomnilnika za vstavljanje datotek. Priklopiva to zdaj. Najprej bomo iskali ujemanje z zahtevo v predpomnilniku in če obstaja, bomo to postregli. Če ne obstaja, bomo uporabili omrežje in nato predpomnili odgovor.

// Tell the fetch to respond with this chain event.respondWith( // Open the cache caches.open(assetsCacheName) .then((cache) => { // Look for matching request in the cache return cache.match(event.request) .then((matched) => { // If a match is found return the cached version first if (matched) { return matched; } // Otherwise continue to the network return fetch(event.request) .then((response) => { // Cache the response cache.put(event.request, response.clone()); // Return the original response to the page return response; }); }); }) );

Datoteko shranite in osvežite. Označite DevTools> zavihek Network in videli bi (iz ServiceWorker), ki je naveden v stolpcu Velikost za vsako statično sredstvo.

Fuj, končali smo. Za tako majhno količino kode je treba veliko razumeti. Videti bi morali, da je osveževanje strani, ko so vsa sredstva v predpomnilniku, precej hitro, vendar na hitro (neznanstveno) preverimo čas nalaganja na dušeni povezavi (zavihek DevTools> Omrežje).

Brez Service Workerja nalaganje prek simuliranega hitrega omrežja 3G traja skoraj 30 sekund, da se vse naloži. Pri Service Workerju z isto dušeno povezavo, ki pa se nalaga iz predpomnilnika, traja slabo sekundo.

Označite polje Brez povezave in ga osvežite, videli pa boste tudi, da se stran naloži brez povezave, čeprav napovednih podatkov iz API-ja ne moremo dobiti. Na 2. strani se bomo vrnili k temu in se naučili, kako tudi predpomniti odziv API-ja.

Naslednja stran: uporabite Service Worker za ponujanje spletnega dostopa

  • 1.
  • dva

Trenutna stran: Stran 1: Hitrejše nalaganje

Naslednja stran Stran 2: Dodajanje dostopa brez povezave