Cum să vă faceți PWA să funcționeze offline

Probabil că știți ce este deja Progressive Web App, împreună cu caracteristicile sale care schimbă industria, dar, de dragul repetării, să repetăm ​​încă o dată caracteristicile uimitoare, unice PWA, care pot revoluționa experiența web, care este capacitatea sa offline. .

 Lectură recomandată: Ce este un PWA?

Spre deosebire de web-ul obișnuit a cărui vizualizare a conținutului este disponibilă numai cu o conexiune, Progressive Web App diferă în așa fel încât, odată ce lucrătorii de servicii — un mecanism încorporat care este responsabil pentru multe dintre caracteristicile progresive ale PWA — au încărcat fișierele necesare, vizualizarea offline va fi posibil și utilizatorii pot interacționa cu aplicația chiar și atunci când sunt offline.

Aplicații web progresive și disponibilitate offline

Pentru a ști despre ce este toată agitația cu PWA-urile – în special despre capacitatea offline a acestora, poate că este timpul să experimentați direct o vizualizare offline a site-ului nostru principal, care este și un PWA prin definiții.

Cu Progressive Web Apps, întreaga experiență offline nu este diferită de experiența ta obișnuită cu o conexiune - și aceasta este frumusețea ei. Aceasta este o caracteristică utilă în special pentru magazinele de comerț electronic care au nevoie de o experiență de navigare neîntreruptă, chiar și atunci când nu există nicio conexiune.

Note : Fiecare site PWA are nevoie de o memorare inițială a resurselor esențiale înainte ca vizualizarea offline să fie disponibilă utilizatorului.

Cum să vă faceți PWA să funcționeze offline

Ar fi complicat să intri în toate detaliile construirii unei aplicații web progresive complet funcționale și offline, motiv pentru care astăzi am începe cu elementele de bază. Scopul nostru este să facem o aplicație web progresivă care să funcționeze offline .

Cerințe preliminare

• Un site web/aplicație web simplă. Orice cu un index.html , unul index.js și unul style.css va funcționa.

Odată ce aveți toate cerințele prealabile în ordine, este timpul să vă faceți PWA barebone să funcționeze offline!

Crearea unui lucrător de servicii de bază

Mai întâi, ar trebui să creați sw.js -ul dvs. care conține tot codul necesar pentru un lucrător de service funcțional.

 // sw.js
self.addEventListener ("preluare", eveniment => {
    console.log("Ai preluat " + event.url);
});

După ce ați creat lucrătorul dvs. de servicii, să verificăm dacă browserul dvs. îl acceptă și să facem referire la el în index.js :

 // index.js
if ("serviceWorker" în navigator) {
    navigator.serviceWorker
        .register("sw.js")
        .then(() => console.log(„lucrator de service înregistrat!”));
}
// restul codului paginii tale...

Codul de mai sus ar trebui să fie suficient de simplu. Verifică dacă browserul dvs. acceptă lucrătorii de service și, dacă da, returnează un „ lucrător de service înregistrat! ”. Înregistrând lucrătorii de servicii, în esență îi spuneți browserului să folosească sw.js ca instrucțiuni pentru lucrătorii dvs. de service și, la rândul său, asociați noul (noii) lucrători de service cu site-ul dvs.

Acum, înapoi la sw.js , adăugați următorul cod:

 // sw.js
self.addEventListener ("preluare", eveniment => {
    console.log("Ai preluat " + event.url);
});

Codul adaugă un EventListener care este vital pentru operațiunile noastre ulterioare. De fapt, multe browsere, inclusiv Chrome, nu vor permite instalarea PWA decât dacă este înregistrat un ascultător de fetch .

addEventListener din codul de mai sus are două argumente: evenimentul (evenimentele) care trebuie ascultat și un apel invers care preia un obiect eveniment. Odată ce acest eveniment este în vigoare, lucrătorul dvs. de servicii va începe acum să asculte evenimentele de fetch care includ solicitări pentru HTML, CSS, JS, audio, imagini și orice alte solicitări către API-uri/alte site-uri web ale site-ului dvs. web.

Memorarea în cache a resurselor dvs

Pentru ca PWA să fie capabil offline, lucrătorii de servicii plătesc o parte pentru difuzarea conținutului , dar ar trebui, de asemenea, să memorați în cache resursele paginii.

Pentru a stoca în cache resursele paginii dvs., mai întâi trebuie să planificați dimensiunea stocării cache, deoarece există o limită pentru aceasta.

Limită de stocare în cache

Fiecare browser are un mod diferit de a gestiona stocarea cache. Cu toate acestea, aproape toate au o limită a dimensiunii stocării în cache - această limită este adesea motivul pentru care nu vezi site-uri mari și obeze, cum ar fi Amazon, își păstrează în cache întregul magazin folosind lucrători de service.

