Come far funzionare la tua PWA offline

Probabilmente sai già cos'è l'app Web progressiva, insieme alle sue funzionalità che cambiano il settore, ma per motivi di iterazione, ripetiamo ancora una volta le straordinarie funzionalità PWA uniche che possono potenzialmente rivoluzionare l'esperienza web, ovvero la sua capacità offline .

 Letture consigliate: Cos'è una PWA?

A differenza del normale Web la cui visualizzazione dei contenuti è disponibile solo con una connessione, Progressive Web App differisce in modo tale che una volta che gli operatori del servizio, un meccanismo integrato responsabile di molte delle funzionalità progressive di PWA, hanno caricato i file necessari, la visualizzazione offline sarà reso possibile e gli utenti potranno interagire con l'app anche offline.

App Web progressive e disponibilità offline

Per sapere di cosa si tratta tutto questo trambusto con le PWA, in particolare la loro capacità offline, forse è il momento di provare in prima persona una visualizzazione offline del nostro sito Web principale, che è anche una PWA per definizione.

Con Progressive Web Apps, l'intera esperienza offline non è diversa dalla tipica esperienza con una connessione, ed è proprio questo il bello. Questa è una funzionalità particolarmente utile per i negozi eCommerce che necessitano di un'esperienza di navigazione ininterrotta, anche quando non è presente alcuna connessione.

Note : ogni sito PWA necessita di una memorizzazione nella cache iniziale delle risorse essenziali prima che la visualizzazione offline sia resa disponibile all'utente.

Come far funzionare la tua PWA offline

Sarebbe complicato entrare in tutti i dettagli della creazione di un'app Web progressiva completamente funzionale e offline, motivo per cui oggi inizieremmo prima con le basi. Il nostro obiettivo è creare un'app Web progressiva barebone che funzioni offline .

Prerequisiti

• Un semplice sito Web/app Web. Va bene qualsiasi cosa con un index.html , un index.js e uno style.css .

Una volta che hai tutti i prerequisiti in ordine, è il momento di far funzionare offline la tua PWA barebone!

Creazione di un lavoratore dei servizi di base

Per prima cosa, dovresti creare il tuo sw.js che contiene tutto il codice necessario per un lavoratore del servizio funzionale.

 // sw.js
self.addEventListener("fetch", event => {
    console.log("Hai recuperato " + event.url);
});

Dopo aver creato il tuo operatore di servizio, controlliamo se il tuo browser lo supporta e facciamo riferimento ad esso nel tuo index.js :

 // index.js
if ("serviceWorker" nel navigatore) {
    navigator.serviceWorker
        .register("sw.js")
        .then(() => console.log("addetto al servizio registrato!"));
}
// il resto del codice della tua pagina...

Il codice sopra dovrebbe essere abbastanza semplice. Verifica se il tuo browser supporta i lavoratori del servizio e, in tal caso, restituisce un " lavoratore del servizio registrato! ”. Registrando i lavoratori del servizio, stai essenzialmente dicendo al browser di utilizzare sw.js come istruzioni per i tuoi operatori del servizio e, a sua volta, associa i nuovi lavoratori del servizio al tuo sito.

Ora, tornando a sw.js , aggiungi il seguente codice:

 // sw.js
self.addEventListener("fetch", event => {
    console.log("Hai recuperato " + event.url);
});

Il codice aggiunge un EventListener che è vitale per la nostra ulteriore operazione. In effetti, molti browser, incluso Chrome, non consentiranno l'installazione della tua PWA a meno che non sia registrato un ascoltatore di fetch .

addEventListener nel codice precedente ha due argomenti: gli eventi da ascoltare e un callback che accetta un oggetto evento. Una volta che questo evento è attivo, il tuo addetto ai servizi inizierà ora ad ascoltare gli eventi di fetch che includono richieste per HTML, CSS, JS, audio, immagini e qualsiasi altra richiesta ad API/altri siti web del tuo sito web.

Memorizzazione nella cache delle tue risorse

Affinché la tua PWA sia in grado di supportare offline, gli operatori dei servizi contribuiscono a fornire il contenuto , ma dovresti anche memorizzare nella cache anche le risorse della tua pagina.

Per memorizzare nella cache le risorse della tua pagina, devi prima pianificare la dimensione del tuo spazio di archiviazione della cache poiché esiste un limite.

Limite di archiviazione della cache

