Entw.: HTML5 Caching, Tricks und Tips (01)

Unter HTML5 können Browser bei bestimmten Web-Seiten auch Offline arbeiten. Nach dem Laden der Web-Seiten und deren Ressourcen werden diese dann durch den Web-Browser gespeichert (Caching), sodass auch Offline gearbeitet werden kann. Um dies zu erreichen, benötigt man erst einmal einen modernen Web-Browser (z.B. Safari 5.x) und es ist eine sogenannte Cache Manifest-Datei zu erstellen.
Dies ist nachzulesen in der Spezifikation: ⇒ WHATWG: HTML5-Spezifikation

Dazu hier einige Tipps:

Komfortables Anzeigen, ob der Browser Online oder Offline ist

Keine Netzverbindung (Offline) mit der normalen Anzeige: Kein BildKeine Netzverbindung


Mit Netzverbindung (Online)Mit Netzverbindung


Keine Netzverbindung (Offline) mit AlternativbildKeine Netzverbindung mit Alternativbild


Erreicht durch folgendes Cache Manifest : 
 CACHE MANIFEST
 index.html
 scripts/demo.js
 styles/screen.css
 
 FALLBACK:
 images/ images/offline.jpg

Automatische Erzeugung der Cache Manifest-Datei für das Caching


Der Quelltext zu manifest.php: 
<?php
 header('Content-Type: text/cache-manifest');
 echo "CACHE MANIFEST\n";
 $hashes = "";
 $dir = new RecursiveDirectoryIterator(".");
 foreach(new RecursiveIteratorIterator($dir) as $file) {
   if ($file->IsFile() &&
         $file != "./manifest.php" &&
         substr($file->getFilename(), 0, 1) != ".") {
     echo $file . "\n";
     $hashes .= md5_file($file);
   }
 }
 echo "# Hash: " . md5($hashes) . "\n";
?>
Ein mögliches Ergebnis 
 CACHE MANIFEST
./index.html
./jqtouch/jqtouch.css
./jqtouch/jqtouch.js
...
./themes/jqt/img/toolbar.png
./themes/jqt/img/whiteButton.png
./themes/jqt/theme.css
# Hash: ddaf5ebda18991c4a9da16c10f4e474a
Der Eintrag in die Html5-Datei 
  <html manifest="manifest.php">

Caching über die Konsole kontrollieren

 // Einfaches Array mit den Statuswerten (Umlaute werden nicht unterstuetzt)
var cacheStatusValues = [];
cacheStatusValues[0] = 'nicht zwischengespeichert';
cacheStatusValues[1] = 'untaetig';
cacheStatusValues[2] = 'pruefe';
cacheStatusValues[3] = 'lade herunter';
cacheStatusValues[4] = 'Update abgeschlossen';
cacheStatusValues[5] = 'veraltet';
 
// Listener fuer alle moeglichen Ereignisse
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);
 
// Jedes Ereignis auf der Konsole protokollieren
function logEvent(e) {
  var online, status, type, message;
  online = (navigator.onLine) ? 'ja' : 'nein';
  status = cacheStatusValues[cache.status];
  type = e.type;
  message = 'Online: ' + online;
  message+= ', Ereignis: ' + type;
  message+= ', Status: ' + status;
  if (type == 'error' && navigator.onLine) {
    message+= ' (Wahrscheinlich Syntaxfehler im Manifest)';
  }
  console.log(message);
}
 
// Austausch der neu heruntergeladenen Dateien, wenn das Update abgeschlossen wurde
window.applicationCache.addEventListener(
  'updateready',
  function(){
    window.applicationCache.swapCache();
    console.log('Austausch des Zwischenspeichers wurde begonnen.');
  },
  false
);
 
// Alle 10 Sekunden auf Aenderungen am Manifest pruefen
setInterval(function(){cache.update()}, 10000);


Diese Tipps stammen aus dem Buch:
⇒ iPhone Apps mit HTML, CSS und JavaScript von Jonathan Stark. Copyright 2010 O'Reilly Verlag, 978-3-89721-603-7
Für die Veröffentlichung an dieser Stelle hat der Buchautor seine Erlaubnis erteilt.