Kako učiniti da vaša aplikacija radi izvan mreže snagom JavaScripta

U današnjem svijetu povezanost nas je učinila mobilnijima no ikad što nas (paradoksalno) ponekad čini izvan mreže: kada smo u zrakoplovnom načinu, imamo lošu vezu, nemamo više podataka, u podzemnoj smo ... i tako dalje.

Drugi učinak ove mobilnosti je sporo učitavanje teških web stranica: Amazon je otkrio da ih samo 100 milisekundi dodatnog vremena učitavanja košta 1% prodaje.

U tim bismo situacijama željeli imati izvanmrežni pristup svom sadržaju. Zbog toga postoje alati poput Instapaper i Pocket. Spotify i Netflix također vam omogućuju preuzimanje medija za izvanmrežnu upotrebu.

Lako možemo vidjeti da postoji potreba za ovom značajkom i kako ona može koristiti vašem poslovanju.

Vrijeme je da web ode van mreže.

Srećom više ne trebamo izrađivati ​​nativne aplikacije da bismo postigli taj cilj. Izvanmrežno web mjesto možemo stvoriti snagom JavaScripta zahvaljujući novim uslužnim radnicima i značajkama Cache API-ja .

Što je uslužni radnik (SW)?

Uslužni radnici su JavaScript kôd koji se pokreće u pozadini vašeg web mjesta, čak i kad je stranica zatvorena. Za izvanmrežne upotrebe jedan od ciljeva je pohranjivanje mrežnih zahtjeva ili slika u predmemoriju preglednika.

Agencija BETC izradila je demo web stranicu whentheinternetisdown.com za francusku telekom kompaniju Bouygues. Djeluje samo izvan mreže i osjeća se nekako čarobno. Idite isprobati :)

Čarobnost web stranice čini predmemoriranjem: možete se vratiti za 3 tjedna, 1 mjesec, 1 godinu, i dalje bez veze, i pristupiti svim sadržajima. - Maxime Huygue, voditelj BETC Digitalnog studija

Ok, u redu je, reci mi kako to onda učiniti.

Ok, krenimo s nekim preduvjetima:

  • Da biste koristili SW-ove, morate omogućiti https na svojoj web stranici.
  • Trebali biste dostojno razumjeti kako JavaScript obećanja funkcioniraju.
  • SW rade u svim modernim preglednicima, osim u našem prijatelju IE.
  • Čak i ako je JavaScript u pitanju, oni rade u kontekstu web radnika. Što znači: nema DOM-a i izvodi se izvan glavne niti.
  • Razumjeti kako rade baze podataka.
  • Kôd vašeg uslužnog radnika mora biti u zasebnoj JavaScript datoteci. Primjer: service-worker.js

Životni ciklus uslužnih radnika

Da bi mogli raditi, SW-ovi moraju biti registrirani u vašoj aplikaciji, a zatim instalirani. Prije nego što to učinite, trebali biste provjeriti jesu li SW kompatibilni s vašim klijentom.

1) Registracija

Ako je dostupno, registrirajte svoju SW datoteku. Vratit će obećanje, tako da možete riješiti pogreške. Također možete odrediti opseg URL-ova u opcijama registracije.

2) Instalacija

Uslužni radnici temelje se na događajima. Ukratko, događajima morate pridružiti povratne pozive, kao što biste to učinili s elementom.addEventListener. Prvi događaj koji trebate koristiti je događaj instalacije. Ovo je dobro vrijeme za predmemoriranje svih vaših vitalnih resursa kao što su Javascript, CSS, HTML, Slike ... Tu se Cache API pridružuje stranci!

Zatim otvorite metodu ili izradite predmemoriju povezanu sa željenim imenom. Vraćeno obećanje treba umotati u event.waitUntil (), što će odgoditi instalaciju uslužnog radnika dok se obećanje ne riješi. Inače, događaj instalacije ne uspije i uslužni radnik će biti odbačen.

Budite oprezni s predmemoriranjem: pohrana vašeg korisnika dragocjena je, zato je nemojte zloupotrijebiti. Također, budite oprezni: događaj instalacije može se pozvati samo jednom i morat ćete ažurirati svoj SW da biste ga izmijenili.

3) Aktivacija

Ovaj je pomalo suptilan.

Po završetku instalacije uslužni djelatnik još nije aktivan: u instaliranom smo stanju.

U ovom stanju, čeka se da preuzme kontrolu nad stranicom. Zatim se prelazi na sljedeću fazu životnog ciklusa, a to je faza aktivacije.

Faza aktivacije je korisna kada ažurirate SW. Najčešći je slučaj brisanje predmemorije prethodno instaliranog SW-a.

Imajte na umu da će, nakon uspješno instalirane, ažurirani radnik pričekati dok postojeći radnik ne kontrolira nula klijenata (klijenti se preklapaju tijekom osvježavanja).

self.skipWaiting () sprječava čekanje, što znači da se serviser aktivira čim završi s instalacijom. Prednost ove metode je što brže možete primati događaje dohvaćanja.

Zapravo nije važno kada zovete skipWaiting (), sve dok je to tijekom ili prije čekanja. Prilično je često nazvati ga u instalacijskom događaju.