Ogni browser ha un modo diverso di gestire l'archiviazione della cache. Quasi tutti, tuttavia, hanno un limite alle dimensioni di Cache Storage : questo limite è spesso il motivo per cui non vedi siti grandi e obesi come Amazon che memorizzano nella cache l'intero negozio utilizzando gli addetti ai servizi.

Ora, questo limite varia in quanto dipende dal dispositivo dell'utente finale; ma normalmente dovrebbe essere circa il 20% dello spazio massimo su disco dell'utente. Per ulteriori informazioni, puoi fare riferimento alla nostra tabella di seguito o alla guida ufficiale di Google sull'archiviazione offline per le app Web progressive.

Ora che abbiamo eliminato questo limite di Cache Storage, passiamo a memorizzare effettivamente nella cache le tue risorse .

Per memorizzare nella cache le risorse della tua pagina, abbiamo bisogno di un array globale che contenga tutte le risorse che vogliamo archiviare:

 /* 
  Questa è tutta la roba che vogliamo salvare nella cache.
  Affinché l'app funzioni offline/sia installabile,
  dobbiamo salvare non solo le immagini, ma anche il nostro HTML, JS e CSS
  anche - tutto ciò che vogliamo usare quando siamo offline.
*/
const ATTIVO = [
    "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",
    "/stile.css",
    "/indice.html",
    "/offline.html",
    "/"
];

Qui è dove viene archiviato tutto ciò che desideri utilizzare offline. Nell'esempio sopra, le prime immagini sono percorsi di Imgur in cui è memorizzata una varietà di loghi di SimiCart.

Con questo passaggio, il nostro elenco di risorse necessarie per gli usi offline è ora pronto. Mettiamoli nella cache usando i service worker.

Aggiungi questo top nella parte superiore del tuo sw.js:

 // sw.js

let cache_name = "SimiCart"; // La stringa utilizzata per identificare la nostra cache

self.addEventListener("install", event => {
    console.log("installazione...");
    event.waitUntil(
        cache
            .open(nome_cache)
            .then(cache => {
                restituire cache.addAll(asset);
            })
            .catch(err => console.log(err))
    );
});

In sostanza, questo codice indica al browser di attendere (usando la chiamata waitUntil() ) per la nostra memorizzazione nella cache.

Utilizzando l'API della cache, in particolare addAll() , il nostro array di risorse può essere aggiunto facilmente alla cache, pronto per essere servito dai lavoratori del servizio. Bene, ripensandoci, non è così pronto. Avremmo ancora bisogno di modificare un po' il nostro gestore di eventi di fetch .

Ecco come apparirà ora:

 self.addEventListener("fetch", event => {
    se (event.request.url === "https://www.simicart.com/") {
        // o qualunque sia l'URL della tua app
        event.respondWith(
            fetch(event.request).catch(err =>
                self.cache.open(cache_name).then(cache => cache.match("/offline.html"))
            )
        );
    } altro {
        event.respondWith(
            fetch(event.request).catch(err =>
                caches.match(event.request).then(response => risposta)
            )
        );
    }
});

Ora dovrebbe essere chiaro nel codice sopra che stiamo tentando di memorizzare nella cache le risorse anche quando l'app è offline. La logica è la seguente:

• Innanzitutto, l'app tenta di ottenere risorse online e rispondere con le risorse memorizzate nella cache se il recupero non riesce (usando respondWith() ).
• All'interno di respondWith() , chiamiamo fetch(event.request) per provare a recuperare risorse dalla rete e, poiché fetch è basato su Promise , Promise rifiuterà se non riesce a connettersi alla rete e, a sua volta, attiverà catch() dichiarazione.
• catch() è dove vorresti chiamare le tue risorse memorizzate nella cache.

E questo è tutto. La tua PWA dovrebbe ora essere in grado di funzionare offline! Abbastanza facile, vero?

Conclusione

Le cose si stanno muovendo abbastanza velocemente nel mondo tecnologico e più a lungo aspetti per convertirti alla PWA o integrare una funzione vitale come le funzionalità offline nella tua PWA, maggiore sarà il costo dell'opportunità per te e la tua azienda.

Tuttavia, ci sono sempre fornitori di soluzioni prontamente disponibili come SimiCart che possono prendersi cura di ogni tua esigenza. Se, per caso, sei un commerciante online e stai cercando una soluzione Magento PWA perfetta a 360 gradi, sei nel posto giusto. Siamo un noto fornitore di soluzioni per siti Web di eCommerce Magento con oltre 5 anni di esperienza in PWA e app native.