Comment invalider correctement un Manifest Cache HTML5 pour les applications web en ligne / hors ligne?

Question

J'utilise actuellement un Manifest Cache (comme décrit ). Cela rend effectivement les ressources nécessaires pour exécuter l'application disponible lorsque l'utilisateur est hors ligne.

Malheureusement, cela fonctionne un peu trop bien.

Après le manifeste de cache est chargé, caches Firefox 3.5+ toutes les ressources explicitement mentionnées dans le manifeste de cache. Cependant, si un fichier sur le serveur est mis à jour et l'utilisateur tente force de rafraîchir la page en ligne (y compris lui-même cache-manifeste), Firefox sera absolument refuser de chercher quoi que ce soit. L'application reste complètement gelé au dernier point, il a été mis en mémoire cache. Questions:

1. Je veux Firefox compter efficacement que sur les ressources mises en cache lorsque la connexion réseau échoue. Je l'ai essayé d'utiliser le bloc REPLI, mais en vain. Est-ce même possible?
2. Si # 1 est impossible, est-il possible pour l'utilisateur de forcer-refresh une page et sautera cette cache (ctrl-F5 ne le fait pas et ne fait d'effacer le cache du navigateur, scandaleusement) court de compensation leur vie privée Les données? Subsidiairement, les en-têtes de support de mécanisme cache-manifeste expiration et est son comportement par rapport à ce documenté nulle part?

Answer 1

Je pense que j'ai pensé cela à: s'il y a une erreur dans son cache-manifeste (par exemple, un fichier référencé n'existe pas), puis Firefox complètement arrête de traiter quoi que ce soit lié applicationCache. Signification, il ne sera pas mise à jour quoi que ce soit dans votre cache, y compris votre cache-cache manifeste.

Pour découvrir que c'était la question, je a emprunté un code de Mozilla et a laissé tomber ce dans une nouvelle (non mises en cache) fichier HTML dans mon application. Le message final a déclaré qu'il ya été consignées pourrait être un problème dans mon cache-manifeste, et il y avait assez sûr (un fichier manquant).

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

Ce fut certainement utile, mais je devrais demander certainement une caractéristique de Mozilla qui imprime cache-malformés au moins manifeste à la console d'erreur. Il ne devrait pas exiger du code personnalisé pour attacher à ces événements pour diagnostiquer un problème aussi trivial que d'un fichier renommé.

Answer 2

Je l'ai utilisé le code de HTML5 Rocks: Mise à jour du 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

Disclaimer: mon expérience avec les manifestes et le cache est tout Safari et FF peuvent gérer certaines choses différemment

.

1. Vous êtes tout à fait raison. S'il y a des fichiers figurant sur le manifeste qui ne peut être trouvé, aucune mise en cache se produit.

2. Même si vous êtes en ligne, le navigateur vérifie que le fichier manifeste. En attendant le fichier manifeste, il continuera à charger le site à partir du cache - de cette façon, il ne tarde pas à rendre -. Mais cela signifie que vous ne voyez pas de changement sur la première charge

3. La prochaine fois que le site est chargé, si le manifeste a changé la charge précédente, les nouveaux fichiers seront chargés.

IL EST TOUJOURS NÉCESSAIRE POUR RELOAD DEUX FOIS pour voir les changements. En fait, je l'ai parfois dû recharger 3 fois pour voir la mise à jour. Aucune idée pourquoi.

Lors du débogage, je produis mon fichier manifeste à la volée avec php, donc il n'y a aucune chance d'une faute de frappe dans un nom de fichier. Je produis aussi le numéro de version au hasard chaque fois pour forcer une mise à jour mais encore une webapp hors ligne pour le test.

Une fois terminé, le fichier php peut simplement l'écho des données manifestes enregistrées avec un numéro de version constante et le cache sera toujours utilisé.

Juste quelques choses que j'ai appris en jouant avec cache et manifeste récemment. Il fonctionne très bien, mais peut être source de confusion.

Il n'y a pas d'expiration. Pour uncache, vous devez changer le fichier manifeste de ne rien avoir en elle et faire un reload. Sur Safari, l'effacement du cache utilisateur n'efface tous les fichiers mis en cache.

Answer 4

J'ai eu le même problème: une fois que Firefox sauvegardé les fichiers hors connexion, il ne serait pas les recharger jamais. Chrome a fonctionné comme prévu, il a vérifié le fichier manifeste pour les changements et tout rechargées si le fichier manifeste changé. Firefox n'a même pas télécharger le fichier manifest à partir du serveur, donc il ne pouvait pas remarquer des changements.

Après enquête, j'ai découvert que Firefox a été mise en cache du cache fichier manifest (ancien cache façonné, pas le cache hors ligne). Réglage de l'en-tête du cache du fichier manifeste à Cache-Control: no-cache, private a résolu le problème.

Answer 5

J'ai fait un add-on Firefox qui invalident le cache Manifest et efface HTML5 Stockage local.

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

Vous pouvez également invalider le manifeste de cache en tapant le code ci-dessous dans la console d'erreur:

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

Ou, en tapant le code ci-dessous dans la barre d'adresse enforece manuellement le cache à jour:

javascript:applicationCache.update()

Answer 6

Hmm, je viens d'appeler update () sur le cache, après avoir effectué un changement d'édition du fichier manifeste, et a reçu la séquence complète de contrôle / téléchargement / prêt, a fait un reload, et un changement de texte que je l'avais fait dans un de mes fichiers js, qui apparaît dans la première page de mon application, est apparu rapidement.

Il semble que je besoin d'un seul reload.