Fuj! Napravimo pauzu i sažeti ono što smo vidjeli:

  • Uslužni radnici su dijelovi JavaScripta koji omogućuju izvanmrežne značajke poput predmemoriranja.
  • Istražili smo SW životni ciklus: registracija, instalacija, aktivacija
  • Naučili smo kako implementirati slučajeve uobičajene upotrebe kao što su: predmemoriranje resursa i brisanje predmemorije pomoću Cache API-ja.
  • Vidjeli smo da nam self.skipWaiting i self.clients.claim omogućuju brže aktiviranje SW-a kako bismo brže uhvatili događaje.

Ok, krećemo se desno…

4) Dohvati

Događaj nam omogućuje presretanje mrežnih zahtjeva i spremanje odgovora ili njihovo prilagođavanje.

Glavna prednost ove udice je vraćanje predmemoriranih resursa umjesto pozivanja zahtjeva. Trebali biste pogledati Fetch API za rukovanje pozivima zahtjeva.

U jednom članku ne možemo pokriti sve mogućnosti koje pružaju uslužni radnici. Ipak, potičem vas da istražite što je moguće: Custom 404, API za sinkronizaciju u pozadini za izvanmrežnu analitiku, predlošci na strani ServiceWorker-a ... budućnost izgleda uzbudljivo!

Do sada smo vidjeli što je uslužni radnik, kako to funkcionira kroz svoj životni ciklus i najčešće slučajeve upotrebe igrajući se s Cache i Fetch API. Ta dva API-ja pružaju nam potpuno novi način upravljanja resursima s URL adresiranjem u pregledniku. Da biste dovršili ovaj vodič, pogledajte kako možemo pohraniti druge vrste podataka, na primjer korisnikov JSON iz vaše baze podataka.

Pohranite prilagođene podatke s IndexedDB

Općenita smjernica za pohranu podataka jest da se resursi koji se mogu adresirati URL-om trebaju pohraniti s Cache sučeljem, a ostali podaci trebaju se pohraniti s IndexedDB. Na primjer, HTML, CSS i JS datoteke trebaju se pohraniti u predmemoriju, dok se JSON podaci trebaju pohraniti u IndexedDB. Imajte na umu da je ovo samo smjernica, a ne čvrsto pravilo. (izvor)

Ukratko, vidjet ćemo kada ne biste trebali koristiti API predmemorije, već IndexedDB. Obje su asinkrone i dostupne uslužnim radnicima, web radnicima i sučelju prozora. Dobra vijest je da je dobro podržan, čak i u novijim verzijama IE-a.

IndexedDB je NoSQL baza podataka. Podaci IndexedDB pohranjuju se kao parovi ključ / vrijednost u spremištima objekata, a ne kao tablice. Jedna baza podataka može sadržavati bilo koji broj spremišta objekata. Kad god se vrijednost pohrani u spremište predmeta, ona je povezana s ključem. Izgleda ovako:

Prilično klasično, zar ne? Glavna stvar koju treba razumjeti je koncept ključnog puta. Pregledniku govori koji će ključ koristiti za izdvajanje podataka iz spremišta ili indeksa predmeta.

U ovom primjeru možemo vidjeti da je naša ključna staza svojstvo id, a definirano je u retku 10. Zatim vraćamo sve stavke iz baze podataka. Ovo je vrlo osnovni slučaj upotrebe, pa ako želite saznati više o tome kako IndexedDB djeluje, savjetujem vam da pročitate ovaj izvrstan članak.

Zaključak

Iskorištavanje izvanmrežnog weba izvrsno je za korisničko iskustvo, a neke su tvrtke počele plijeniti po njemu. Uglavnom se oslanja na uslužne radnike, JavaScript skripte koje rade u pozadini vašeg web mjesta.

Vidjeli smo kako ih koristiti kroz životni ciklus uslužnog radnika i što možete učiniti pomoću API-ja Cache i Fetch. Mogućnosti su gotovo neograničene. zato budite kreativni i ne previše pohlepni u spremištu uređaja.

Baze podataka možete čak koristiti i izvan mreže: za što je stvoreno IndexedDB. Te izvanmrežne mogućnosti zasigurno su dio budućnosti weba, tako da se dobro poklapa s novom vrstom web stranica koje Google stvara: Progresivne web aplikacije.

Daljnje čitanje:

  • Izvanmrežna kuharica: //developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
  • PWA i offline: //developers.google.com/web/ilt/pwa/lab-offline-quickstart
  • Laboratorij: Keširanje datoteka s uslužnim radnikom: //developers.google.com/web/ilt/pwa/lab-caching-files-with-service-worker
  • Životni ciklus uslužnog radnika: //developers.google.com/web/fundamentals/primers/service-workers/lifecycle
  • Demistifikacija životnog ciklusa uslužnog radnika: //scotch.io/tutorials/demystifying-the-service-worker-lifecycle
  • Brže aktivirajte uslužne radnike: //davidwalsh.name/service-worker-claim
  • Podaci uživo u uslužnom djelatniku: //developers.google.com/web/ilt/pwa/live-data-in-the-service-worker
  • IndexedDBOsnovni pojmovi: //developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
  • Početak rada s trajnom izvanmrežnom pohranom s IndexedDB: //itnext.io/getting-started-with-persistent-offline-storage-with-indexeddb-1af66727246c