Configurer le comportement de la mise en cache HTTP

Jeff Posnick

Cet atelier de programmation vous explique comment modifier les en-têtes de mise en cache HTTP renvoyés par une Serveur Web basé sur Node.js, exécutant la diffusion Express d'infrastructure. Vous verrez également comment vérifier que le comportement de mise en cache attendu est appliqué, à l'aide du panneau "Network" dans les outils de développement de Chrome.

Se familiariser avec l'exemple de projet

Voici les fichiers clés avec lesquels vous allez travailler dans l'exemple de projet:

• server.js contient le code Node.js qui diffuse le code de votre contenu. Elle utilise Express pour gérer les requêtes HTTP. et ses réponses. En particulier, express.static() permet de diffuser l'ensemble les fichiers locaux dans le répertoire public. Ainsi, serve-static documentation vous sera utile.
• public/index.html correspond au code HTML de l'application Web. Comme la plupart des fichiers HTML, sans inclure d'informations de gestion des versions dans son URL.
• public/app.15261a07.js et public/style.391484cf.css sont le code JavaScript de l'application Web. et CSS. Chacun de ces fichiers contient un hachage dans leurs URL, correspondant à leur contenu. Le index.html est chargé de maintenir pour identifier l'URL avec gestion des versions spécifique à charger.

Configurer les en-têtes de mise en cache pour le code HTML

Lorsque vous répondez aux requêtes pour des URL qui ne contiennent pas d'informations de gestion des versions, assurez-vous veillez à ajouter Cache-Control: no-cache à vos messages de réponse. ainsi que qu'il est recommandé de définir l'un des deux en-têtes de réponse supplémentaires : Last-Modified ou ETag. La index.html entre dans cette catégorie. Vous pouvez décomposer cela en deux étapes.

Tout d'abord, les en-têtes Last-Modified et ETag sont contrôlés par etag et lastModified options de configuration. Ces deux options sont en fait définies par défaut sur true pour toutes des réponses HTTP. Dans cette configuration, vous n'avez donc pas besoin d'activer cette option comportemental. Mais vous pouvez tout de même être explicite dans votre configuration.

Deuxièmement, vous devez pouvoir ajouter l'en-tête Cache-Control: no-cache, mais uniquement pour vos documents HTML (index.html, dans ce cas). Le moyen le plus simple définir cet en-tête de manière conditionnelle consiste à écrire un code setHeaders function, et, dans ce fichier, vérifiez si la requête entrante concerne un document HTML.

• Cliquez sur Remix to Edit (Remixer pour modifier) pour pouvoir modifier le projet.

La configuration de diffusion statique dans server.js commence comme suit:

app.use(express.static('public'));

• Si vous effectuez les modifications décrites ci-dessus, vous devriez obtenir un résultat se présente comme suit:

app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    }
  },
}));

Configurer les en-têtes de mise en cache pour les URL avec gestion des versions

Lorsque vous répondez à des demandes d'URL contenant "fingerprint" ou les informations de gestion des versions et dont le contenu n'est jamais censé changer, ajoutez Cache-Control: max-age=31536000 à vos réponses. Les app.15261a07.js et style.391484cf.css entrent dans cette catégorie.

En s'appuyant sur setHeaders function utilisée à la dernière étape, vous pouvez ajouter une logique supplémentaire pour vérifier pour une URL avec versions gérées et, le cas échéant, ajoutez l'en-tête Cache-Control: max-age=31536000.

La méthode la plus efficace consiste à utiliser expression régulière pour voir si l'élément demandé correspond à un format spécifique savoir dans lesquels tombent les hachages. Dans le cas de cet exemple de projet, il est toujours de huit de l'ensemble de chiffres 0 à 9 et des lettres minuscules a à f (par exemple, hexadécimaux). Le hachage sont toujours séparés par un caractère . de chaque côté.

Une expression régulière qui conforme aux règles générales peut être exprimée sous la forme new RegExp('\\.[0-9a-f]{8}\\.').

• Modifiez la fonction setHeaders pour qu'elle se présente comme suit:

app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    const hashRegExp = new RegExp('\\.[0-9a-f]{8}\\.');

    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    } else if (hashRegExp.test(path)) {
      // If the RegExp matched, then we have a versioned URL.
      res.setHeader('Cache-Control', 'max-age=31536000');
    }
  },
}));

Vérifier le nouveau comportement à l'aide des outils de développement

Une fois les modifications apportées au serveur de fichiers statiques en place, vous pouvez vérifier pour assurez-vous que les en-têtes appropriés sont définis en prévisualisant l'application active avec le panneau DevTools Network ouvert.

• Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur Plein écran

• Personnalisez les colonnes affichées dans le panneau "Network" (Réseau) pour inclure les informations les plus pertinentes, en faisant un clic droit l'en-tête de la colonne:

Ici, soyez attentifs aux colonnes Name, Status, Cache-Control, ETag et Last-Modified.

• Une fois les outils de développement ouverts dans le panneau "Network", actualisez la page.

Une fois la page chargée, vous devriez voir dans le panneau "Network" (Réseau) des entrées qui ressemblent comme suit:

La première ligne correspond au document HTML auquel vous avez accédé. C'est correct diffusé avec Cache-Control: no-cache. État de la réponse HTTP pour cette requête est un 304. Ce que le navigateur savait qu'il ne devait pas utiliser immédiatement le code HTML mis en cache, a envoyé une requête HTTP au serveur Web, à l'aide des méthodes Last-Modified et ETag. pour voir si le code HTML a déjà été mis à jour dans son cache. La réponse HTTP 304 indique que le code HTML n'a pas été mis à jour.

Les deux lignes suivantes concernent les éléments JavaScript et CSS avec gestion des versions. Vous devez les voir diffusées avec Cache-Control: max-age=31536000, et l'état HTTP de chacune est égale à 200. En raison de la configuration utilisée, aucune requête réelle n'est envoyée au Node.js et cliquez sur l'entrée pour afficher des détails supplémentaires, notamment que la réponse vienne "(du cache disque)".

Les valeurs réelles des colonnes "ETag" et "Last-Modified" n'ont pas beaucoup d'importance. La le plus important est de vérifier qu'ils sont définis.

En résumé

Maintenant que vous avez suivi les étapes de cet atelier de programmation, vous savez configurer les en-têtes de réponse HTTP dans un serveur Web basé sur Node.js en utilisant Express, pour une utilisation optimale du cache HTTP. Vous avez également les étapes à suivre pour confirmer que le comportement de mise en cache attendu est utilisé, via le panneau "Network" (Réseau) les outils pour les développeurs Chrome.