Mise en cache

Le stockage en cache est un outil puissant. Vos applications sont ainsi moins dépendantes de l'état du réseau. En utilisant correctement les caches, vous pouvez rendre votre application Web disponible hors connexion et diffuser vos éléments le plus rapidement possible, quelles que soient les conditions du réseau. Comme indiqué dans la section Éléments et données, vous pouvez choisir la meilleure stratégie de mise en cache des éléments nécessaires. Pour gérer le cache, votre service worker interagit avec l'API Cache Storage.

L'API Cache Storage est disponible dans différents contextes:

• Contexte de la fenêtre (thread principal de votre PWA)
• Service worker.
• Les autres nœuds de calcul que vous utilisez

L'un des avantages de gérer votre cache à l'aide de service workers est que son cycle de vie n'est pas lié à la fenêtre, ce qui signifie que vous ne bloquez pas le thread principal. Sachez que pour utiliser l'API Cache Storage, la plupart de ces contextes doivent se trouver sous une connexion TLS.

Éléments à mettre en cache

La première question que vous vous posez peut-être à propos de la mise en cache est de savoir quoi mettre en cache. Bien qu'il n'y ait pas de réponse unique à cette question, vous pouvez commencer avec toutes les ressources minimales dont vous avez besoin pour afficher l'interface utilisateur.

Ces ressources doivent inclure les éléments suivants:

• Le code HTML de la page principale (start_url de votre application).
• Les feuilles de style CSS requises pour l'interface utilisateur principale
• Images utilisées dans l'interface utilisateur.
• Fichiers JavaScript requis pour afficher l'interface utilisateur.
• Des données, telles qu'un fichier JSON, sont requises pour obtenir une expérience de base.
• Polices Web.
• Dans une application multipage, autres documents HTML que vous souhaitez traiter rapidement ou hors connexion.

Fonctionnement hors connexion

Même si les progressive web apps doivent être accessibles hors connexion, il est essentiel de comprendre que toutes les PWA ne nécessitent pas une expérience hors connexion complète, comme les solutions de cloud gaming ou les applications de crypto-actifs. Par conséquent, vous pouvez tout à fait proposer une interface utilisateur de base pour guider vos utilisateurs dans ces situations.

Votre PWA ne doit pas afficher un message d'erreur de navigateur indiquant que le moteur de rendu Web n'a pas pu charger la page. Utilisez plutôt votre service worker pour afficher votre propre message, afin d'éviter une erreur générique et déroutante du navigateur.

Il existe de nombreuses stratégies de mise en cache différentes en fonction des besoins de votre PWA. C'est pourquoi il est important de concevoir l'utilisation du cache pour offrir une expérience rapide et fiable. Par exemple, si tous vos composants Application se téléchargent rapidement, ne consomment pas beaucoup d'espace et n'ont pas besoin d'être mis à jour à chaque demande, il peut être judicieux de les mettre en cache. En revanche, si vous disposez de ressources qui doivent correspondre à la dernière version, vous pouvez envisager de ne pas les mettre en cache du tout.

Utilisation de l'API

Utilisez l'API Cache Storage pour définir un ensemble de caches dans votre origine, chacun étant identifié par un nom de chaîne que vous pouvez définir. Accédez à l'API via l'objet caches. La méthode open permet de créer ou d'ouvrir un cache déjà créé. La méthode ouverte renvoie une promesse pour l'objet de cache.

caches.open("pwa-assets")
.then(cache => {
  // you can download and store, delete or update resources with cache arguments
});

Télécharger et stocker des éléments

Pour demander au navigateur de télécharger et de stocker les éléments, utilisez les méthodes add ou addAll. La méthode add envoie une requête et stocke une réponse HTTP, et addAll un groupe de réponses HTTP en tant que transaction basée sur un tableau de requêtes ou d'URL.

caches.open("pwa-assets")
.then(cache => {
  cache.add("styles.css"); // it stores only one resource
  cache.addAll(["styles.css", "app.js"]); // it stores two resources
});

L'interface de stockage du cache stocke l'intégralité d'une réponse, y compris tous les en-têtes et le corps. Vous pouvez donc les récupérer ultérieurement à l'aide d'une requête HTTP ou d'une URL comme clé. Pour savoir comment procéder, consultez le chapitre "Diffusion".