Acum, această limită variază deoarece depinde de dispozitivul utilizatorului final; dar în mod normal ar trebui să fie în jur de 20% din spațiul maxim pe disc al utilizatorului. Pentru mai multe informații, puteți consulta graficul nostru de mai jos sau ghidul oficial Google privind stocarea offline pentru aplicații web progresive.

Acum că am scos din cale această limită de stocare în cache, să trecem la stocarea în cache a resurselor dvs. .

Pentru a stoca în cache resursele paginii dvs., avem nevoie de o matrice globală care conține toate activele pe care dorim să le stocăm:

 /* 
  Acestea sunt toate lucrurile pe care vrem să le salvăm în cache.
  Pentru ca aplicația să funcționeze offline/să fie instalabilă,
  trebuie să salvăm nu doar imaginile, ci și HTML, JS și CSS
  de asemenea - orice dorim să folosim când suntem offline.
*/
const ACTIVE = [
    „https://i.imgur.com/Kbkqr2n.png”,
    „https://i.imgur.com/lgLaG0x.png”,
    „https://i.imgur.com/0iL8mxP.png”,
    „https://i.imgur.com/KDsdYeS.png”,
    „https://i.imgur.com/mK50fqL.png”,
    „https://i.imgur.com/KYGH2Qa.png”,
    „/style.css”,
    „/index.html”,
    „/offline.html”,
    "/"
];

Aici este stocat tot ceea ce doriți să utilizați offline. În exemplul de mai sus, primele imagini sunt căi către Imgur unde este stocată o varietate de logo-uri SimiCart.

Cu acest pas, lista noastră de resurse necesare pentru utilizări offline este acum gata. Să le punem în cache folosind lucrători de service.

Adăugați acest top în partea de sus a sw.js:

 // sw.js

let cache_name = "SimiCart"; // Șirul folosit pentru a identifica memoria cache

self.addEventListener("instalare", eveniment => {
    console.log("se instalează...");
    event.waitUntil(
        cache-urile
            .open(nume_cache)
            .then(cache => {
                return cache.addAll(active);
            })
            .catch(err => console.log(err))
    );
});

În esență, acest cod indică browserului să aștepte (folosind waitUntil() ) pentru stocarea în cache.

Folosind API-ul cache, în special addAll() , matricea noastră de active poate fi adăugată fără efort în cache, gata să fie servită de lucrătorii de servicii. Ei bine, gândindu-mă bine, nu este atât de gata. Ar mai trebui să modificăm puțin handlerul de evenimente de fetch .

Iată cum va arăta acum:

 self.addEventListener ("preluare", eveniment => {
    dacă (event.request.url === „https://www.simicart.com/”) {
        // sau oricare ar fi adresa URL a aplicației dvs
        event.respondWith(
            fetch(event.request).catch(err =>
                self.cache.open(nume_cache).then(cache => cache.match("/offline.html"))
            )
        );
    } altfel {
        event.respondWith(
            fetch(event.request).catch(err =>
                caches.match(event.request).then (răspuns => răspuns)
            )
        );
    }
});

Acum ar trebui să fie clar în codul de mai sus că încercăm să memorăm resurse chiar și atunci când aplicația este offline. Logica este următoarea:

• În primul rând, aplicația încearcă să obțină resurse online și să răspundă cu resursele din cache dacă această preluare eșuează (folosind respondWith() ).
• În respondWith() , apelăm fetch(event.request) pentru a încerca să preluăm resurse din rețea și, deoarece preluarea se bazează pe Promise , Promise va respinge dacă nu reușește să se conecteze la rețea și, la rândul său, va declanșa catch() declarație.
• În instrucțiunea catch() este locul în care doriți să apelați resursele din cache.

Si asta e. PWA ar trebui să poată lucra acum offline! Destul de ușor, nu-i așa?

Concluzie

Lucrurile se mișcă destul de repede în lumea tehnologică și cu cât aștepți mai mult pentru a te converti la PWA sau pentru a integra o funcție vitală, cum ar fi capabilitățile offline în PWA, cu atât costul de oportunitate este mai mare pentru tine și afacerea ta.

Cu toate acestea, există întotdeauna furnizori de soluții la îndemână, cum ar fi SimiCart, care se pot ocupa de fiecare nevoie. Dacă, întâmplător, ești un comerciant online și cauți o soluție Magento PWA perfectă, ești la locul potrivit. Suntem un furnizor cunoscut de soluții pentru site-urile de comerț electronic Magento cu peste 5 ani de experiență în PWA și aplicații native.