javascript - recargar - ¿Mi página está cargada desde el caché del navegador?

no cache javascript

Question

Tengo una insignia de "elementos nuevos" en una página que deseo actualizar de inmediato cuando la página se carga desde la memoria caché (es decir, al presionar "Atrás" o "Adelante" para volver a esta página). Cuál es la mejor manera de lograr esto?

La configuración es bastante simple. El diseño de la aplicación busca nuevos elementos cada 8 segundos y actualiza la insignia + lista de elementos en consecuencia.

$(function() {
    setInterval( App.pollForNewItems, 8000 );
});

Cuando alguien navega fuera de esta página para mirar los detalles de un artículo, pueden pasar muchas cosas. Las cosas son "nuevas" hasta que cualquier usuario las haya visto, y la aplicación probablemente tendrá varios usuarios usándola simultáneamente (el tipo de flujo de trabajo utilizado para un centro de llamadas o tickets de soporte).

Para asegurarme de que las insignias estén siempre actualizadas, tengo:

$(window).bind(''focus load'', function ( event ) {
    App.pollForNewItems();
});

..Y aunque esto funciona, la búsqueda de nuevos elementos en ''carga'' solo es útil cuando la página se carga desde la memoria caché. ¿Existe una manera confiable de navegador cruzado para saber si una página se está cargando desde el caché?

Answer 1

Personalmente, establecería el atributo de datos que contiene la identificación del elemento para cada elemento.

Es decir

<ul>
  <li data-item-id="123">Some item.</li>
  <li data-item-id="122">Some other item.</li>
  <li data-item-id="121">Another one..</li>
</ul>

Su función App.pollForNewItems tomaría el atributo data-item-id del primer elemento (si el más nuevo es el primero) y lo enviará al servidor con su solicitud original.

El servidor solo devolverá los elementos WHERE id > ... que luego podrá anteponer a la lista.

Todavía estoy confundido sobre por qué quieres saber si el navegador tiene una versión en caché de la página.

Además, ¿hay alguna razón para vincular la load lugar de estar ready ?

• cristiano

Answer 2

Puede solicitar al navegador web que no guarde en caché la página. Pruebe estos encabezados HTTP:

Cache-control: no-cache
Cache-control: no-store
Pragma: no-cache
Expires: 0

Particularmente, Cache-control: no-store es interesante porque le dice al navegador que no almacene la página en la memoria para evitar que se cargue una página obsoleta al presionar el botón Atrás / Adelante.

Si lo hace en su lugar, no tiene que sondear los datos en la carga de la página.

Answer 3

Una solución parcial hacky es tener una var con la hora actual establecida en el servidor, y establecer una var con la hora actual del cliente en la parte superior de la página. Si difieren en más de un cierto umbral (1 minuto?), Entonces podría suponer que es una carga de página en caché.

Ejemplo JS (usando la sintaxis de ASP.Net para el lado del servidor):

var serverTime = new Date(''<%= DateTime.Now.ToUniversalTime().ToString() %>'');
var pageStartTime = Date.UTC(new Date());
var isCached = serverTime < pageStartTime &&
               pageStartTime.getTime() - serverTime.getTime() > 60000;

Alternativamente, al usar cookies en el lado del cliente (suponiendo que las cookies estén habilitadas), puede buscar una cookie con una clave única para la versión actual de la página. Si no existe ninguno, usted escribe una cookie para ello, y en cualquier otro acceso a la página, la existencia de la cookie le muestra que se está cargando desde el caché.

Por ejemplo (supone que algunas funciones de ayuda de cookies están disponibles)

var uniqueKey = ''<%= SomeUniqueValueGenerator() %>'';
var currentCookie = getCookie(uniqueKey);
var isCached = currentCookie !== null;
setCookie(uniqueKey); //cookies should be set to expire 
                      //in some reasonable timeframe

Answer 4

Actualmente, el tiempo de navegación está en la mayoría de los navegadores (es decir, 9 +) http://www.w3.org/TR/navigation-timing/#sec-navigation-info-interface

 if (!!window.performance && window.performance.navigation.type === 2) {
   // page has been hit using back or forward buttons
 } else {
   // regular page hit
 }

Answer 5

buena respuesta: https://.com/a/9870920/466363

También puede usar el Tiempo de navegación para medir la latencia de la red con gran detalle.

Aquí hay un buen artículo: http://www.html5rocks.com/en/tutorials/webperformance/basics/

Si la diferencia de tiempo entre fetchStart y responseStart es muy baja, la página se cargó desde la memoria caché, por ejemplo.

por stewe

Answer 6

intenta seguir el script en tu archivo js.

if(!!window.performance && window.performance.navigation.type == 2)
{
    window.location.reload();
}