Come invalidare correttamente un HTML5 cache manifesto per le applicazioni web offline / online?

Question

Attualmente sto usando un manifesto cache (come descritto qui ). Questo rende in modo efficace le risorse necessarie per eseguire l'applicazione disponibile quando l'utente è offline.

Purtroppo, funziona un po 'troppo bene.

Dopo il manifesto di cache viene caricato, Firefox 3.5+ cache tutte le risorse in modo esplicito riferimento nel manifesto cache. Tuttavia, se un file sul server viene aggiornato e l'utente tenta di forza aggiornare la pagina mentre in linea (tra cui la stessa cache-manifesto), Firefox sarà assolutamente rifiutare di prendere qualsiasi cosa. L'applicazione rimane completamente congelata all'ultimo punto è stato memorizzato nella cache. Domande:

1. Voglio Firefox fare affidamento in modo efficace solo sulle risorse memorizzate nella cache quando la connessione di rete viene a mancare. Ho provato con il blocco di riserva, ma senza alcun risultato. Questo è anche possibile?
2. Se 1 # non è possibile, è possibile per una pagina e di bypass questa cache all'utente di forzare-refresh (ctrl-F5 non lo fa e neppure svuotare la cache del browser, scandalosamente) a corto di compensazione loro privato dati? In alternativa, supporta il meccanismo di intestazioni scadenza della cache-manifesto e il suo comportamento è rispetto a questo documentato da nessuna parte?

Answer 1

Credo di aver ottenuto questo capito: se c'è un errore nella propria cache-manifest (ad esempio, un file di riferimento non esiste), poi Firefox completamente fermerà l'elaborazione di qualsiasi cosa applicationCache correlati. Significato, non aggiornerà nulla nella cache, compreso il vostro cache cache-manifesto.

Per scoprire che questo era il problema, I preso in prestito qualche codice di Mozilla e lasciò cadere questo in un nuovo (non cache) file HTML nella mia applicazione. Il messaggio finale sia registrato ha dichiarato che ci potrebbe essere un problema nella mia cache-manifest, e abbastanza sicuro c'era (un file mancante).

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

Questo è stato sicuramente utile, ma deve assolutamente richiedere una funzione di Mozilla che stampa malformati cache-manifesta almeno alla console degli errori. Essa non dovrebbe richiedere il codice personalizzato per collegare a questi eventi per diagnosticare un problema così banale come un file rinominato.

Answer 2

Ho usato il codice da HTML5 Rocks: aggiornare la cache :

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

Esonero di responsabilità: la mia esperienza con i manifesti e la cache è tutto Safari e FF possono gestire alcune cose in modo diverso

.

1. Hai ragione. Se ci sono file elencati nel manifesto che non possono essere trovati, non si verificherà nella cache.

2. Anche se si è online, il browser controlla solo il file manifesto. In attesa che il file manifesto, che continuerà a caricare il sito dalla cache - in questo modo non ritardi il rendering -. Ma significa che non si vede alcuna modifica sul primo carico

3. La prossima volta che il sito viene caricato, se il manifesto modificato sul carico precedente, verranno caricati i nuovi file.

E 'sempre necessario per ricaricare due volte per vedere le modifiche. In realtà, a volte ho dovuto ricaricare 3 volte per vedere l'aggiornamento. Nessuna idea perché.

Quando il debug, ho generare il mio file manifesto al volo con PHP, quindi non c'è alcuna possibilità di un errore di battitura in un nome di file. Ho anche generare il numero di versione in modo casuale ogni volta per forzare un aggiornamento ma hanno ancora una webapp non in linea per il test.

Una volta completato, il file php può semplicemente eco i dati manifesto salvati con un numero di versione costante e sarà sempre utilizzata la cache.

Solo alcune cose che ho imparato mentre gioca con manifesti e la cache di recente. E le grandi opere, ma può essere fonte di confusione.

Non v'è alcuna scadenza. Per rimozione dati dalla cache, è necessario modificare il file manifesto di avere nulla in esso e fare una ricarica. On Safari, svuotare la cache utente fa cancellare tutti i file memorizzati nella cache.

Answer 4

Ho avuto lo stesso problema: una volta che Firefox ha salvato i file non in linea, non sarebbe ricaricarli mai. Chrome ha funzionato come previsto, farlo controllare il file manifesto per le modifiche e ricaricato tutto se il file manifesto è cambiato. Firefox non ha nemmeno scaricare il file manifesto dal server, in modo che non potesse notare cambiamenti.

Dopo indagini, ho scoperto che Firefox è stato cache il file di cache manifest (vecchia cache di stile, non la cache non in linea). Impostazione dell'intestazione della cache del file manifesto per Cache-Control: no-cache, private risolto il problema.

Answer 5

ho fatto un add-on Firefox che invalida il Manifesto cache e cancella HTML5 Local Storage.

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

Si può anche invalidare la cache manifesta digitando il codice di seguito nella console di errore:

// 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();

In alternativa, digitando il codice qui sotto nella barra degli indirizzi sarà enforece manualmente la cache da aggiornare:

javascript:applicationCache.update()

Answer 6

Hmm, ho appena chiamato update () sulla cache, dopo aver effettuato un cambiamento di modifica per il file manifesto, e ha ricevuto l'intera sequenza di controllo / download / pronto, ha fatto una ricarica, e un cambio di testo che avevo fatto in uno dei miei file js, che appare nella pagina iniziale del mio app, prontamente apparso.

Sembra ho solo bisogno di una ricarica.