În lumea de astăzi, conectivitatea ne-a făcut mai mobili ca niciodată, ceea ce (paradoxal) ne face să fim offline uneori: când suntem în modul avion, avem o conexiune defectuoasă, nu mai avem date, suntem la metrou … și așa mai departe.

Un al doilea efect al acestei mobilități este încărcarea lentă a site-urilor web grele: Amazon a constatat că doar 100 de milisecunde de timp suplimentar de încărcare le-au costat 1% din vânzări.

În aceste situații, am dori să avem acces offline la conținutul nostru. De aceea instrumente precum Instapaper și Buzunar exista. Spotify și Netflix vă permit, de asemenea, să descărcați conținut media pentru utilizare offline.

Putem vedea cu ușurință că există o cerere pentru această caracteristică și cum poate beneficia afacerea dvs.

Este timpul ca internetul să devină offline.

Din fericire, nu mai este nevoie să construim aplicații native pentru a atinge acest obiectiv. Putem crea un site web offline cu puterea JavaScript datorită noului lucrătorilor din servicii și API cache Caracteristici.

Ce este un lucrător de service (SW)?

Lucrătorii de servicii sunt cod JavaScript care rulează în fundalul site-ului dvs. web, chiar și atunci când pagina este închisă. Pentru utilizări offline, unul dintre obiectivele lor este stocarea solicitărilor de rețea sau a imaginilor în memoria cache a browserului.

Agenția BETC a realizat un site web demonstrativ numit whentheinternetisdown.com pentru compania franceză de telecomunicații Bouygues. Funcționează doar offline și se simte cam magic. Du-te și încearcă 🙂

Este cache-ul care face magia site-ului: puteți reveni în 3 săptămâni, 1 lună, 1 an, fără conexiune și puteți accesa tot conținutul. – Maxime Huygue, șeful BETC Digital Studio

Ok, este grozav, spune-mi cum să o fac atunci.

Ok, să începem cu câteva condiții prealabile:

  • Pentru a utiliza SW-uri, trebuie să activați https pe site-ul dvs. web.
  • Ar trebui să înțelegeți cum JavaScript promite muncă.
  • SW-urile funcționează în toate browsere moderne cu excepția prietenului nostru IE.
  • Chiar dacă este JavaScript, rulează în contextul lucrători web. Ceea ce înseamnă: nu există DOM și rulează în afara firului principal.
  • Înțelegeți cum funcționează bazele de date.
  • Codul lucrătorului dvs. de servicii trebuie să fie într-un fișier JavaScript separat. Exemplu: service-worker.js

Ciclul de viață al lucrătorilor de servicii

Cum sa faci aplicatia sa functioneze offline cu puterea JavaScript

Pentru a putea funcționa, SW-urile trebuie să fie înregistrate în aplicația dvs., apoi instalate. Ar trebui să verificați dacă SW-urile sunt compatibile cu clientul dvs. înainte de a face acest lucru.

1) Înregistrare

Dacă este disponibil, înregistrați fișierul SW. Acesta va întoarce o promisiune, astfel încât să puteți gestiona erorile. De asemenea, puteți specifica un domeniu de adrese URL în opțiuni de înregistrare.

2) Instalare

Lucrătorii de servicii se bazează pe evenimente. Pe scurt, trebuie să atașați apeluri de apel la evenimente, așa cum ați face cu un element.addEventListener. Primul eveniment pe care trebuie să îl utilizați este evenimentul de instalare. Acesta este un moment bun pentru a vă ascunde toate resursele vitale, cum ar fi Javascript, CSS, HTML, Imagini … Aici este API cache se alătură petrecerii!

Apoi deschideți metoda sau creați un cache legat de un nume dorit. Promisiunea returnată trebuie să fie înfășurată în event.waitUntil (), ceea ce va întârzia instalarea lucrătorului de service până când promisiunea va fi rezolvată. În caz contrar, evenimentul de instalare eșuează și lucrătorul de service va fi eliminat.

Vă rugăm să fiți precauți în ceea ce privește stocarea în cache: spațiul de stocare al utilizatorului dvs. este prețios, așa că nu îl abuzați. De asemenea, fiți atenți: evenimentul de instalare poate fi apelat o singură dată și va trebui să vă actualizați SW-ul pentru a-l modifica.

3) Activare

Acesta este un pic subtil.

După finalizarea instalării, lucrătorul de service nu este încă activ: suntem în starea instalată.

În această stare, așteaptă să preia controlul paginii. Apoi trece la faza următoare a ciclului de viață, care este faza de activare.

Faza de activare este utilă atunci când actualizați un SW. Cel mai frecvent caz este să ștergeți memoria cache a SW instalat anterior.

Vă rugăm să rețineți că, odată instalat cu succes, lucrătorul actualizat va aștepta până când lucrătorul existent controlează zero clienți (clienții se suprapun în timpul unei reîmprospătări).

