Mise en cache

Le stockage du cache est un outil puissant. Ainsi, vos applications sont moins dépendantes des conditions du réseau. Grâce à une bonne utilisation des caches, vous pouvez rendre votre application Web disponible hors connexion et diffuser vos éléments aussi rapidement que possible, quelle que soit l'état du réseau. Comme indiqué dans Éléments et données, vous pouvez choisir la meilleure stratégie pour mettre en cache les composants nécessaires. Pour gérer le cache, votre service worker interagit avec l'API Cache Storage.

Navigateurs pris en charge

  • 43
  • 16
  • 41
  • 11.1

Source

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

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

L'un des avantages de la gestion du 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 être associés à une connexion TLS.

Éléments à mettre en cache

La première question que vous vous posez peut-être à propos de la mise en cache concerne les éléments à mettre en cache. Il n'y a pas de réponse unique à cette question, mais vous pouvez commencer avec toutes les ressources minimales dont vous avez besoin pour afficher l'interface utilisateur.

Ces ressources doivent inclure:

  • Le code HTML de la page principale (start_url de votre application).
  • Feuilles de style CSS nécessaires à 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, requises pour afficher une expérience de base.
  • Polices Web
  • Dans une application multipage, les autres documents HTML que vous souhaitez diffuser rapidement ou hors connexion.

Compatibles hors connexion

Bien que les progressive web apps nécessitent un accès hors connexion, il est essentiel de comprendre que les PWA ne nécessitent pas toutes une expérience hors connexion complète, par exemple les solutions de cloud gaming ou les applications de crypto-actifs. Vous pouvez donc proposer une interface utilisateur de base pour guider vos utilisateurs dans ces situations.

Votre PWA ne doit pas afficher le message d'erreur du navigateur indiquant que le moteur de rendu Web n'a pas pu charger la page. Utilisez plutôt votre service worker pour afficher vos propres messages, évitant ainsi les erreurs génériques et déroutantes du navigateur.

Il existe de nombreuses stratégies de mise en cache différentes que vous pouvez utiliser en fonction des besoins de votre PWA. Il est donc important de concevoir l'utilisation du cache afin d'offrir une expérience rapide et fiable. Par exemple, si tous vos composants Application se téléchargent rapidement, ne prennent pas beaucoup d'espace et n'ont pas besoin d'être mis à jour à chaque demande, nous vous recommandons de mettre en cache tous vos composants. En revanche, si vous disposez de ressources qui doivent être la dernière version, vous pouvez envisager de ne pas mettre ces éléments en cache.

Utiliser l'API

Utilisez l'API Cache Storage pour définir un ensemble de caches au sein de 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 open renvoie une promesse pour l'objet 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 effectue 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 en utilisant une requête HTTP ou une URL comme clé. Nous verrons comment procéder dans le chapitre "Diffusion".

Quand mettre en cache

Dans votre PWA, c'est vous qui décidez quand mettre les fichiers en cache. 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 solution. La mise en cache de ressources inutiles gaspille la bande passante et l'espace de stockage, et peut entraîner la diffusion de ressources obsolètes involontaires par votre application.

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

  • Lors de l'installation du service worker.
  • Après le chargement de la première 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 nombre minimal d'éléments lors de l'installation du service worker. Pour ce faire, vous pouvez utiliser l'interface de stockage du cache dans l'événement install du service worker.

Étant donné que le thread du service worker peut être arrêté à tout moment, vous pouvez demander au navigateur d'attendre la fin de la promesse addAll afin d'augmenter les chances de stocker tous les éléments et de maintenir 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 (traitée ou échouée) avant d'arrêter le processus du service worker. Vous devrez peut-être enchaîner des promesses et renvoyer les appels add() ou addAll() pour qu'un seul résultat parvienne à 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 pouvant appeler await et qui renvoie une promesse à waitUntil() après l'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 depuis votre origine et d'autres domaines, tels que le contenu de CDN tiers. Dans une application multidomaine, l'interaction avec le cache est très semblable aux requêtes de même origine. La requête est exécutée et une copie de la réponse est stockée dans votre cache. Comme pour les autres éléments mis en cache, vous ne pouvez l'utiliser que dans l'origine 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 ni les en-têtes de cette réponse. De plus, les réponses opaques n'exposent pas leur taille réelle dans l'API de stockage, ce qui affecte les quotas. Certains navigateurs proposent des tailles de grande taille, telles que 7 Mo, même si le fichier ne fait que 1 Ko.

Mettre à jour et supprimer des éléments

Vous pouvez modifier des assets à l'aide de cache.put(request, response) et supprimer des assets avec delete(request).

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

Déboguer le stockage du cache

De nombreux navigateurs permettent de déboguer le contenu de l'espace de stockage du cache dans l'onglet "Application" des outils de développement. Vous pouvez alors voir le contenu de chaque cache dans l'origine actuelle. Nous aborderons ces outils plus en détail dans la section Outils et débogage.

Déboguer le contenu de l'espace de stockage du cache dans les outils pour les développeurs Chrome.

Ressources