nginx en caché index.html forzar la recarga

Dec 12 2020

Durante una migración de servidor, a una nueva configuración de nginx le faltaban las directivas de control de caché. Por lo tanto, terminamos con un caché index.htmlque es muy malo para nuestro SPA que ya no se actualiza si implementamos un nuevo código. Necesitamos que index.html no se almacene en caché.

Esta fue nuestra (mala) configuración de nginx que estuvo en línea algunos días:

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;
  }

}

Arreglamos nuestra configuración:

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;
  }

}

PREGUNTA

Los clientes que han estado en nuestra página web en los últimos días almacenaron en caché un archivo index.html antiguo. ¿Cómo podemos obligar a sus navegadores a eliminar su caché index.html?

Respuestas

1 Talkerbox Dec 17 2020 at 16:38

No hay forma de restablecer manualmente la memoria caché del navegador en el lado del usuario (navegador) mientras el cliente no solicita al servidor contenido nuevo. En este caso puede ser útil el acceso a cualquier script que su SPA se descargue sin caché. En este caso, puede cambiar esta secuencia de comandos y ejecutar la página de recarga forzada (pero tenga cuidado, necesita cualquier marca para evitar la recarga forzada permanente después de cada carga de página). Por ejemplo, si tiene GTM en el sitio, esto puede ayudar.

UPD: No soy un especialista en js, pero necesitabas agregar la etiqueta GTM en todas las páginas como este 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();
} }