self.skipWaiting () previne așteptarea, ceea ce înseamnă că lucrătorul de service activează imediat ce a terminat instalarea. Avantajul acestei metode este că puteți primi evenimente de preluare mai rapid.

Nu contează cu adevărat când apelați skipWaiting (), atâta timp cât este în timpul sau înainte de așteptare. Este destul de obișnuit să-l apelați la evenimentul de instalare.

Phew! Să luăm o pauză și să rezumăm ceea ce am văzut:

  • Lucrătorii de servicii sunt bucăți de JavaScript care permit funcții offline, cum ar fi stocarea în cache.
  • Am explorat SW Lifecycle: înregistrare, instalare, activare
  • Am învățat cum să implementăm cazuri obișnuite de utilizare, cum ar fi: stocarea în cache a resurselor și ștergerea cache-urilor cu API-ul Cache.
  • Am văzut că self.skipWaiting și self.clients.claim ne permit să activăm SW-urile mai repede pentru a prinde evenimentele mai repede.

Ok, mișcându-vă chiar de-a lungul …

4) Aduceți

Evenimentul de preluare ne permite să interceptăm solicitările de rețea și să stocăm răspunsuri sau să le personalizăm.

Principalul avantaj al acestui cârlig este de a returna resursele memorate în cache, în loc să efectuați o cerere de apel. Ar trebui să aruncați o privire la Fetch API pentru gestionarea apelurilor dvs. de solicitare.

Nu putem acoperi toate posibilitățile oferite de lucrătorii de servicii într-un singur articol. Totuși, vă încurajez să analizați ce este posibil: Personalizat 404, API de sincronizare în fundal pentru analize offline, Șablonare în partea ServiceWorker…. viitorul pare incitant!

Până acum am văzut ce este un lucrător de service, cum funcționează pe parcursul ciclului său de viață și cele mai frecvente cazuri de utilizare jucându-ne cu Cache și Fetch API. Aceste două API-uri ne oferă un mod cu totul nou de gestionare Resurse adresabile URL în browser. Pentru a completa acest ghid, vedeți cum putem stoca alte tipuri de date, de exemplu, ale unui utilizator JSON din baza de date.

Stocați date personalizate cu IndexedDB

Un ghid general pentru stocarea datelor este că resursele adresabile URL ar trebui să fie stocate cu Cache interfață și alte date ar trebui stocate cu IndexedDB. De exemplu, fișierele HTML, CSS și JS ar trebui stocate în cache, în timp ce datele JSON ar trebui stocate în IndexedDB. Rețineți că aceasta este doar o orientare, nu o regulă fermă. (sursă)

Pe scurt, vom vedea când nu ar trebui să utilizați API-ul cache dar IndexedDB in schimb. Ambele sunt asincrone și accesibile în cadrul lucrătorilor de service, angajaților web și interfața ferestrei . Vestea bună este că este bine sprijinit, chiar și în versiunile recente ale IE.

IndexedDB este o bază de date NoSQL. Datele IndexedDB sunt stocate ca perechi cheie-valoare în magazine de obiecte mai degrabă decât mesele. O singură bază de date poate conține orice număr de depozite de obiecte. Ori de câte ori o valoare este stocată într-un depozit de obiecte, aceasta este asociată cu o cheie. Se pare că:

1612108091 773 Cum sa faci aplicatia sa functioneze offline cu puterea JavaScript

Destul de clasic, nu? Principalul lucru de înțeles este conceptul de cale cheie. Acesta îi spune browserului ce cheie să utilizeze pentru a extrage date din depozitul de obiecte sau index.

În acest exemplu, putem vedea că calea noastră cheie este id-ul proprietății și este definit în linia 10. Apoi returnăm toate articolele din baza de date. Acesta este un caz de utilizare foarte simplu, așa că, dacă doriți să aflați mai multe despre cum funcționează IndexedDB, vă sfătuiesc să citiți acest lucru excelent articol.

Concluzie

Profitarea de internetul offline este minunată pentru experiența utilizatorului, iar unele companii au început să-l pradă. Se bazează în principal pe lucrătorii de servicii, pe scripturile JavaScript care rulează în fundalul site-ului dvs. web.

Am văzut cum să le folosim pe parcursul ciclului de viață al lucrătorilor de servicii și ce puteți face utilizând API-ul Cache and Fetch. Posibilitățile sunt aproape nelimitate. deci fii creativ și nu prea lacom în spațiul de stocare al dispozitivului.

Puteți folosi chiar și baze de date offline: pentru ce este făcut IndexedDB. Aceste funcții offline fac parte, cu siguranță, din viitorul web-ului, așa că joacă bine cu noul tip de site-uri web pe care Google le creează: Programe web progresive.

Lecturi suplimentare: