Wie Sie Ihre PWA offline arbeiten lassen

Sie wissen wahrscheinlich bereits, was Progressive Web App – zusammen mit ihren branchenverändernden Funktionen – ist, aber lassen Sie uns der Iteration halber noch einmal die erstaunlichen, einzigartigen PWA-Funktionen wiederholen, die das Weberlebnis möglicherweise revolutionieren können, nämlich ihre Offline-Fähigkeit .

 Leseempfehlung: Was ist eine PWA?

Im Gegensatz zum normalen Web, dessen Anzeige von Inhalten nur mit einer Verbindung verfügbar ist, unterscheidet sich Progressive Web App dahingehend, dass, sobald die Servicemitarbeiter – ein integrierter Mechanismus, der für viele der progressiven Funktionen von PWA verantwortlich ist – die erforderlichen Dateien geladen haben, die Offline-Anzeige erfolgt wird ermöglicht und Benutzer können auch offline mit der App interagieren.

Progressive Web Apps und Offline-Verfügbarkeit

Um zu wissen, worum es bei der ganzen Aufregung um PWAs geht – insbesondere um die Offline-Fähigkeit, ist es vielleicht an der Zeit, dass Sie unsere Hauptwebsite, die per Definition auch eine PWA ist, aus erster Hand offline betrachten sollten.

Mit Progressive Web Apps unterscheidet sich die gesamte Offline-Erfahrung nicht von Ihrer typischen Erfahrung mit einer Verbindung – und das ist das Schöne daran. Diese Funktion ist besonders nützlich für E-Commerce-Shops, die ein ununterbrochenes Surferlebnis benötigen, auch wenn keine Verbindung besteht.

Hinweise : Jede PWA-Site benötigt zunächst ein anfängliches Caching wichtiger Ressourcen, bevor dem Benutzer die Offline-Anzeige zur Verfügung gestellt wird.

So stellen Sie sicher, dass Ihre PWA offline funktioniert

Es wäre kompliziert, auf alle Details der Erstellung einer voll funktionsfähigen, offlinefähigen Progressive Web App einzugehen, weshalb wir heute zuerst mit den Grundlagen beginnen. Unser Ziel ist es , eine Barebone-Progressive-Web-App zu erstellen, die offline funktioniert .

Voraussetzungen

• Eine einfache Website/Web-App. Alles mit einer index.html , einer index.js und einer style.css aus.

Sobald Sie alle Voraussetzungen erfüllt haben, ist es an der Zeit, Ihre Barebone-PWA offline zu machen!

Erstellen eines einfachen Servicemitarbeiters

Als Erstes müssen Sie Ihre sw.js erstellen, die den gesamten erforderlichen Code für einen funktionierenden Servicemitarbeiter enthält.

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

Nachdem Sie Ihren Service Worker erstellt haben, prüfen wir, ob Ihr Browser ihn unterstützt, und verweisen Sie in Ihrer index.js :

 // index.js
if ("serviceWorker" im Navigator) {
    navigator.serviceWorker
        .register("sw.js")
        .then(() => console.log("registrierter Servicemitarbeiter!"));
}
// der Rest des Codes Ihrer Seite...

Der obige Code sollte einfach genug sein. Es prüft, ob Ihr Browser Servicemitarbeiter unterstützt und gibt in diesem Fall einen „ registrierten Servicemitarbeiter“ zurück! “. Indem Sie die Servicemitarbeiter registrieren, teilen Sie dem Browser im Wesentlichen mit, dass er die sw.js als Anweisungen für Ihre Servicemitarbeiter verwenden soll, und verknüpfen wiederum die neuen Servicemitarbeiter mit Ihrer Site.

Nun zurück zu sw.js , fügen Sie den folgenden Code hinzu:

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

Der Code fügt einen EventListener hinzu, der für unseren weiteren Betrieb von entscheidender Bedeutung ist. Tatsächlich lassen viele Browser, einschließlich Chrome, die Installation Ihrer PWA nicht zu, es sei denn, es ist ein fetch -Listener registriert.

Der addEventListener im obigen Code hat zwei Argumente: die zu überwachenden Ereignisse und einen Rückruf, der ein Ereignisobjekt annimmt. Sobald dieses Ereignis vorhanden ist, beginnt Ihr Servicemitarbeiter mit der Überwachung von fetch , die Anforderungen für HTML, CSS, JS, Audio, Bilder und alle anderen Anforderungen an APIs/andere Websites Ihrer Website umfassen.

Zwischenspeichern Ihrer Ressourcen

Damit Ihre PWA offlinefähig ist, tragen Servicemitarbeiter einen Teil zur Bereitstellung der Inhalte bei, aber Sie müssen auch die Ressourcen Ihrer Seite zwischenspeichern.

Um die Ressourcen Ihrer Seite zwischenzuspeichern, müssen Sie zunächst die Größe Ihres Cache-Speichers planen, da dieser begrenzt ist.

Cache-Speicherlimit

