Comment faire pour que le navigateur voit les changements CSS et Javascript?

Translate

Les fichiers CSS et Javascript ne changent pas très souvent, je veux donc qu'ils soient mis en cache par le navigateur Web. Mais je souhaite également que le navigateur Web voie les modifications apportées à ces fichiers sans que l'utilisateur n'ait à vider le cache de son navigateur. Vous souhaitez également une solution qui fonctionne bien avec un système de contrôle de version tel que Subversion.


Certaines solutions que j'ai vues impliquent l'ajout d'un numéro de version à la fin du fichier sous la forme d'une chaîne de requête.

Pourrait utiliser le numéro de révision SVN pour automatiser cela pour vous:Numéro de révision SVN de l'affichage ASP.NET

Pouvez-vous préciser comment vous incluez leRévisionvariable d'un autre fichier? C'est dans le fichier HTML que je peux inclure le numéro de révision dans l'URL du fichier CSS ou Javascript.

dans leLivre Subversionil dit à propos de la révision: "Ce mot-clé décrit la dernière révision connue dans laquelle ce fichier a changé dans le référentiel".

Firefox permet également d'appuyer surCTRL+Rpour tout recharger sur une page particulière.

Pour clarifier, je recherche des solutions qui n'obligent pas l'utilisateur à faire quoi que ce soit de sa part.

This question and all comments follow the "Attribution Required."

Toutes les réponses

Translate

J'ai constaté que si vous ajoutez le dernier horodatage modifié du fichier à la fin de l'URL, le navigateur demandera les fichiers lorsqu'il sera modifié. Par exemple en PHP:

function urlmtime($url) {
   $parsed_url = parse_url($url);
   $path = $parsed_url['path'];

   if ($path[0] == "/") {
       $filename = $_SERVER['DOCUMENT_ROOT'] . "/" . $path;
   } else {
       $filename = $path;
   }

   if (!file_exists($filename)) {
       // If not a file then use the current time
       $lastModified = date('YmdHis');
   } else {
       $lastModified = date('YmdHis', filemtime($filename));
   }

   if (strpos($url, '?') === false) {
       $url .= '?ts=' . $lastModified;
   } else {
       $url .= '&ts=' . $lastModified;
   }

   return $url;
}

function include_css($css_url, $media='all') {
   // According to Yahoo, using link allows for progressive 
   // rendering in IE where as @import url($css_url) does not
   echo '<link rel="stylesheet" type="text/css" media="' .
        $media . '" href="' . urlmtime($css_url) . '">'."\n";
}

function include_javascript($javascript_url) {
   echo '<script type="text/javascript" src="' . urlmtime($javascript_url) .
        '"></script>'."\n";
}
La source
Translate

Certaines solutions que j'ai vues impliquent l'ajout d'un numéro de version à la fin du fichier sous la forme d'une chaîne de requête.

<script type="text/javascript" src="funkycode.js?v1">

Vous pouvez utiliser le numéro de révision SVN pour automatiser celapour vousen incluant le motLastChangedRevisiondans votre fichier html après où v1 apparaît ci-dessus. Vous devez également configurer votre référentiel pour ce faire.

J'espère que cela clarifie davantage ma réponse?

Firefox permet également d'appuyer surCTRL+Rpour tout recharger sur une page particulière.

La source
Translate

À mon avis, il est préférable de faire partie du numéro de version du fichier lui-même, par exemplemyscript.1.2.3.js. Vous pouvez configurer votre serveur Web pour qu'il cache ce fichier pour toujours, et ajouter simplement un nouveau fichier js lorsque vous avez une nouvelle version.

La source
Translate

Lorsque vous publiez une nouvelle version de vos bibliothèques CSS ou JS, les événements suivants se produisent:

  1. modifier le nom de fichier pour inclure une chaîne de version unique
  2. modifier les fichiers HTML qui référencent la bibliothèque pour pointer vers le fichier versionné

(c'est généralement une question assez simple pour un script de publication)

Vous pouvez maintenant définir la date d'expiration du CSS / JS sur des années dans le futur. Chaque fois que vous modifiez le contenu, si le code HTML de référence pointe vers un nouvel URI, les navigateurs n'utiliseront plus l'ancienne copie mise en cache.

Cela provoque le comportement de mise en cache souhaité sans rien exiger de l'utilisateur.

La source
Translate

Je me demandais aussi comment faire cela, quand j'ai trouvé la réponse de grom. Merci pour le code.

J'ai eu du mal à comprendre comment le code était censé être utilisé. (Je n'utilise pas de système de contrôle de version.) En résumé, vous incluez l'horodatage (ts) lorsque vous appelez la feuille de style. Vous ne prévoyez pas de changer souvent la feuille de style:

<?php 
    include ('grom_file.php');
    // timestamp on the filename has to be updated manually
    include_css('_stylesheets/style.css?ts=20080912162813', 'all');
?>
La source