Comment faire fonctionner votre PWA hors ligne

Vous savez probablement déjà ce qu'est l'application Web progressive, ainsi que ses fonctionnalités révolutionnaires, mais dans un souci d'itération, répétons une fois de plus les fonctionnalités étonnantes et uniques de PWA qui peuvent potentiellement révolutionner l'expérience Web, à savoir sa capacité hors ligne. .

 Lecture recommandée : Qu'est-ce qu'une PWA ?

Contrairement au Web normal dont la visualisation du contenu n'est disponible qu'avec une connexion, Progressive Web App diffère de telle manière qu'une fois que les techniciens de service - un mécanisme intégré responsable de nombreuses fonctionnalités progressives de PWA - ont chargé les fichiers nécessaires, la visualisation hors ligne sera rendue possible et les utilisateurs pourront interagir avec l'application même hors ligne.

Applications Web progressives et disponibilité hors ligne

Pour savoir de quoi il retourne avec les PWA, en particulier leur capacité hors ligne, il est peut-être temps que vous expérimentiez de première main une visualisation hors ligne de notre site Web principal, qui est également un PWA par définition.

Avec les applications Web progressives, l'expérience hors ligne n'est pas différente de votre expérience typique avec une connexion, et c'est la beauté de celle-ci. Il s'agit d'une fonctionnalité particulièrement utile pour les magasins de commerce électronique qui ont besoin d'une expérience de navigation ininterrompue, même en l'absence de connexion.

Remarques : Chaque site PWA a besoin d'une mise en cache initiale des ressources essentielles avant que la visualisation hors ligne ne soit mise à la disposition de l'utilisateur.

Comment faire fonctionner votre PWA hors ligne

Il serait compliqué d'entrer dans tous les détails de la création d'une application Web progressive entièrement fonctionnelle et hors ligne, c'est pourquoi aujourd'hui nous commencerons par les bases. Notre objectif est de créer une application Web progressive barebone qui fonctionne hors ligne .

Conditions préalables

• Un site Web / une application Web simple. Tout ce qui a un index.html , un index.js et un style.css fera l'affaire.

Une fois que vous avez tous les prérequis en ordre, il est temps de faire fonctionner votre PWA barebone hors ligne !

Création d'un agent de service de base

Tout d'abord, vous devez créer votre sw.js qui contient tout le code nécessaire pour un service worker fonctionnel.

 // sw.js
self.addEventListener("fetch", event => {
    console.log("Vous avez récupéré " + event.url);
});

Une fois que vous avez créé votre service worker, vérifions si votre navigateur le supporte et référençons-le dans votre index.js :

 // index.js
if ("serviceWorker" dans le navigateur) {
    navigateur.serviceWorker
        .register("sw.js")
        .then(() => console.log("travailleur de service enregistré!"));
}
// le reste du code de votre page...

Le code ci-dessus devrait être assez simple. Il vérifie si votre navigateur prend en charge les service workers et si oui, renvoie un « service worker enregistré ! ”. En enregistrant les techniciens de service, vous indiquez essentiellement au navigateur d'utiliser le sw.js comme instructions pour vos techniciens de service et, à son tour, associez le(s) nouveau(x) technicien(s) de service à votre site.

Maintenant, revenons au sw.js , ajoutez le code suivant :

 // sw.js
self.addEventListener("fetch", event => {
    console.log("Vous avez récupéré " + event.url);
});

Le code ajoute un EventListener qui est vital pour notre fonctionnement ultérieur. En fait, de nombreux navigateurs, y compris Chrome, n'autoriseront pas l'installation de votre PWA à moins qu'un écouteur de fetch soit enregistré.

Le addEventListener dans le code ci-dessus a deux arguments : le ou les événements à écouter et un rappel qui prend un objet événement. Une fois cet événement en place, votre agent de service commencera à écouter les événements de fetch qui incluent les demandes de code HTML, CSS, JS, audio, images et toute autre demande aux API/autres sites Web de votre site Web.

Mise en cache de vos ressources

Pour que votre PWA soit hors ligne, les techniciens de service paient une part dans la diffusion du contenu , mais vous devez également mettre en cache les ressources de votre page.

Pour mettre en cache les ressources de votre page, vous devez d'abord planifier la taille de votre stockage de cache car il y a une limite.

Limite de stockage du cache

