SlideShare ist ein Scribd-Unternehmen logo
HTML5 offline




   Fallstricke für Web-Apps und Webseiten
                                Ulrich Schmidt
HTML5 offline
1.  Warum?
2.  Konzepte
3.  Techniken
4.  Schritte zur offline WebApp
5.  Fallstricke / Grenzen
6.  Empfehlung



Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
HTML5 offline
1.  Warum?
2.  Konzepte
3.  Techniken
4.  Schritte zur offline WebApp
5.  Fallstricke / Grenzen
6.  Empfehlung



Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
Wo? - T-Mobile - UMTS




                                                         http://www.t-mobile.de/netzabdeckung/

    Warum?
© 2012 Sevenval GmbH   Konzepte   Techniken   Schritte         Fallstricke      Empfehlung
Wo? - T-Mobile - EDGE




                                                         http://www.t-mobile.de/netzabdeckung/

    Warum?
© 2012 Sevenval GmbH   Konzepte   Techniken   Schritte         Fallstricke      Empfehlung
Wo? - Orte



      •  Meeting                              •  Silvester
      •  Restaurant                           •  Festival
      •  Im Supermarkt                        •  Messen



      •  In der U-Bahn/Zug                    •  Im Ausland
      •  Auf dem Land                         •  Im Urlaub
      •  Im Flugzeug

    Warum?
