Cómo invalidar correctamente un manifiesto de caché HTML5 para aplicaciones en línea / fuera de línea de la tela?

https://stackoverflow.com/questions/1715568

19-09-2019
|

Pregunta

Actualmente estoy usando un manifiesto de caché (como se describe aquí ). Esto hace de manera efectiva los recursos necesarios para ejecutar la aplicación está disponible cuando el usuario está en línea.

Por desgracia, funciona demasiado bien.

Una vez cargado el manifiesto de la caché, Firefox 3.5 + cachés de todos los recursos de referencia de forma explícita en el manifiesto de caché. Sin embargo, si un archivo en el servidor se actualiza y el usuario intenta la página mientras está en línea (incluida la propia caché-manifiesto)-refrescante vigor, Firefox absolutamente niegan a buscar nada. La aplicación permanece completamente fija en el último momento se almacena en caché. Preguntas:

Quiero Firefox para efectivamente sólo dependen de los recursos almacenados en caché cuando la conexión de red falla. He intentado usar el bloque de EMERGENCIA, pero fue en vano. ¿Es esto posible?
Si # 1 no es posible, es posible que el usuario pueda forzar-actualizar una página y omitirá este caché (ctrl-F5 no lo hace, y tampoco lo hace la limpieza de la caché del navegador, sorprendentemente) por debajo de la limpieza de su vida privada ¿datos? Por otra parte, ¿Admite el mecanismo de cabeceras de caducidad de caché-manifiesto y es su comportamiento con respecto a esta documentado en ninguna parte?

Solución

Creo que tengo esto muy bien: si hay un error en uno de caché-manifiesto (por ejemplo, un archivo de referencia no existe), a continuación, Firefox completamente dejará de procesar todo lo relacionado applicationCache. Significado, no va a actualizar nada en la memoria caché, incluyendo su caché caché-manifiesto.

Para descubrir que se trataba el tema, I prestado algo de código de Mozilla y dejó caer esto en una nueva (no en caché) archivo HTML en mi solicitud. El mensaje final que inició la sesión dijo que podría haber un problema en mi caché-manifiesto, y por supuesto no había (un archivo que falta).


// Convenience array of status values
var cacheStatusValues = [];
 cacheStatusValues[0] = 'uncached';
 cacheStatusValues[1] = 'idle';
 cacheStatusValues[2] = 'checking';
 cacheStatusValues[3] = 'downloading';
 cacheStatusValues[4] = 'updateready';
 cacheStatusValues[5] = 'obsolete';

 // Listeners for all possible events
 var cache = window.applicationCache;
 cache.addEventListener('cached', logEvent, false);
 cache.addEventListener('checking', logEvent, false);
 cache.addEventListener('downloading', logEvent, false);
 cache.addEventListener('error', logEvent, false);
 cache.addEventListener('noupdate', logEvent, false);
 cache.addEventListener('obsolete', logEvent, false);
 cache.addEventListener('progress', logEvent, false);
 cache.addEventListener('updateready', logEvent, false);

 // Log every event to the console
 function logEvent(e) {
     var online, status, type, message;
     online = (isOnline()) ? 'yes' : 'no';
     status = cacheStatusValues[cache.status];
     type = e.type;
     message = 'online: ' + online;
     message+= ', event: ' + type;
     message+= ', status: ' + status;
     if (type == 'error' && navigator.onLine) {
         message+= ' There was an unknown error, check your Cache Manifest.';
     }
     log('
'+message);
 }

 function log(s) {
    alert(s);
 }

 function isOnline() {
     return navigator.onLine;
 }

 if (!$('html').attr('manifest')) {
    log('No Cache Manifest listed on the  tag.')
 }

 // Swap in newly download files when update is ready
 cache.addEventListener('updateready', function(e){
         // Don't perform "swap" if this is the first cache
         if (cacheStatusValues[cache.status] != 'idle') {
             cache.swapCache();
             log('Swapped/updated the Cache Manifest.');
         }
     }
 , false);

 // These two functions check for updates to the manifest file
 function checkForUpdates(){
     cache.update();
 }
 function autoCheckForUpdates(){
     setInterval(function(){cache.update()}, 10000);
 }

 return {
     isOnline: isOnline,
     checkForUpdates: checkForUpdates,
     autoCheckForUpdates: autoCheckForUpdates
 }

Este fue sin duda útil, pero definitivamente debe solicitar una función de Mozilla que imprime malformados cache-manifiesta al menos en la Consola de errores. No debe requerir un código personalizado para unir a estos eventos para diagnosticar un problema tan trivial como un archivo renombrado.

Otros consejos

He utilizado el código de HTML5 Rocks: Actualizar el caché :

window.addEventListener('load', function(e) {
  if (window.applicationCache) {
    window.applicationCache.addEventListener('updateready', function(e) {
        if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
          // Browser downloaded a new app cache.
          // Swap it in and reload the page to get the new hotness.
          window.applicationCache.swapCache();
          if (confirm('A new version of this site is available. Load it?')) {
            window.location.reload();
          }
        } else {
          // Manifest didn't changed. Nothing new to server.
        }
    }, false);
  }
}, false);

