PWA et Django #Ressources en ligne et hors ligne dans une PWA - Développer des applications Web progressives avec Django

REMARQUE : publié pour la première fois dans : https://andresalvareziglesias.substack.com/p/pwa-and-django-3-online-and-offline

Bienvenue dans la troisième entrée de la série Progressive Web Application avec Django. Dans ce chapitre, nous apprendrons comment mettre en cache les ressources de notre PWA afin de pouvoir les utiliser hors ligne, sans connexion Internet active.

Implémentation de fonctionnalités hors ligne

Dans les chapitres précédents, nous avons défini une petite application PWA avec toutes les parties requises : le manifeste et le ServiceWorker. Nous avons appris à enregistrer la PWA et développé une interface très simple avec quelques images :

Nous allons maintenant apprendre comment stocker les données dans le cache PWA et comment choisir où charger chaque image : depuis Internet ou depuis le cache local.

Pour stocker une ou plusieurs ressources sur le cache PWA nous utilisons une fonction comme celle-ci sur le 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);
   });
}

Désormais, lorsque nous exécutons notre PWA, nous pouvons lire les messages du cache dans la console développeur :

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

Notre cache PWA fonctionne !

Choisir où charger chaque ressource

Lorsque la PWA charge une ressource, appelle l'événement fetch, comme ceci :

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);
});

Nous contrôlons désormais la demande et pouvons choisir d'où renvoyer la ressource demandée : depuis le cache ou depuis Internet.

Voici un exemple de la façon de vérifier si nous avons une ressource en cache et de la renvoyer du cache. Et, s'il n'est pas mis en cache, demandez-le plutôt sur Internet.

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);
});

Nous pouvons lire la console du développeur pour savoir d'où chaque image a été chargée, comme ceci :

Dans le prochain chapitre

Nous avons désormais une PWA. Nous allons maintenant apprendre à créer une PWA installable, qui s'affichera comme une application native dans le système d'exploitation. C'est l'une des plus grandes fonctionnalités des PWA : on peut les utiliser pour créer des applications "presque natives" en utilisant Django.

À bientôt dans le prochain chapitre !

À propos de la liste

Parmi les articles Python et Docker, j'écrirai également sur d'autres sujets connexes, comme :

• Architecture logicielle
• Environnements de programmation
• Système d'exploitation Linux
• Etc.

Si vous avez trouvé une technologie, un langage de programmation ou autre intéressant, n'hésitez pas à me le faire savoir ! Je suis toujours ouvert à apprendre quelque chose de nouveau !

À propos de l'auteur

Je m'appelle Andrés, un développeur de logiciels full-stack basé à Palma, en quête personnelle d'amélioration de mes compétences en codage. Je suis également un écrivain fantastique auto-publié avec quatre romans publiés à mon actif. N'hésitez pas à me demander n'importe quoi !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!