Jeder Browser hat eine andere Art, mit Cache-Speicherung umzugehen. Fast alle von ihnen haben jedoch eine Begrenzung für die Größe des Cache-Speichers – diese Begrenzung ist oft der Grund, warum Sie große und übergewichtige Websites wie Amazon nicht sehen, die ihren gesamten Shop mithilfe von Servicemitarbeitern zwischenspeichern.

Jetzt variiert diese Grenze, da sie vom Gerät des Endbenutzers abhängt; aber normalerweise sollte es ungefähr 20 % des maximalen Festplattenspeichers Ihres Benutzers sein. Weitere Informationen finden Sie in unserer Tabelle unten oder im offiziellen Google-Leitfaden zum Offline-Speicher für Progressive-Web-Apps.

Jetzt, da wir diese Cache-Speichergrenze aus dem Weg geräumt haben, können wir nun damit fortfahren, Ihre Ressourcen tatsächlich zwischenzuspeichern .

Um die Ressourcen Ihrer Seite zwischenzuspeichern, benötigen wir ein globales Array, das alle Assets enthält, die wir speichern möchten:

 /* 
  Das ist alles, was wir im Cache speichern wollen.
  Damit die App offline funktioniert/installierbar ist,
  Wir müssen nicht nur Bilder speichern, sondern auch unser HTML, JS und CSS
  auch - alles, was wir verwenden möchten, wenn wir offline sind.
*/
const ASSETS = [
    "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",
    "/"
];

Hier wird alles gespeichert, was Sie offline verwenden möchten. Im obigen Beispiel sind die ersten Bilder Pfade zu Imgur, wo eine Vielzahl von SimiCart-Logos gespeichert sind.

Mit diesem Schritt ist unsere Liste der notwendigen Ressourcen für die Offline-Nutzung nun fertig. Lassen Sie uns sie mithilfe von Service Workern zwischenspeichern.

Fügen Sie dieses Top oben in Ihrer sw.js hinzu:

 // sw.js

let cache_name = "SimiCart"; // Der String, der verwendet wird, um unseren Cache zu identifizieren

self.addEventListener("installieren", event => {
    console.log("wird installiert...");
    event.waitUntil(
        Caches
            .open(Cache-Name)
            .then(Cache => {
                cache.addAll(assets) zurückgeben;
            })
            .catch(err => Konsole.log(err))
    );
});

Im Wesentlichen weist dieser Code den Browser an, auf unser Caching zu warten (mithilfe des waitUntil() ).

Durch die Verwendung der Cache-API, insbesondere von addAll() , kann unser Array von Assets mühelos zum Cache hinzugefügt werden, damit sie von den Servicemitarbeitern bedient werden können. Nun, auf den zweiten Gedanken, es ist nicht so fertig. Wir müssten unseren fetch Event-Handler noch ein wenig modifizieren.

So wird es jetzt aussehen:

 self.addEventListener("fetch", event => {
    if (event.request.url === "https://www.simicart.com/") {
        // oder was auch immer die URL Ihrer App ist
        event.respondWith(
            fetch(event.request).catch(err =>
                self.cache.open(Cache_Name).then(Cache => cache.match("/offline.html"))
            )
        );
    } anders {
        event.respondWith(
            fetch(event.request).catch(err =>
                caches.match(event.request).then(response => response)
            )
        );
    }
});

Im obigen Code sollte nun klar sein, dass wir versuchen, Ressourcen zwischenzuspeichern, auch wenn die App offline ist. Die Logik ist wie folgt:

• Zuerst versucht die App, Ressourcen online zu holen und mit den zwischengespeicherten Ressourcen zu antworten, wenn dieser Abruf fehlschlägt (unter Verwendung von respondWith() ).
• Innerhalb von respondWith() rufen wir fetch(event.request) auf, um zu versuchen, Ressourcen aus dem Netzwerk abzurufen, und da fetch auf Promise basiert, wird das Promise abweisen, wenn keine Verbindung zum Netzwerk hergestellt werden kann, und löst wiederum den catch() Erklärung.
• In der catch() Anweisung möchten Sie Ihre zwischengespeicherten Ressourcen aufrufen.

Und das ist es. Ihre PWA sollte jetzt offline arbeiten können! Ziemlich einfach, nicht wahr?

Fazit

In der technologischen Welt entwickeln sich die Dinge ziemlich schnell, und je länger Sie warten, bis Sie auf PWA umstellen oder eine wichtige Funktion wie Offline-Funktionen in Ihre PWA integrieren, desto höher sind die Opportunitätskosten für Sie und Ihr Unternehmen.

Dennoch gibt es immer leicht verfügbare Lösungsanbieter wie SimiCart, die sich um alle Ihre Bedürfnisse kümmern können. Wenn Sie zufällig Online-Händler sind und nach einer rundum perfekten Magento-PWA -Lösung suchen, sind Sie hier genau richtig. Wir sind ein bekannter Lösungsanbieter für Magento eCommerce-Websites mit über 5 Jahren Erfahrung in PWAs und Native Apps.