Quand mettre en cache

Dans votre PWA, c'est vous qui décidez quand mettre en cache les fichiers. Bien qu'une approche consiste à stocker autant d'éléments que possible lorsque le service worker est installé, ce n'est généralement pas la meilleure approche. La mise en cache de ressources inutiles gaspille la bande passante et l'espace de stockage, et peut amener votre application à diffuser des ressources obsolètes involontairement.

Vous n'avez pas besoin de mettre en cache tous les éléments en même temps. Vous pouvez mettre en cache des éléments plusieurs fois au cours du cycle de vie de votre PWA, par exemple:

• Lors de l'installation du service worker.
• Après le premier chargement de la page
• Lorsque l'utilisateur accède à une section ou à un itinéraire.
• Lorsque le réseau est inactif.

Vous pouvez demander la mise en cache de nouveaux fichiers dans le thread principal ou dans le contexte du service worker.

Mettre en cache des éléments dans un service worker

L'un des scénarios les plus courants consiste à mettre en cache un ensemble minimal d'éléments lorsque le service worker est installé. Pour ce faire, vous pouvez utiliser l'interface de stockage en cache dans l'événement install du service worker.

Étant donné que le thread de service worker peut être arrêté à tout moment, vous pouvez demander au navigateur d'attendre la fin de la promesse addAll pour avoir plus de chances de stocker tous les éléments et d'assurer la cohérence de l'application. L'exemple suivant montre comment procéder en utilisant la méthode waitUntil de l'argument d'événement reçu dans l'écouteur d'événements du service worker.

const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", event => {
   event.waitUntil(
      caches.open("pwa-assets")
      .then(cache => {
         return cache.addAll(urlsToCache);
      });
   );
});

La méthode waitUntil() reçoit une promesse et demande au navigateur d'attendre que la tâche de la promesse soit résolue (réalisée ou échouée) avant d'arrêter le processus de service worker. Vous devrez peut-être enchaîner des promesses et renvoyer les appels add() ou addAll() afin qu'un seul résultat aboutisse à la méthode waitUntil().

Vous pouvez également gérer les promesses à l'aide de la syntaxe async/await. Dans ce cas, vous devez créer une fonction asynchrone qui peut appeler await et qui renvoie une promesse à waitUntil() après son appel, comme dans l'exemple suivant:

const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", (event) => {
   let cacheUrls = async () => {
      const cache = await caches.open("pwa-assets");
      return cache.addAll(urlsToCache);
   };
   event.waitUntil(cacheUrls());
});

Requêtes interdomaines et réponses opaques

Votre PWA peut télécharger et mettre en cache des éléments de votre environnement d'origine et de plusieurs domaines, comme le contenu de CDN tiers. Avec une application multidomaine, l'interaction avec le cache est très semblable aux requêtes d'origine identique. La requête est exécutée et une copie de la réponse est stockée dans le cache. Comme pour les autres éléments mis en cache, ils ne peuvent être utilisés qu'au départ de votre application.

L'élément est stocké en tant que réponse opaque, ce qui signifie que votre code ne peut pas voir ni modifier le contenu ou les en-têtes de cette réponse. De plus, les réponses opaques n'affichent pas leur taille réelle dans l'API Storage, ce qui affecte les quotas. Certains navigateurs affichent de grandes tailles, telles que 7 Mo, même si le fichier ne fait que 1 Ko.

Mettre à jour et supprimer des éléments

Vous pouvez mettre à jour des éléments avec cache.put(request, response) et supprimer des éléments avec delete(request).

Pour en savoir plus, consultez la documentation sur les objets de cache.

Déboguer le stockage du cache

De nombreux navigateurs proposent un moyen de déboguer le contenu du stockage cache depuis l'onglet "Application" des outils de développement. Vous pouvez voir le contenu de chaque cache dans l'origine actuelle. Nous aborderons ces outils plus en détail dans le chapitre "Outils et débogage".

Ressources

• Espace de stockage du cache sur MDN
• API Cache: guide rapide
• Le guide hors connexion