© 2012 Sevenval GmbH   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
Definition "offline"


     "Als offline wird der Zustand bezeichnet, in
       dem ein Gerät, das über eine
       Kommunikationsschnittstelle verfügt, nicht
       bereit ist, Daten über diese Schnittstelle zu
       empfangen oder zu senden.
       Das Gegenteil davon ist online."
     (http://de.wikipedia.org/wiki/Offline 26.03.2011)




    Warum?
© 2012 Sevenval GmbH   Konzepte   Techniken       Schritte   Fallstricke   Empfehlung
HTML5 offline
1.  Warum?
2.  Konzepte
3.  Techniken
4.  Schritte zur offline WebApp
5.  Fallstricke / Grenzen
6.  Empfehlung



Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
Unterschiede zwischen Daten und Funktion

aktives Offline                    passives Offline
•    Notiz                         •  HTML
•    Artikeltext                   •  CSS
•    Einstellungen                 •  JavaScript
•    Inhalte

     Daten werden aktiv im           Alle Frontend- und
     Client gespeichert              Logikdaten werden für
                                     die Offlinenutzung im
                                     Client gespeichert


Warum?      Konzepte   Techniken    Schritte   Fallstricke   Empfehlung
Use-Cases
                             Daten im            Offline Site       WebClient
                              Client
      Einstellungen               Client             Client                 Client

           Daten                  Client             Client                 Server

          Content                 Client             Client                 Server

           Layout                 Server             Client                 Client

            Logik                 Server             Client                 Client

         Frontend                 Server             Client                 Client

        Initiale                  Server            Server                  Server
      Auslieferung


    Warum?
© 2012 Sevenval GmbH   Konzepte      Techniken    Schritte    Fallstricke      Empfehlung
HTML5 offline
1.  Warum?
2.  Konzepte
3.  Techniken
4.  Schritte zur offline WebApp
5.  Fallstricke / Grenzen
6.  Empfehlung



Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
Aktives Offline

• localStorage
• WebSQL
• IndexedDB
• FileStorage API
localStorage

Was ist das?
•  Persistenter Speicher für Text
•  Wird als Alternative zu Cookies gesehen

Unterstützt von
•  Allen gängigen Browsern



Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
localStorage
var notes =
  JSON.parse(localStorage.getItem("notes"));


var note = {
  text : "Meine Notiz",
  timestamp : 1234567890
}


notes.push(note);


localStorage.setItem("notes",JSON.stringify(notes));



Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
localStorage

Pros                              Cons
•  Support aller Browser          •  Langsam bei großen
•  Einfach                           Datenmengen
•  Schnelles Setup                •  Nicht durchsuchbar
                                  •  Text muss manuell
                                     strukturierter werden
                                  •  Synchrone
                                     Verarbeitung


Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
WebSQL
Was ist das?
•  deprecated
•  strukturierte relationale Datenbank

Unterstützt von
•  iOS seit 3.2
•  Android seit 2.1
•  Opera Mobile seit 11.0


Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
WebSQL
var note = {
  text : "Meine Notiz",
  timestamp : 1234567890
}
db.transaction(function(tx) {
  tx.executeSql(
     "insert into notes " +
     "(text, timestamp) values (?,?);",
     [note.text, note.timestamp],
     handler,
     db.onError
  );
});


Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
WebSQL

Pros                            Cons
•  Support von allen            •  Deprecated
   gängigen Browsern            •  Relationales
•  Asynchron                       Datenbank Knowhow
•  Performance                     notwendig
•  Struktur der Daten
•  Einfache Migration
   von bestehenden
   Serverdatenbanken

Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
IndexedDB

Was ist das?
•  Konsequente Weiterentwicklung von
   localStorage und WebSQL
•  Objekte können direkt gespeichert werden

Unterstützt von
•  Firefox ab 4.0, Chrome ab 11.0, IE
   wahrscheinlich ab 10.0


Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
IndexedDB
var note = {
  text : "Meine Notiz",
  timestamp : 1234567890
}
var openRequest = indexedDB.open("notes", "MyNotes");
openRequest.onsuccess = function(ev) {
  db = ev.target.result;
  var speicher = db.transaction(
    [],IDBTransaction.READ_WRITE, 0
  ).objectStore("notes");
}
var request = speicher.put(note);
request.onsuccess = function(fx)
  {console.log('saved');};

Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
IndexedDB

Pros                            Cons
•  Asynchron                    •  Keine Unterstützung
•  Objekte können ohne             in mobilen Browsern
   Vorbereitung                 •  Kann komplex
   gespeichert werden              werden
•  Durchsuchbar                 •  Keine fixen
•  Einfach benutzbar               Datenstrukturen




Warum?   Konzepte   Techniken    Schritte   Fallstricke   Empfehlung
FileSystem API

Was ist das?
•  Speicher für Binärdateien
•  Dateien werden im Dateisystem abgelegt

Unterstützt von
•  Chrome seit 13 voll implementiert




Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
FileSystem API
var note = {
  text : "Meine Notiz",
  timestamp : 1234567890
}
fs.root.getFile("notes/" + note.timestamp, {create:
  true, exclusive: true}, function(file) {
        file.createWriter(function(writer) {
          writer.onerror = fileStore.onError;
          var bb = new WebKitBlobBuilder;
          bb.append(JSON.stringify(note));
          writer.write(bb.getBlob("text/plain"));
          handler();
        }, fileStore.onError);
      }, fileStore.onError);

Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
FileSystem API

Pros                            Cons
•  Speicher für große           •  Aktuell nur für den
   Dateien                         Chrome verfügbar
•  Asynchron                    •  Nicht durchsuchbar
                                •  Nicht für Objekte
                                   geeignet




Warum?   Konzepte   Techniken    Schritte   Fallstricke   Empfehlung
passives Offline




           e   h
        tionCac
      Applica
ApplicationCache

Was ist das?
•  Speicher für Web-Ressourcen
•  Webseiten können komplett offline
   dargestellt werden

Unterstützt von
•  Allen gängigen Browsern


Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
ApplicationCache

CACHE MANIFEST
#version 1
CACHE:
/script.js
/bild.png
http://example.com/css/styles.css


FALLBACK:
/ /offline.html


NETWORK:
*

Warum?     Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
ApplicationCache

Pros                            Cons
 • Alle Dateien werden          • Komplexes
   herunter geladen               Updateverhalten
 • Schnelles Setup              • Schwierig Online und
 • Guter Browsersupport           Offline zu kombinieren
 • EventHandler um auf          • Noch nicht in allen
   Ereignisse reagieren zu        Browsern strikt
   können                         implementiert
                                • Für Webentwickler ein
                                  seltsames Format


Warum?   Konzepte   Techniken    Schritte   Fallstricke   Empfehlung
HTML5 offline
1.  Warum?
2.  Konzepte
3.  Techniken
4.  Schritte zur offline WebApp
5.  Fallstricke / Grenzen
6.  Empfehlung



Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
Schritte zur offline WebApp

1. Schritt - Layout und Struktur
     Erstellen einer "normalen" WebApp

2. Schritt - localStorage
     Implementierung der lokalen Datenhaltung

3. Schritt - ApplicationCache
     Alle Daten und Assets lokal ablegen


Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
1. Schritt - Die WebApp

Struktur
    index.html

Layout
    style.css

Logik
   script.js
Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
1. Schritt - Die WebApp - index.html
<!DOCTYPE HTML>
<html>
  <head>
    <link type="text/css" href="main.css"/>
    <script src="script.js"></script>
  </head>
  <body>
    ...
  </body>
</html>


Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
1. Schritt - Die WebApp - style.css
body {
  background-color: #666;
  color: #fff;
}




Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
1. Schritt - Die WebApp - script.js

function addNote() {
  /* Soll eine neue Notiz hinzufügen */
}




Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
1. Schritt - Die WebApp - online




                   ...                                                            ...


                   ...                                                            ...


                   ...                                                            ...
                                          Seite läd...
       Notiz
                           +                                                 Notiz


                                                                                          +


    Warum?
© 2012 Sevenval GmbH     Konzepte   Techniken            Schritte   Fallstricke         Empfehlung
1. Schritt - Die WebApp - offline




                   ...


                   ...


                   ...
                                                                     Seite nicht
                                         Seite läd...
                                                                     gefunden.
       Notiz
                           +



    Warum?
© 2012 Sevenval GmbH     Konzepte   Techniken       Schritte   Fallstricke   Empfehlung
2. Schritt - localStorage

Was ist das?
•  Permanenter Speicher für Text
•  Zugriff nur über die selbe "Domain"
•  Mobil am weitesten verbreitet
•  Einfach zu nutzen




Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
2. Schritt - localStorage
// liest ein Element aus dem Speicher
localStorage.getItem("key");

// schreibt ein Element in den Speicher
localStorage.setItem("key","value");

// löscht ein Element aus dem Speicher
localStorage.removeItem(“key“);

// löscht den gesamten Speicher
localStorage.clear();
Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
2. Schritt - localStorage
localStorage.setItem('key',
    JSON.stringify(
     {
       vara : 'a',
       varb : 'b'
     }
    )
);
var item = JSON.parse(
    localStorage.getItem('key')
);
Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
2. Schritt - localStorage




                   ...                                                   ...


                   ...                                                   ...


                   ...                                                   ...


       Notiz
                           +                                        Notiz


                                                                                 +


    Warum?
© 2012 Sevenval GmbH     Konzepte   Techniken   Schritte   Fallstricke         Empfehlung
2. Schritt - localStorage




             Seite nicht
             gefunden.




    Warum?
© 2012 Sevenval GmbH   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
3. Schritt - ApplicationCache

Was ist das?
•  Ein im Browser liegender permanenter
   Cache.
•  Ressourcen werden unter dem Namen
   ihrer URL dort abgelegt.
•  Ressourcen im ApplicationCache werden
   nicht mehr vom Webserver abgerufen.



Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
3. Schritt - ApplicationCache - index.html
<!DOCTYPE HTML>
<html mainfest="cache.manifest">
  <head>
    <link type="text/css" href="main.css"/>
    <script src="script.js"></script>
  </head>
  <body>
    ...
  </body>
</html>


Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
3. Schritt - ApplicationCache - Manifest
CACHE MANIFEST

/script.js
/main.css




Achtung:
Das einbindende Dokument wird immer
automatisch im Cache abgelegt.

Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
3. Schritt - ApplicationCache - Kommentar
CACHE MANIFEST

# Kommentar


/script.js
/main.css




Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
3. Schritt - ApplicationCache - Fallback
CACHE MANIFEST


/script.js
/main.css


FALLBACK:
/profile/ /noprofile.html
/ /offline.html




Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
3. Schritt - ApplicationCache - Network
CACHE MANIFEST


/script.js
/main.css


FALLBACK:
/ /offline.html


NETWORK:
*
Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
3. Schritt - ApplicationCache




                   ...                                                   ...


                   ...                                                   ...


                   ...                                                   ...


       Notiz
                           +                                        Notiz


                                                                                 +


    Warum?
© 2012 Sevenval GmbH     Konzepte   Techniken   Schritte   Fallstricke         Empfehlung
HTML5 offline
1.  Warum?
2.  Konzepte
3.  Techniken
4.  Schritte zur WebApp
5.  Fallstricke / Grenzen
6.  Empfehlung



Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
MIME-Type

AddType text/cache-manifest .manifest




Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
Bilder

Assets                          Inhalte
•  Logo                         •  Teaserbilder
•  Designelemente               •  Artikelbilder
•  Sprites
•  Stylesheet




Warum?   Konzepte   Techniken    Schritte   Fallstricke   Empfehlung
Bilder

 Asset-Bilder  ApplicationCache
 Content-Bilder  localStorage
   (Base64 encoded)


var image =
  JSON.parse(localStorage.getItem('myImage'));


return '<img src="data:image/'+image.type+
  ';base64,'+image.data+'"/>';

Warum?    Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
Bilder
 OImageRequest = function(_url) {
    this.xhr = new XMLHttpRequest();
    var iid = md5(_url); //md5 or other id
    this.xhr.open('GET', _url, true);
    this.xhr.overrideMimeType('text/plain;
  charset=x-user-defined'); // important
    this.xhr.onreadystatechange = function(e) {
      if (this.readyState==4&&this.status==200) {
        OImages.set(iid,'jpeg',this.responseText);
      }
    }
    this.xhr.send();
  }



Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
Bilder
 OImages = {
    prefix : 'OImage',
    set : function(_id,_type,_data) {
       localStorage.setItem(this.prefix+_id,
         JSON.stringify( {
            id : _id,
            type : _type,
            data : Base64.encode(_data)
       }));
    },
    get : function(_id) {... }
 }



Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
Bilder
 OImages = {
    prefix : 'OImage',
    set : function(_id,_type,_data) {... },
    get : function(_id) {
      var imageStr =
        localStorage.getItem(this.prefix+_id);
      var image = JSON.parse(imageStr);
      if(!image.type) { image.type = "png"; }
      return '<img src="data:image/'+image.type
  +';base64,'+image.data+'"/>';
    }
  }



Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
ApplicationCache - Update

•  Änderungen von Dateien werden ignoriert
•  Updates des ApplicationCache werden nur
   geladen, wenn das CacheManifest
   geändert wurde. Dabei ist der Inhalt
   relevant.
•  Caching-Header werden ignoriert



Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
ApplicationCache - Update

CACHE MANIFEST


# version 1.1


CACHE:
/script.js




Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
ApplicationCache - Update - Schritt 1


                                   Laden der Seite


                                        Seite im
                        ja             AppCache?             nein
Laden der Seite und                                       Seite und Assets
 Assets aus dem                                          werden vom Server
 ApplicationCache                                             abgeholt

                                    Laden des
                                   CacheManifest

    Warum?
© 2012 Sevenval GmbH   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
ApplicationCache - Update - Schritt 2


         Laden des
        CacheManifest




            Änderungen am
             CacheManifest
                                                nein
                         ja
   Laden der Seite und                                    Ende
    Assets aus dem
    ApplicationCache
    Warum?
© 2012 Sevenval GmbH   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
ApplicationCache - Update - Schritt 3


         Laden des
        CacheManifest                                Laden des
                                                    CacheManifest


           Änderungen am
                                                         Änderungen am
            CacheManifest
                                                          CacheManifest



                         ja                                         nein
   Laden der Seite und
                                                            Ende
    Assets aus dem
    ApplicationCache

    Warum?
© 2012 Sevenval GmbH   Konzepte   Techniken   Schritte     Fallstricke    Empfehlung
Updates - manuelles Update

if (window.applicationCache) {
    applicationCache.addEventListener('updateready',
      function() {
        if (confirm('Aktualisiert! Neu laden?')) {
            window.location.reload();
        }
    });
}




Warum?    Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
ApplicationCache - Update - Gesamtbild


 Laden der Seite
                            Seite im
                           AppCache?
                ja                           nein                            Laden des
 Laden der Seite und
   Assets aus dem
                                           Seite und Assets                 CacheManifest
  ApplicationCache                          werden vom
                                           Server abgeholt
                        Laden des
                                                                                    Änderungen
                       CacheManifest                                                    am
                                              Laden der Seite und                   CacheManife
                                                Assets aus dem                           st
                                               ApplicationCache
                                                                       ja

       Änderung                   ja                                                 nein
        en am                                                       Error
       CacheMa
         nifest                                                                      Ende
                                             nein

    Warum?
© 2012 Sevenval GmbH   Konzepte        Techniken        Schritte      Fallstricke      Empfehlung
Updates - EventListener

 ApplicationCache.addEventListener(handle,function,false)

 cached: nach dem ersten Speichern eines CacheManifest
 checking: Start des Ladens eines Manifests.
 downloading: Start des Landes neuer Ressourcen.
 error: 404 des Manifest oder geändertes Manifest während
 des Downloads, Abbruch
 noupdate: Update nicht erforderlich (keine Änderung)
 obsolete: 404 -> Der ApplicationCache wird gelöscht
 progress: Event für jede Ressource die geladen wird.
 updateready: Letztes Event, wenn alle Ressourcen geladen
 sind.




Warum?    Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
Bin ich offline?

if (navigator.onLine) {
  // online
} else {
  // offline
}
window.addEventListener('online', function(e) {
  // aktiv online gehen
}, false);



window.addEventListener('offline', function(e) {
  // aktiv offline gehen
}, false);



Warum?    Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
Weitere Fallstricke ApplicationCache

•  Einbindene Seite wird immer gecached
•  HTTP Cachingregeln greifen nicht
•  Bei einem Fehler (404 oder Syntax) wird nichts
   gecached


Richtige Syntax und Timing ist alles




Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
Browsersupport


            WebSQL                            iOS, Android (2+), BB (6+),
                                              MeeGo 1.2, WebOS
            IndexedDB                         Chrome (Android 4), FF
                                              (Android)
            FileSystem API                    Android (3+), Chrome, BB
                                              Playbook,
            localStorage                      Alle gängigen, außer
                                              Symbian und Windows
                                              Phone
            ApplicationCache                  Alle gängigen, außer
                                              Symbian und Windows
                                              Phone
                                                 Mehr Infos unter http://mobilehtml5.org/
    Warum?
© 2012 Sevenval GmbH   Konzepte   Techniken     Schritte      Fallstricke     Empfehlung
Größenbeschränkungen (z.T. erweiterbar)


            WebSQL                            5 MB


            IndexedDB                         5 MB


            FileSystem API                    5 MB


            localStorage                      2,5 MB (iOS und Android)
                                              bzw. 5 MB

            ApplicationCache                  5 MB


    Warum?
© 2012 Sevenval GmbH   Konzepte   Techniken     Schritte   Fallstricke   Empfehlung
HTML5 offline
1.  Warum?
2.  Konzepte
3.  Techniken
4.  Schritte zu einer WebApp
5.  Fallstricke / Grenzen
6.  Empfehlung



Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
Meine Empfehlung
•  localStorage um Cookies zu vermeiden und
   (kleine) Daten zu speichern

•  ApplicationCache um das Laden von Seiten zu
   beschleunigen oder mobile Seiten vollständig
   offline zur Verfügung zu stellen.

•  WebSQL mit Einschränkungen und wenn man
   nur auf ein OS beschränkt ist.


Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
FAZIT
•  Durch diese HTML5 Feature lassen sich heute schon
   Webseiten trotz Funklöchern beschleunigen.
•  Offline erfordert ein eigenes Konzept.
•  Es sollten nur "geringe" Datenmengen gespeichert
   werden.
•  Bis es einen schnell implementierbaren Standard für alle
   Systeme gibt, wird noch einige Zeit vergehen.

•  HTML5 ist „work in progress“




Warum?    Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
HTML5 offline
1.  Warum?
2.  Konzepte
3.  Techniken
4.  Schritte zu einer WebApp
5.  Fallstricke / Grenzen
6.  Empfehlungen



Warum?   Konzepte   Techniken   Schritte   Fallstricke   Empfehlung
Fragen?
ENDE


       Bilder von flickr unter der Creative Commons

Weitere ähnliche Inhalte

Andere mochten auch

Conceptos 2
Conceptos 2Conceptos 2
Incorporaciòn de las NNTT a la educación
Incorporaciòn de las NNTT a la educaciónIncorporaciòn de las NNTT a la educación
Incorporaciòn de las NNTT a la educación
Patricio Moncayo Echeverría
 
Fs
FsFs
Zahlen übungen
Zahlen übungenZahlen übungen
Zahlen übungen
Rahly Saputra
 
Lección 1 inicial
Lección 1 inicialLección 1 inicial
Lección 1 inicial
Rafael Tester
 
Sigrrhh
SigrrhhSigrrhh
Sigrrhh
Horacio74
 
Ss2012 hödl pasteur
Ss2012 hödl pasteurSs2012 hödl pasteur
Ss2012 hödl pasteur
xGianix
 
Kirchner + Robrecht-White Paper "IT-Systeme erfolgreich auswählen"
Kirchner + Robrecht-White Paper "IT-Systeme erfolgreich auswählen"Kirchner + Robrecht-White Paper "IT-Systeme erfolgreich auswählen"
Kirchner + Robrecht-White Paper "IT-Systeme erfolgreich auswählen"
Kirchner + Robrecht management consultants
 
Resultados de encuestas
Resultados de encuestasResultados de encuestas
Resultados de encuestas
skytly
 

Andere mochten auch (9)

Conceptos 2
Conceptos 2Conceptos 2
Conceptos 2
 
Incorporaciòn de las NNTT a la educación
Incorporaciòn de las NNTT a la educaciónIncorporaciòn de las NNTT a la educación
Incorporaciòn de las NNTT a la educación
 
Fs
FsFs
Fs
 
Zahlen übungen
Zahlen übungenZahlen übungen
Zahlen übungen
 
Lección 1 inicial
Lección 1 inicialLección 1 inicial
Lección 1 inicial
 
Sigrrhh
SigrrhhSigrrhh
Sigrrhh
 
Ss2012 hödl pasteur
Ss2012 hödl pasteurSs2012 hödl pasteur
Ss2012 hödl pasteur
 
Kirchner + Robrecht-White Paper "IT-Systeme erfolgreich auswählen"
Kirchner + Robrecht-White Paper "IT-Systeme erfolgreich auswählen"Kirchner + Robrecht-White Paper "IT-Systeme erfolgreich auswählen"
Kirchner + Robrecht-White Paper "IT-Systeme erfolgreich auswählen"
 
Resultados de encuestas
Resultados de encuestasResultados de encuestas
Resultados de encuestas
 

Ähnlich wie HTML5 Offline - Fallstricke für mobile Webseiten und WebApps

HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
Jonathan Weiß
 
BizSpark goes Cloud
BizSpark goes CloudBizSpark goes Cloud
BizSpark goes Cloud
Patric Boscolo
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
Stefan Kolb
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
Indiginox
 
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von AngrybirdCloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
AOE
 
Bernhard Wick - appserver.io - code.talks 2015
 Bernhard Wick - appserver.io - code.talks 2015 Bernhard Wick - appserver.io - code.talks 2015
Bernhard Wick - appserver.io - code.talks 2015
AboutYouGmbH
 
Logstash: Windows und Linux Logmanagement (Webinar vom 07.11.2014)
Logstash: Windows und Linux Logmanagement (Webinar vom 07.11.2014)Logstash: Windows und Linux Logmanagement (Webinar vom 07.11.2014)
Logstash: Windows und Linux Logmanagement (Webinar vom 07.11.2014)
NETWAYS
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
adesso AG
 
Ruby on Rails in a metro session
Ruby on Rails in a metro sessionRuby on Rails in a metro session
Ruby on Rails in a metro sessionVirttoo org
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
André Krämer
 
Meet Magento - High performance magento
Meet Magento - High performance magentoMeet Magento - High performance magento
Meet Magento - High performance magento
AOE
 
2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc
Daniel Fisher
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
kkramhoeft
 
Offline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmkaOffline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmkaStephan Hochdörfer
 
Was kommt nach den SPAs
Was kommt nach den SPAsWas kommt nach den SPAs
Was kommt nach den SPAs
QAware GmbH
 
Basta 2016 - Test- und Releaseumgebungen in der Cloud
Basta 2016 - Test- und Releaseumgebungen in der CloudBasta 2016 - Test- und Releaseumgebungen in der Cloud
Basta 2016 - Test- und Releaseumgebungen in der Cloud
Marc Müller
 
Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13Stephan Hochdörfer
 
Logstash: Open Source Log-Management (Webinar vom 20.02.2014)
Logstash: Open Source Log-Management (Webinar vom 20.02.2014)Logstash: Open Source Log-Management (Webinar vom 20.02.2014)
Logstash: Open Source Log-Management (Webinar vom 20.02.2014)
NETWAYS
 
Offline. Na und? Strategien für offlinefähige Applikationen in HTML5 - Herbst...
Offline. Na und? Strategien für offlinefähige Applikationen in HTML5 - Herbst...Offline. Na und? Strategien für offlinefähige Applikationen in HTML5 - Herbst...
Offline. Na und? Strategien für offlinefähige Applikationen in HTML5 - Herbst...Stephan Hochdörfer
 

Ähnlich wie HTML5 Offline - Fallstricke für mobile Webseiten und WebApps (20)

HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
BizSpark goes Cloud
BizSpark goes CloudBizSpark goes Cloud
BizSpark goes Cloud
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von AngrybirdCloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
 
GWT
GWTGWT
GWT
 
Bernhard Wick - appserver.io - code.talks 2015
 Bernhard Wick - appserver.io - code.talks 2015 Bernhard Wick - appserver.io - code.talks 2015
Bernhard Wick - appserver.io - code.talks 2015
 
Logstash: Windows und Linux Logmanagement (Webinar vom 07.11.2014)
Logstash: Windows und Linux Logmanagement (Webinar vom 07.11.2014)Logstash: Windows und Linux Logmanagement (Webinar vom 07.11.2014)
Logstash: Windows und Linux Logmanagement (Webinar vom 07.11.2014)
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
 
Ruby on Rails in a metro session
Ruby on Rails in a metro sessionRuby on Rails in a metro session
Ruby on Rails in a metro session
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
 
Meet Magento - High performance magento
Meet Magento - High performance magentoMeet Magento - High performance magento
Meet Magento - High performance magento
 
2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Offline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmkaOffline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmka
 
Was kommt nach den SPAs
Was kommt nach den SPAsWas kommt nach den SPAs
Was kommt nach den SPAs
 
Basta 2016 - Test- und Releaseumgebungen in der Cloud
Basta 2016 - Test- und Releaseumgebungen in der CloudBasta 2016 - Test- und Releaseumgebungen in der Cloud
Basta 2016 - Test- und Releaseumgebungen in der Cloud
 
Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13
 
Logstash: Open Source Log-Management (Webinar vom 20.02.2014)
Logstash: Open Source Log-Management (Webinar vom 20.02.2014)Logstash: Open Source Log-Management (Webinar vom 20.02.2014)
Logstash: Open Source Log-Management (Webinar vom 20.02.2014)
 
Offline. Na und? Strategien für offlinefähige Applikationen in HTML5 - Herbst...
Offline. Na und? Strategien für offlinefähige Applikationen in HTML5 - Herbst...Offline. Na und? Strategien für offlinefähige Applikationen in HTML5 - Herbst...
Offline. Na und? Strategien für offlinefähige Applikationen in HTML5 - Herbst...
 

HTML5 Offline - Fallstricke für mobile Webseiten und WebApps

  • 1. HTML5 offline Fallstricke für Web-Apps und Webseiten Ulrich Schmidt
  • 2. HTML5 offline 1.  Warum? 2.  Konzepte 3.  Techniken 4.  Schritte zur offline WebApp 5.  Fallstricke / Grenzen 6.  Empfehlung Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 3. HTML5 offline 1.  Warum? 2.  Konzepte 3.  Techniken 4.  Schritte zur offline WebApp 5.  Fallstricke / Grenzen 6.  Empfehlung Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 4. Wo? - T-Mobile - UMTS http://www.t-mobile.de/netzabdeckung/ Warum? © 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  • 5. Wo? - T-Mobile - EDGE http://www.t-mobile.de/netzabdeckung/ Warum? © 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  • 6. Wo? - Orte •  Meeting •  Silvester •  Restaurant •  Festival •  Im Supermarkt •  Messen •  In der U-Bahn/Zug •  Im Ausland •  Auf dem Land •  Im Urlaub •  Im Flugzeug Warum? © 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  • 7. Definition "offline" "Als offline wird der Zustand bezeichnet, in dem ein Gerät, das über eine Kommunikationsschnittstelle verfügt, nicht bereit ist, Daten über diese Schnittstelle zu empfangen oder zu senden. Das Gegenteil davon ist online." (http://de.wikipedia.org/wiki/Offline 26.03.2011) Warum? © 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  • 8. HTML5 offline 1.  Warum? 2.  Konzepte 3.  Techniken 4.  Schritte zur offline WebApp 5.  Fallstricke / Grenzen 6.  Empfehlung Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 9. Unterschiede zwischen Daten und Funktion aktives Offline passives Offline •  Notiz •  HTML •  Artikeltext •  CSS •  Einstellungen •  JavaScript •  Inhalte Daten werden aktiv im Alle Frontend- und Client gespeichert Logikdaten werden für die Offlinenutzung im Client gespeichert Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 10. Use-Cases Daten im Offline Site WebClient Client Einstellungen Client Client Client Daten Client Client Server Content Client Client Server Layout Server Client Client Logik Server Client Client Frontend Server Client Client Initiale Server Server Server Auslieferung Warum? © 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  • 11. HTML5 offline 1.  Warum? 2.  Konzepte 3.  Techniken 4.  Schritte zur offline WebApp 5.  Fallstricke / Grenzen 6.  Empfehlung Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 12.
  • 14. localStorage Was ist das? •  Persistenter Speicher für Text •  Wird als Alternative zu Cookies gesehen Unterstützt von •  Allen gängigen Browsern Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 15. localStorage var notes = JSON.parse(localStorage.getItem("notes")); var note = { text : "Meine Notiz", timestamp : 1234567890 } notes.push(note); localStorage.setItem("notes",JSON.stringify(notes)); Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 16. localStorage Pros Cons •  Support aller Browser •  Langsam bei großen •  Einfach Datenmengen •  Schnelles Setup •  Nicht durchsuchbar •  Text muss manuell strukturierter werden •  Synchrone Verarbeitung Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 17. WebSQL Was ist das? •  deprecated •  strukturierte relationale Datenbank Unterstützt von •  iOS seit 3.2 •  Android seit 2.1 •  Opera Mobile seit 11.0 Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 18. WebSQL var note = { text : "Meine Notiz", timestamp : 1234567890 } db.transaction(function(tx) { tx.executeSql( "insert into notes " + "(text, timestamp) values (?,?);", [note.text, note.timestamp], handler, db.onError ); }); Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 19. WebSQL Pros Cons •  Support von allen •  Deprecated gängigen Browsern •  Relationales •  Asynchron Datenbank Knowhow •  Performance notwendig •  Struktur der Daten •  Einfache Migration von bestehenden Serverdatenbanken Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 20. IndexedDB Was ist das? •  Konsequente Weiterentwicklung von localStorage und WebSQL •  Objekte können direkt gespeichert werden Unterstützt von •  Firefox ab 4.0, Chrome ab 11.0, IE wahrscheinlich ab 10.0 Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 21. IndexedDB var note = { text : "Meine Notiz", timestamp : 1234567890 } var openRequest = indexedDB.open("notes", "MyNotes"); openRequest.onsuccess = function(ev) { db = ev.target.result; var speicher = db.transaction( [],IDBTransaction.READ_WRITE, 0 ).objectStore("notes"); } var request = speicher.put(note); request.onsuccess = function(fx) {console.log('saved');}; Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 22. IndexedDB Pros Cons •  Asynchron •  Keine Unterstützung •  Objekte können ohne in mobilen Browsern Vorbereitung •  Kann komplex gespeichert werden werden •  Durchsuchbar •  Keine fixen •  Einfach benutzbar Datenstrukturen Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 23. FileSystem API Was ist das? •  Speicher für Binärdateien •  Dateien werden im Dateisystem abgelegt Unterstützt von •  Chrome seit 13 voll implementiert Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 24. FileSystem API var note = { text : "Meine Notiz", timestamp : 1234567890 } fs.root.getFile("notes/" + note.timestamp, {create: true, exclusive: true}, function(file) { file.createWriter(function(writer) { writer.onerror = fileStore.onError; var bb = new WebKitBlobBuilder; bb.append(JSON.stringify(note)); writer.write(bb.getBlob("text/plain")); handler(); }, fileStore.onError); }, fileStore.onError); Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 25. FileSystem API Pros Cons •  Speicher für große •  Aktuell nur für den Dateien Chrome verfügbar •  Asynchron •  Nicht durchsuchbar •  Nicht für Objekte geeignet Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 26.
  • 27. passives Offline e h tionCac Applica
  • 28. ApplicationCache Was ist das? •  Speicher für Web-Ressourcen •  Webseiten können komplett offline dargestellt werden Unterstützt von •  Allen gängigen Browsern Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 29. ApplicationCache CACHE MANIFEST #version 1 CACHE: /script.js /bild.png http://example.com/css/styles.css FALLBACK: / /offline.html NETWORK: * Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 30. ApplicationCache Pros Cons • Alle Dateien werden • Komplexes herunter geladen Updateverhalten • Schnelles Setup • Schwierig Online und • Guter Browsersupport Offline zu kombinieren • EventHandler um auf • Noch nicht in allen Ereignisse reagieren zu Browsern strikt können implementiert • Für Webentwickler ein seltsames Format Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 31. HTML5 offline 1.  Warum? 2.  Konzepte 3.  Techniken 4.  Schritte zur offline WebApp 5.  Fallstricke / Grenzen 6.  Empfehlung Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 32. Schritte zur offline WebApp 1. Schritt - Layout und Struktur Erstellen einer "normalen" WebApp 2. Schritt - localStorage Implementierung der lokalen Datenhaltung 3. Schritt - ApplicationCache Alle Daten und Assets lokal ablegen Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 33. 1. Schritt - Die WebApp Struktur index.html Layout style.css Logik script.js Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 34. 1. Schritt - Die WebApp - index.html <!DOCTYPE HTML> <html> <head> <link type="text/css" href="main.css"/> <script src="script.js"></script> </head> <body> ... </body> </html> Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 35. 1. Schritt - Die WebApp - style.css body { background-color: #666; color: #fff; } Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 36. 1. Schritt - Die WebApp - script.js function addNote() { /* Soll eine neue Notiz hinzufügen */ } Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 37. 1. Schritt - Die WebApp - online ... ... ... ... ... ... Seite läd... Notiz + Notiz + Warum? © 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  • 38. 1. Schritt - Die WebApp - offline ... ... ... Seite nicht Seite läd... gefunden. Notiz + Warum? © 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  • 39. 2. Schritt - localStorage Was ist das? •  Permanenter Speicher für Text •  Zugriff nur über die selbe "Domain" •  Mobil am weitesten verbreitet •  Einfach zu nutzen Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 40. 2. Schritt - localStorage // liest ein Element aus dem Speicher localStorage.getItem("key"); // schreibt ein Element in den Speicher localStorage.setItem("key","value"); // löscht ein Element aus dem Speicher localStorage.removeItem(“key“); // löscht den gesamten Speicher localStorage.clear(); Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 41. 2. Schritt - localStorage localStorage.setItem('key', JSON.stringify( { vara : 'a', varb : 'b' } ) ); var item = JSON.parse( localStorage.getItem('key') ); Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 42. 2. Schritt - localStorage ... ... ... ... ... ... Notiz + Notiz + Warum? © 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  • 43. 2. Schritt - localStorage Seite nicht gefunden. Warum? © 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  • 44. 3. Schritt - ApplicationCache Was ist das? •  Ein im Browser liegender permanenter Cache. •  Ressourcen werden unter dem Namen ihrer URL dort abgelegt. •  Ressourcen im ApplicationCache werden nicht mehr vom Webserver abgerufen. Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 45. 3. Schritt - ApplicationCache - index.html <!DOCTYPE HTML> <html mainfest="cache.manifest"> <head> <link type="text/css" href="main.css"/> <script src="script.js"></script> </head> <body> ... </body> </html> Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 46. 3. Schritt - ApplicationCache - Manifest CACHE MANIFEST /script.js /main.css Achtung: Das einbindende Dokument wird immer automatisch im Cache abgelegt. Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 47. 3. Schritt - ApplicationCache - Kommentar CACHE MANIFEST # Kommentar /script.js /main.css Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 48. 3. Schritt - ApplicationCache - Fallback CACHE MANIFEST /script.js /main.css FALLBACK: /profile/ /noprofile.html / /offline.html Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 49. 3. Schritt - ApplicationCache - Network CACHE MANIFEST /script.js /main.css FALLBACK: / /offline.html NETWORK: * Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 50. 3. Schritt - ApplicationCache ... ... ... ... ... ... Notiz + Notiz + Warum? © 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  • 51. HTML5 offline 1.  Warum? 2.  Konzepte 3.  Techniken 4.  Schritte zur WebApp 5.  Fallstricke / Grenzen 6.  Empfehlung Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 52. MIME-Type AddType text/cache-manifest .manifest Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 53. Bilder Assets Inhalte •  Logo •  Teaserbilder •  Designelemente •  Artikelbilder •  Sprites •  Stylesheet Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 54. Bilder Asset-Bilder  ApplicationCache Content-Bilder  localStorage (Base64 encoded) var image = JSON.parse(localStorage.getItem('myImage')); return '<img src="data:image/'+image.type+ ';base64,'+image.data+'"/>'; Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 55. Bilder OImageRequest = function(_url) { this.xhr = new XMLHttpRequest(); var iid = md5(_url); //md5 or other id this.xhr.open('GET', _url, true); this.xhr.overrideMimeType('text/plain; charset=x-user-defined'); // important this.xhr.onreadystatechange = function(e) { if (this.readyState==4&&this.status==200) { OImages.set(iid,'jpeg',this.responseText); } } this.xhr.send(); } Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 56. Bilder OImages = { prefix : 'OImage', set : function(_id,_type,_data) { localStorage.setItem(this.prefix+_id, JSON.stringify( { id : _id, type : _type, data : Base64.encode(_data) })); }, get : function(_id) {... } } Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 57. Bilder OImages = { prefix : 'OImage', set : function(_id,_type,_data) {... }, get : function(_id) { var imageStr = localStorage.getItem(this.prefix+_id); var image = JSON.parse(imageStr); if(!image.type) { image.type = "png"; } return '<img src="data:image/'+image.type +';base64,'+image.data+'"/>'; } } Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 58. ApplicationCache - Update •  Änderungen von Dateien werden ignoriert •  Updates des ApplicationCache werden nur geladen, wenn das CacheManifest geändert wurde. Dabei ist der Inhalt relevant. •  Caching-Header werden ignoriert Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 59. ApplicationCache - Update CACHE MANIFEST # version 1.1 CACHE: /script.js Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 60. ApplicationCache - Update - Schritt 1 Laden der Seite Seite im ja AppCache? nein Laden der Seite und Seite und Assets Assets aus dem werden vom Server ApplicationCache abgeholt Laden des CacheManifest Warum? © 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  • 61. ApplicationCache - Update - Schritt 2 Laden des CacheManifest Änderungen am CacheManifest nein ja Laden der Seite und Ende Assets aus dem ApplicationCache Warum? © 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  • 62. ApplicationCache - Update - Schritt 3 Laden des CacheManifest Laden des CacheManifest Änderungen am Änderungen am CacheManifest CacheManifest ja nein Laden der Seite und Ende Assets aus dem ApplicationCache Warum? © 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  • 63. Updates - manuelles Update if (window.applicationCache) { applicationCache.addEventListener('updateready', function() { if (confirm('Aktualisiert! Neu laden?')) { window.location.reload(); } }); } Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 64. ApplicationCache - Update - Gesamtbild Laden der Seite Seite im AppCache? ja nein Laden des Laden der Seite und Assets aus dem Seite und Assets CacheManifest ApplicationCache werden vom Server abgeholt Laden des Änderungen CacheManifest am Laden der Seite und CacheManife Assets aus dem st ApplicationCache ja Änderung ja nein en am Error CacheMa nifest Ende nein Warum? © 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  • 65. Updates - EventListener ApplicationCache.addEventListener(handle,function,false) cached: nach dem ersten Speichern eines CacheManifest checking: Start des Ladens eines Manifests. downloading: Start des Landes neuer Ressourcen. error: 404 des Manifest oder geändertes Manifest während des Downloads, Abbruch noupdate: Update nicht erforderlich (keine Änderung) obsolete: 404 -> Der ApplicationCache wird gelöscht progress: Event für jede Ressource die geladen wird. updateready: Letztes Event, wenn alle Ressourcen geladen sind. Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 66. Bin ich offline? if (navigator.onLine) { // online } else { // offline } window.addEventListener('online', function(e) { // aktiv online gehen }, false); window.addEventListener('offline', function(e) { // aktiv offline gehen }, false); Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 67. Weitere Fallstricke ApplicationCache •  Einbindene Seite wird immer gecached •  HTTP Cachingregeln greifen nicht •  Bei einem Fehler (404 oder Syntax) wird nichts gecached Richtige Syntax und Timing ist alles Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 68. Browsersupport WebSQL iOS, Android (2+), BB (6+), MeeGo 1.2, WebOS IndexedDB Chrome (Android 4), FF (Android) FileSystem API Android (3+), Chrome, BB Playbook, localStorage Alle gängigen, außer Symbian und Windows Phone ApplicationCache Alle gängigen, außer Symbian und Windows Phone Mehr Infos unter http://mobilehtml5.org/ Warum? © 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  • 69. Größenbeschränkungen (z.T. erweiterbar) WebSQL 5 MB IndexedDB 5 MB FileSystem API 5 MB localStorage 2,5 MB (iOS und Android) bzw. 5 MB ApplicationCache 5 MB Warum? © 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  • 70. HTML5 offline 1.  Warum? 2.  Konzepte 3.  Techniken 4.  Schritte zu einer WebApp 5.  Fallstricke / Grenzen 6.  Empfehlung Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 71. Meine Empfehlung •  localStorage um Cookies zu vermeiden und (kleine) Daten zu speichern •  ApplicationCache um das Laden von Seiten zu beschleunigen oder mobile Seiten vollständig offline zur Verfügung zu stellen. •  WebSQL mit Einschränkungen und wenn man nur auf ein OS beschränkt ist. Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 72. FAZIT •  Durch diese HTML5 Feature lassen sich heute schon Webseiten trotz Funklöchern beschleunigen. •  Offline erfordert ein eigenes Konzept. •  Es sollten nur "geringe" Datenmengen gespeichert werden. •  Bis es einen schnell implementierbaren Standard für alle Systeme gibt, wird noch einige Zeit vergehen. •  HTML5 ist „work in progress“ Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 73. HTML5 offline 1.  Warum? 2.  Konzepte 3.  Techniken 4.  Schritte zu einer WebApp 5.  Fallstricke / Grenzen 6.  Empfehlungen Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • 75.
  • 76. ENDE Bilder von flickr unter der Creative Commons