PWA und Django #Online- und Offline-Ressourcen in einer PWA – Entwicklung progressiver Webanwendungen mit Django

HINWEIS: Erstmals veröffentlicht in: https://andresalvareziglesias.substack.com/p/pwa-and-django-3-online-and-offline

Willkommen zum dritten Eintrag der Progressive Web Application with Django-Reihe. In diesem Kapitel erfahren wir, wie wir Ressourcen für unsere PWA zwischenspeichern, um sie offline und ohne aktive Internetverbindung nutzen zu können.

Implementierung der Offline-Funktionalität

In den vorherigen Kapiteln haben wir eine kleine PWA-Anwendung mit allen erforderlichen Teilen definiert: dem Manifest und dem ServiceWorker. Wir haben gelernt, wie man die PWA registriert und haben eine sehr einfache Schnittstelle mit einigen Bildern entwickelt:

Jetzt lernen wir, wie man Daten im PWA-Cache speichert und wie man auswählt, wo jedes Bild geladen werden soll: aus dem Internet oder aus dem lokalen Cache.

Um eine oder mehrere Ressourcen im PWA-Cache zu speichern, verwenden wir eine Funktion wie diese auf dem ServiceWorker:

const CACHE_NAME = "DJANGO_PWA_TEST"
const MAIN_URL = "https://laboratorio.alvarezperello.com/djangopwa/";

self.addEventListener("install", (event) => {
   console.info("*** PWA event *** install", event);
   event.waitUntil(activateApp());
});

self.addEventListener("activate", (event) => {
   console.info("*** PWA event *** activate", event);
   event.waitUntil(activateApp());
});

async function activateApp() {
   // When a service worker is initially registered, pages won't use it
   // until they next load. The claim() method causes those pages to be
   // controlled immediately.
   console.log('Claiming control...');
   clients.claim().then((ev) => {
       console.log('...claimed!', ev);
   })

   manageCache();
}

self.addEventListener("sync", (event) => {
   console.info("*** PWA event *** sync", event);
   manageCache();
});

async function manageCache() {
   const cache = await caches.open(CACHE_NAME);
   if (!cache) {
       console.error("Error storing resources in cache!");
       return;
   }

   storeResourceInCache(cache, MAIN_URL+"static/demo/img/snake1.jpg");
   //storeResourceInCache(cache, MAIN_URL+"static/demo/img/snake2.png");
   //storeResourceInCache(cache, MAIN_URL+"static/demo/img/snake3.png");
}

async function storeResourceInCache(cache, element) {
   console.log("Storing resource in cache: "+element);
   cache.add(element).then(event => {
       console.info("Resource stored successfully! "+element);
   }).catch(event => {
       console.error("Error storing resource! "+element, event);
   });
}

Wenn wir jetzt unsere PWA ausführen, können wir die Cache-Meldungen in der Entwicklerkonsole lesen:

Registering service worker...
...register completed!
The service worker is active!

serviceworker.js: Claiming control...
serviceworker.js: Resource already in cache! static/demo/img/snake1.jpg

Unser PWA-Cache funktioniert!

Wählen Sie, von wo aus jede Ressource geladen werden soll

Wenn die PWA eine Ressource lädt, ruft sie das Abrufereignis auf, etwa so:

self.addEventListener("fetch", async (event) => {
   console.info("*** PWA event *** fetch", event);

   let url = event.request.url.toString();
   console.info("The PWA is loading a resource from: "+url);
});

Wir haben jetzt die Kontrolle über die Anfrage und können wählen, woher die angeforderte Ressource zurückgegeben werden soll: aus dem Cache oder aus dem Internet.

Hier ist ein Beispiel dafür, wie wir überprüfen, ob eine Ressource zwischengespeichert ist, und sie aus dem Cache zurückgeben. Und wenn es nicht zwischengespeichert ist, fordern Sie es stattdessen aus dem Internet an.

self.addEventListener("fetch", async (event) => {
   let url = event.request.url.toString();
   if (!url.includes("static/demo/img/snake")) {
       return false;
   }

   const cache = await caches.open(CACHE_NAME);
   if (!cache) {
       console.error("Error loading resources from cache!");
       return false;
   }

   let fetchResponsePromise = await cache.match(url).then(async (cachedResponse) => {
       if (cachedResponse && cachedResponse.ok) {
           console.warn("Loading from cache: "+url);
           return cachedResponse;

       } else {
           console.error("Error! the cache does not have this url! "+url);
           console.error(cache.keys());

           remoteFetchResponsePromise = await fetch(event).then(async (networkResponse) => {
               console.warn("Loading from internet: "+url);
               return networkResponse;
           });

           return remoteFetchResponsePromise;
       }
   });

   return (await fetchResponsePromise);
});

Wir können die Entwicklerkonsole lesen, um zu erfahren, von wo jedes Bild geladen wurde, wie folgt:

Im nächsten Kapitel

Wir haben jetzt eine PWA. Jetzt lernen wir, wie man eine installierbare PWA erstellt, die als native Anwendung im Betriebssystem angezeigt wird. Das ist eine der größten Funktionalitäten der PWAs: Wir können sie nutzen, um mit Django „fast native“ Anwendungen zu erstellen.

Wir sehen uns im nächsten Kapitel!

Über die Liste

Neben den Python- und Docker-Beiträgen werde ich auch über andere verwandte Themen schreiben, wie zum Beispiel:

• Softwarearchitektur
• Programmierumgebungen
• Linux-Betriebssystem
• usw.

Wenn Sie eine interessante Technologie, Programmiersprache oder was auch immer gefunden haben, lassen Sie es mich bitte wissen! Ich bin immer offen dafür, etwas Neues zu lernen!

Über den Autor

Ich bin Andrés, ein Full-Stack-Softwareentwickler mit Sitz in Palma, auf einer persönlichen Reise, um meine Programmierfähigkeiten zu verbessern. Ich bin außerdem ein selbstveröffentlichter Fantasy-Autor mit vier veröffentlichten Romanen. Fühlen Sie sich frei, mich alles zu fragen!

Das obige ist der detaillierte Inhalt vonPWA und Django #Online- und Offline-Ressourcen in einer PWA – Entwicklung progressiver Webanwendungen mit Django. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!