html - uso - manifest cache manifest

¿Cómo invalidar correctamente un Manifiesto de caché HTML5 para aplicaciones web en línea/fuera de línea?

Question

Actualmente estoy usando un Manifiesto de caché (como se describe here ). Esto efectivamente hace que los recursos necesarios para ejecutar la aplicación estén disponibles cuando el usuario está fuera de línea.

Desafortunadamente, funciona demasiado bien.

Después de cargar el manifiesto de caché, Firefox 3.5+ guarda en caché todos los recursos referenciados explícitamente en el manifiesto de caché. Sin embargo, si se actualiza un archivo en el servidor y el usuario intenta forzar la actualización de la página mientras está en línea (incluido el propio caché-manifiesto), Firefox se negará absolutamente a buscar nada. La aplicación permanece completamente congelada en el último punto en que fue almacenada. Preguntas:

1. Quiero que Firefox solo confíe en los recursos en caché cuando falla la conexión de red. Intenté usar el bloque FALLBACK, pero fue en vano. ¿Esto es posible?
2. Si el # 1 no es posible, ¿es posible que el usuario fuerce la actualización de una página y omita esta caché (ctrl-F5 no lo hace y tampoco borra el caché del navegador, sorprendentemente) y no borra sus datos privados? Alternativamente, ¿el mecanismo de manifestación de caché admite encabezados de caducidad y su comportamiento con respecto a esto está documentado en cualquier lugar?

Answer 1

Descargo de responsabilidad: mi experiencia con los manifiestos y el caché es todo Safari y FF puede manejar algunas cosas de manera diferente.

1. Estás en lo cierto. Si hay algún archivo enumerado en el manifiesto que no se puede encontrar, no se producirá el almacenamiento en caché.

2. Incluso si está en línea, el navegador comprobará solo el archivo de manifiesto. Mientras espera el archivo de manifiesto, continuará cargando el sitio desde el caché, de esa forma no retrasa el procesamiento, pero significa que no verá ningún cambio en la primera carga.

3. La próxima vez que se cargue el sitio, si el manifiesto cambió en la carga anterior, se cargarán los archivos nuevos.

SIEMPRE ES NECESARIO VOLVER A VENDER DOS VECES para ver cualquier cambio. De hecho, algunas veces tuve que volver a cargar 3 veces para ver la actualización. No tengo idea por qué.

Al depurar, 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 aleatoriamente cada vez para forzar una actualización, pero todavía tengo una aplicación web fuera de línea para probar.

Una vez completado, el archivo php puede hacer eco de los datos del manifiesto guardado con un número de versión constante y la caché siempre se utilizará.

Solo algunas cosas que aprendí mientras jugaba con manifiesto y caché recientemente. Funciona muy bien, pero puede ser confuso.

No hay vencimiento Para desempaquetar, debe cambiar el archivo de manifiesto para no tener nada y hacer una recarga. En Safari, borrar el caché del usuario borra todos los archivos en caché.

Answer 2

He usado código de HTML5 Rocks: actualice la 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);

Answer 3

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

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 código siguiente 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 bien, al escribir el código a continuación en la barra de direcciones se enfocará manualmente la memoria caché que se actualizará:

javascript:applicationCache.update()

Answer 4

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

Parece que solo necesito una recarga.

Answer 5

Tuve el mismo problema: una vez que Firefox guardó los archivos sin conexión, no los volvería a cargar nunca. Chrome funcionó como se esperaba, verificó el archivo de manifiesto para ver si había cambios y volvió a cargar todo si el archivo de manifiesto cambiaba. Firefox ni siquiera descargó el archivo de manifiesto del servidor, por lo que no pudo notar los cambios.

Después de la investigación, descubrí que Firefox almacenaba en caché el archivo de manifiesto de la caché (caché antigua, no la caché sin conexión). Establecer el encabezado de caché del archivo de manifiesto en Cache-Control: no-cache, private resolvió el problema.

Answer 6

Creo que tengo esto resuelto: si hay un error en el manifiesto de caché (por ejemplo, un archivo al que se hace referencia no existe), entonces Firefox completamente dejará de procesar cualquier cosa relacionada con la aplicaciónCache. Es decir, no actualizará nada en su caché, incluido su caché-manifiesto en caché.

Para descubrir que este era el problema, pedí prestado un código de Mozilla y lo incluí en un nuevo archivo HTML (no almacenado en caché) en mi aplicación. El mensaje final registrado indicó que podría haber un problema en mi memoria caché-manifiesto, y efectivamente había (un archivo faltante).

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

Esto fue ciertamente útil, pero definitivamente debería solicitar una característica de Mozilla que imprima alucinaciones de caché malformadas al menos en la Consola de Error. No debería requerir código personalizado para adjuntar a estos eventos para diagnosticar un problema tan trivial como un archivo renombrado.