Offline-Anwendungen (HTML5)

Offline-Anwendungen

HTML5 erlaubt Web-Anwendungen, die sich kaum von Desktop-Anwendungen unterscheiden
Offline-Anwendungen funktionieren auch ohne Netzwerkverbindung
Technologien für Offline-Anwendungen

On/Offline-Status
Application Cache
DOM Storage (Web Storage)
Web SQL
Indexed DB

Online-Status

Ob der Browser online ist kann man über die Eigenschaft navigator.onLine des Browsers auslesen

<h1 id="status">Unbekannt</h1>
<script type="text/javascript">
  var checkStatus = function() {
      var status = document.getElementById("status").firstChild;

      if (navigator.onLine) {
          status.nodeValue = "Online";
      } else {
          status.nodeValue = "Offline";
      }
  };
  window.setInterval(checkStatus, 1000);
</script>

Application-Cache

Der HTML5-Application-Cache

erlaubt Ressourcen einer Webseite in einen speziellen Cache des Browsers für den Offline-Betrieb zu laden
ist vom normalen Browser-Cache getrennt
kann vom Web-Entwickler über eine spezielle Datei (das Cache-Manifest) kontrolliert werden
ist versioniert
wird automatisch mit dem Web synchronisiert
benachrichtigt die JavaScript-Anwendung über Änderungen

Cache-Manifest

Cache-Manifest legt fest, was in den Cache geladen wird

CACHE MANIFEST

# Dateien, die im Cache gehalten werden sollen
CACHE:
../bilder/portrait.jpg
../css/html5.css

# Folgende Dateien nicht im Cache halten
NETWORK:
cache-user.html

HTML-Seite muss Manifest einbinden

<html manifest="cache-manifest.manifest">

Beispiel: Nutzung des Caches

<!DOCTYPE html>
<html manifest="cache-manifest.manifest">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
  var showPopper = function() {
      var div = document.getElementById("showme");
      var img = document.createElement("img");
      img.src = "../bilder/portrait.jpg";
      div.appendChild(img);
  };

  var checkStatus = function() {
      var status = document.getElementById("status").firstChild;
      if (navigator.onLine) { status.nodeValue = "Online"; }
      else { status.nodeValue = "Offline"; }
  };
  window.setInterval(checkStatus, 1000);
</script>

<title>Benutzer des Application-Caches</title>
</head>
<body>
  Status: <span id="status">Unbekannt</span><br>
  <div id="showme"></div>
  <button id="showbutton" onclick="showPopper();">Zeige Bild</button>
</body>
</html>

DOM Storage

DOM Storage (Web Storage) erlaubt beliebige Name-Wert-Paare im Browser zu speichern
Zwei Speicherbereiche für Daten

localStorage: Daten leben beliebig lange, bis der Benutzer sie löscht
sessionStorage: Daten leben bis der Browser geschlossen wird

Der Zugriff über einJavaScript-API
Aus Sicherheitsgründen gilt die same origin policy auch für Daten im DOM Storage
Events bei Änderungen an den Daten

DOM Storage API

Attribut	Bedeutung
`length`	Anzahl der gespeicherten Datensätze
`key(index)`	Name des Schlüssels an der Position index
`getItem(key)`	Daten zum Schlüssel key
`setItem(key, value)`	Speichert die Daten value unter dem Schlüssel key
`removeItem(key)`	Löscht die Daten unter dem Schlüssel key
`clear()`	Löscht alle Daten, die von der Origin stammen

Beispiel: DOM Storage

function saveData() {
    var inputField = document.getElementById("message");
    var outputField = document.getElementById("info");
    window.localStorage.setItem("nachricht", inputField.value);
    outputField.firstChild.data = "Daten gespeichert";
    inputField.value = "";
}

function readData() {
    var inputField = document.getElementById("message");
    var outputField = document.getElementById("info");
    var value = window.localStorage.getItem("nachricht");
    inputField.value = value;
    outputField.firstChild.data = "";
}

<html>
<head>
<title>DOM-Storage</title>
</head>
<body>
<form onsubmit="javascript:return false;">
  Nachricht: <input type="text" name="nachricht" id="message">
  <span id="info">&nbsp;</span><br>
  <button onclick="saveData()">Speichern</button>
  <button onclick="readData()">Lesen</button>
</form>
</body>