exención de responsabilidad: mi experiencia con manifiestos y caché es todo Safari y FF pueden manejar algunas cosas de manera diferente

Tiene usted razón. Si hay algún archivo que figuran en el manifiesto que no se pueden encontrar, no se producirá ningún almacenamiento en caché.
Incluso si usted está en línea, el navegador comprobará sólo el archivo de manifiesto. Mientras se espera el archivo de manifiesto, que continuará a cargar el sitio de la caché - de esa manera que no retrase la representación -. Pero significa que no hay cambios en la primera carga
La próxima vez que el sitio se carga, si el manifiesto ha cambiado en la carga anterior, se cargarán los nuevos archivos.

No es siempre necesario para recargar dos veces para ver los cambios. De hecho, a veces he tenido que cargar 3 veces para ver la actualización. Ni idea de por qué.

Cuando se depura, genero mi archivo de manifiesto sobre la marcha con php, por lo que no hay posibilidad de un error tipográfico en un nombre de archivo. También genero el número de versión al azar cada vez para forzar una actualización, pero todavía tienen una aplicación web en línea para la prueba.

Una vez completado, el archivo PHP puede simplemente eco de los datos del manifiesto guardados con un número de versión constante y siempre se utiliza la memoria caché.

Sólo algunas cosas que he aprendido mientras juega con manifiesto y caché recientemente. Funciona muy bien, pero puede ser confuso.

No hay caducidad. Para uncache, usted tiene que cambiar el archivo de manifiesto no tener nada en ella y hacer una recarga. En Safari, borrar la memoria caché usuario hace borrar todos los archivos almacenados en caché.

Yo tenía el mismo problema: una vez Firefox guarda los archivos sin conexión, no sería volver a cargarlos nunca. Chrome funcionó como se esperaba, se comprueba el archivo de manifiesto para los cambios y vuelve a cargar todo si el archivo de manifiesto cambió. Firefox ni siquiera se ha descargado el archivo de manifiesto desde el servidor, por lo que no podría notar cambios.

Después de la investigación, descubrí que Firefox fue el almacenamiento en caché el archivo de manifiesto de caché (memoria caché de moda, no de la caché sin conexión). Configuración del encabezado de caché del archivo de manifiesto a Cache-Control: no-cache, private resuelto el problema.

Hice un complemento de Firefox que invalida el manifiesto de caché y borra HTML5 de almacenamiento local.

http: // sites.google.com/site/keigoattic/home/webrelated#TOC-Firefox-HTML5-Offline-Cache-and-Loc

También puede invalidar el manifiesto de caché escribiendo el siguiente código en la consola de error:

// invalidates the cache manifest
var mani = "http://.../mysite.manifest"; // manifest URL
Components.classes["@mozilla.org/network/application-cache-service;1"].getService(Components.interfaces.nsIApplicationCacheService).getActiveCache(mani).discard();

O, escribiendo el siguiente código en la barra de direcciones se enforece manualmente la caché se actualice:

javascript:applicationCache.update()

Hmm, acabo de llamar a update () en la caché, después de hacer un cambio de edición en el archivo de manifiesto, y recibió la secuencia completa del cheque / descarga / listo, hizo una recarga, y un cambio de texto que había hecho en una de mis archivos js, que aparece en la página inicial de mi aplicación, apareció rápidamente.

Parece que sólo necesita una recarga.

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow