nginx mis en cache index.html forcer le rechargement

Dec 12 2020

Lors d'une migration de serveur, une nouvelle configuration nginx manquait de directives de contrôle de cache. Par conséquent, nous nous sommes retrouvés avec une mise en cache index.htmlqui est très mauvaise pour notre SPA qui n'est plus actualisée si nous déployons un nouveau code. Nous avons besoin que l'index.html ne soit pas mis en cache.

C'était notre (mauvaise) configuration nginx qui était en ligne quelques jours:

server {
  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

Nous avons corrigé notre configuration:

server {
  listen 80;

  root /usr/share/nginx/html;

  location / {
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
    add_header Cache-Control "no-store, no-cache, must-revalidate";
  }

  location ~* \.(js|jpg|jpeg|gif|png|svg|css)$ {
    add_header Cache-Control "max-age=31536000, public";
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

QUESTION

Les clients qui ont visité notre page Web au cours des derniers jours ont mis en cache un ancien index.html. Comment pouvons-nous forcer leurs navigateurs à abandonner leur mise en cache index.html?

Réponses

1 Talkerbox Dec 17 2020 at 16:38

Il n'y a aucun moyen de réinitialiser manuellement le cache du navigateur côté utilisateur (navigateur) tant que le client ne demande pas au serveur pour un nouveau contenu. Dans ce cas, il peut être utile d'accéder à tous les scripts, que votre SPA est téléchargé sans cache. Dans ce cas, vous pouvez modifier ce script et exécuter la page de rechargement forcé (mais soyez prudent - vous avez besoin d'un indicateur pour empêcher le rechargement forcé permanent après chaque chargement de page). Par exemple, si vous avez GTM sur place, cela peut vous aider.

UPD: Je ne suis pas un spécialiste js, mais vous deviez ajouter une balise GTM sur toutes les pages comme ce js-script:

function getCookie(name) {
  let matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

was_reloaded = getCookie('was_reloaded')
alert(was_reloaded)
if (was_reloaded != 'yes') {
        document.cookie = "was_reloaded=yes; path=/; max-age=3600;"
    location.reload();
} }