Chaque navigateur a une manière différente de gérer le stockage du cache. Presque tous, cependant, ont une limite à la taille du stockage en cache - cette limite est souvent la raison pour laquelle vous ne voyez pas de sites volumineux et obèses tels qu'Amazon met en cache l'intégralité de leur magasin à l'aide de techniciens de service.

Maintenant, cette limite varie car elle dépend de l'appareil de l'utilisateur final ; mais normalement, il devrait être d'environ 20% de l'espace disque maximum de votre utilisateur. Pour plus d'informations, vous pouvez vous référer à notre tableau ci-dessous ou au guide officiel de Google sur le stockage hors ligne pour les applications Web progressives.

Maintenant que nous avons éliminé cette limite de stockage de cache, passons à la mise en cache de vos ressources .

Pour mettre en cache les ressources de votre page, nous avons besoin d'un tableau global contenant tous les actifs que nous souhaitons stocker :

 /* 
  C'est tout ce que nous voulons enregistrer dans le cache.
  Pour que l'application fonctionne hors ligne/soit installable,
  nous devons enregistrer non seulement les images, mais aussi notre HTML, JS et CSS
  ainsi - tout ce que nous voulons utiliser hors ligne.
*/
const ACTIFS = [
    "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",
    "/hors ligne.html",
    "/"
] ;

C'est là que tout ce que vous souhaitez utiliser hors ligne est stocké. Dans l'exemple ci-dessus, les premières images sont des chemins vers Imgur où une variété de logos de SimiCart est stockée.

Avec cette étape, notre liste de ressources nécessaires pour les utilisations hors ligne est maintenant prête. Mettons-les en cache à l'aide de service workers.

Ajoutez ce top en haut de votre sw.js :

 // sw.js

laissez cache_name = "SimiCart" ; // La chaîne utilisée pour identifier notre cache

self.addEventListener("installer", événement => {
    console.log("installation...");
    event.waitUntil(
        caches
            .open(nom_cache)
            .then(cache => {
                renvoie cache.addAll(assets);
            })
            .catch(err => console.log(err))
    );
});

Essentiellement, ce code demande au navigateur d'attendre (en utilisant l'appel waitUntil() ) notre mise en cache.

En utilisant l'API de cache, en particulier le addAll() , notre tableau d'actifs peut être ajouté sans effort au cache, prêt à être servi par les techniciens de service. Eh bien, à la réflexion, ce n'est pas si prêt. Nous aurions encore besoin de modifier un peu notre gestionnaire d'événements de fetch .

Voici à quoi cela ressemblera maintenant :

 self.addEventListener("fetch", event => {
    si (event.request.url === "https://www.simicart.com/") {
        // ou quelle que soit l'URL de votre application
        event.respondWith(
            récupérer(event.request).catch(err =>
                self.cache.open(nom_cache).then(cache => cache.match("/offline.html"))
            )
        );
    } autre {
        event.respondWith(
            récupérer(event.request).catch(err =>
                caches.match(event.request).then(response => réponse)
            )
        );
    }
});

Il devrait maintenant être clair dans le code ci-dessus que nous essayons de mettre en cache les ressources même lorsque l'application est hors ligne. La logique est la suivante :

• Tout d'abord, l'application tente d'obtenir des ressources en ligne et de répondre avec les ressources mises en cache si cette récupération échoue (à l'aide de respondWith() ).
• Dans le respondWith() , nous appelons fetch(event.request) pour essayer d'extraire des ressources du réseau, et puisque fetch est basé sur la Promise , la Promise rejettera si elle ne parvient pas à se connecter au réseau et à son tour déclenchera le catch() déclaration.
• Dans l'instruction catch() , vous souhaitez appeler vos ressources mises en cache.

Et c'est tout. Votre PWA devrait maintenant pouvoir fonctionner hors ligne ! Assez facile, n'est-ce pas ?

Conclusion

Les choses évoluent assez rapidement dans le monde technologique et plus vous attendez pour convertir en PWA ou intégrer une fonction vitale telle que des capacités hors ligne dans votre PWA, plus le coût d'opportunité pour vous et votre entreprise est élevé.

Pourtant, il existe toujours des fournisseurs de solutions facilement disponibles tels que SimiCart qui peuvent répondre à tous vos besoins. Si, par hasard, vous êtes un marchand en ligne et que vous recherchez une solution Magento PWA parfaite, vous êtes au bon endroit. Nous sommes un fournisseur de solutions connu pour les sites Web de commerce électronique Magento avec plus de 5 ans d'expertise dans les PWA et les applications natives.