Suche senden
Hochladen
Offline-Strategien für HTML5 Web Applikationen - wmka
•
2 gefällt mir
•
1,938 views
Stephan Hochdörfer
Folgen
Technologie
Design
Melden
Teilen
Melden
Teilen
1 von 33
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13
Stephan Hochdörfer
Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13
Stephan Hochdörfer
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
Wartbare Oberflächentests mit Open-Source-Software
Wartbare Oberflächentests mit Open-Source-Software
Oliver Libutzki
Offline Strategies for HTML5 Web Applications - ipc13
Offline Strategies for HTML5 Web Applications - ipc13
Stephan Hochdörfer
Offline strategies for HTML5 web applications - IPC12
Offline strategies for HTML5 web applications - IPC12
Stephan Hochdörfer
Testing untestable code - IPC12
Testing untestable code - IPC12
Stephan Hochdörfer
A Phing fairy tale - ConFoo13
A Phing fairy tale - ConFoo13
Stephan Hochdörfer
Empfohlen
Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13
Stephan Hochdörfer
Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13
Stephan Hochdörfer
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
Wartbare Oberflächentests mit Open-Source-Software
Wartbare Oberflächentests mit Open-Source-Software
Oliver Libutzki
Offline Strategies for HTML5 Web Applications - ipc13
Offline Strategies for HTML5 Web Applications - ipc13
Stephan Hochdörfer
Offline strategies for HTML5 web applications - IPC12
Offline strategies for HTML5 web applications - IPC12
Stephan Hochdörfer
Testing untestable code - IPC12
Testing untestable code - IPC12
Stephan Hochdörfer
A Phing fairy tale - ConFoo13
A Phing fairy tale - ConFoo13
Stephan Hochdörfer
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
Ulrich Schmidt
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
kkramhoeft
2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache
Daniel Fisher
Hdc2012 cordova-präsi
Hdc2012 cordova-präsi
DeveloperConference
Blank Template für Joomla!
Blank Template für Joomla!
Alexander Schmidt
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Benjamin Schmid
JAMstack / Static Site Generators
JAMstack / Static Site Generators
DietrichRordorf
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
SEARCH ONE
Ruby on Rails SS09 06
Ruby on Rails SS09 06
Daniel Dengler
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
Felix Sasaki
HTML5 Storage
HTML5 Storage
adesso AG
Andy bosch-jsf-javascript
Andy bosch-jsf-javascript
Andy Bosch
Wordpress on steroids
Wordpress on steroids
Blogwerk AG
.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1
Manfred Steyer
Christian heilmann html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platform
Christian Heilmann
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
Patrick Lauke
Sencha Touch und PhoneGap
Sencha Touch und PhoneGap
Indiginox
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
Karionis
Web-API Design in Java
Web-API Design in Java
OPEN KNOWLEDGE GmbH
Echte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Jens Grochtdreis
Phing for power users - frOSCon8
Phing for power users - frOSCon8
Stephan Hochdörfer
Offline strategies for HTML5 web applications - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8
Stephan Hochdörfer
Weitere ähnliche Inhalte
Ähnlich wie Offline-Strategien für HTML5 Web Applikationen - wmka
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
Ulrich Schmidt
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
kkramhoeft
2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache
Daniel Fisher
Hdc2012 cordova-präsi
Hdc2012 cordova-präsi
DeveloperConference
Blank Template für Joomla!
Blank Template für Joomla!
Alexander Schmidt
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Benjamin Schmid
JAMstack / Static Site Generators
JAMstack / Static Site Generators
DietrichRordorf
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
SEARCH ONE
Ruby on Rails SS09 06
Ruby on Rails SS09 06
Daniel Dengler
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
Felix Sasaki
HTML5 Storage
HTML5 Storage
adesso AG
Andy bosch-jsf-javascript
Andy bosch-jsf-javascript
Andy Bosch
Wordpress on steroids
Wordpress on steroids
Blogwerk AG
.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1
Manfred Steyer
Christian heilmann html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platform
Christian Heilmann
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
Patrick Lauke
Sencha Touch und PhoneGap
Sencha Touch und PhoneGap
Indiginox
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
Karionis
Web-API Design in Java
Web-API Design in Java
OPEN KNOWLEDGE GmbH
Echte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Jens Grochtdreis
Ähnlich wie Offline-Strategien für HTML5 Web Applikationen - wmka
(20)
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache
Hdc2012 cordova-präsi
Hdc2012 cordova-präsi
Blank Template für Joomla!
Blank Template für Joomla!
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
JAMstack / Static Site Generators
JAMstack / Static Site Generators
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
Ruby on Rails SS09 06
Ruby on Rails SS09 06
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
HTML5 Storage
HTML5 Storage
Andy bosch-jsf-javascript
Andy bosch-jsf-javascript
Wordpress on steroids
Wordpress on steroids
.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1
Christian heilmann html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platform
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
Sencha Touch und PhoneGap
Sencha Touch und PhoneGap
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
Web-API Design in Java
Web-API Design in Java
Echte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Mehr von Stephan Hochdörfer
Phing for power users - frOSCon8
Phing for power users - frOSCon8
Stephan Hochdörfer
Offline strategies for HTML5 web applications - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8
Stephan Hochdörfer
Offline Strategies for HTML5 Web Applications - oscon13
Offline Strategies for HTML5 Web Applications - oscon13
Stephan Hochdörfer
Real World Dependency Injection - oscon13
Real World Dependency Injection - oscon13
Stephan Hochdörfer
Dependency Injection in PHP - dwx13
Dependency Injection in PHP - dwx13
Stephan Hochdörfer
Your Business. Your Language. Your Code - dpc13
Your Business. Your Language. Your Code - dpc13
Stephan Hochdörfer
Phing for power users - dpc_uncon13
Phing for power users - dpc_uncon13
Stephan Hochdörfer
Real World Dependency Injection - phpugffm13
Real World Dependency Injection - phpugffm13
Stephan Hochdörfer
Testing untestable code - ConFoo13
Testing untestable code - ConFoo13
Stephan Hochdörfer
Offline strategies for HTML5 web applications - ConFoo13
Offline strategies for HTML5 web applications - ConFoo13
Stephan Hochdörfer
Offline-Strategien für HTML5Web Applikationen - WMMRN12
Offline-Strategien für HTML5Web Applikationen - WMMRN12
Stephan Hochdörfer
Große Systeme, lose Kopplung, Spaß bei der Arbeit! - WDC12
Große Systeme, lose Kopplung, Spaß bei der Arbeit! - WDC12
Stephan Hochdörfer
Offline strategies for HTML5 web applications - pfCongres2012
Offline strategies for HTML5 web applications - pfCongres2012
Stephan Hochdörfer
Wie Software-Generatoren die Welt verändern können - Herbstcampus12
Wie Software-Generatoren die Welt verändern können - Herbstcampus12
Stephan Hochdörfer
Testing untestable code - Herbstcampus12
Testing untestable code - Herbstcampus12
Stephan Hochdörfer
Testing untestable code - oscon 2012
Testing untestable code - oscon 2012
Stephan Hochdörfer
Introducing a Software Generator Framework - JAZOON12
Introducing a Software Generator Framework - JAZOON12
Stephan Hochdörfer
The state of DI - DPC12
The state of DI - DPC12
Stephan Hochdörfer
Separation of concerns - DPC12
Separation of concerns - DPC12
Stephan Hochdörfer
Real World Dependency Injection SE - phpugrhh
Real World Dependency Injection SE - phpugrhh
Stephan Hochdörfer
Mehr von Stephan Hochdörfer
(20)
Phing for power users - frOSCon8
Phing for power users - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8
Offline Strategies for HTML5 Web Applications - oscon13
Offline Strategies for HTML5 Web Applications - oscon13
Real World Dependency Injection - oscon13
Real World Dependency Injection - oscon13
Dependency Injection in PHP - dwx13
Dependency Injection in PHP - dwx13
Your Business. Your Language. Your Code - dpc13
Your Business. Your Language. Your Code - dpc13
Phing for power users - dpc_uncon13
Phing for power users - dpc_uncon13
Real World Dependency Injection - phpugffm13
Real World Dependency Injection - phpugffm13
Testing untestable code - ConFoo13
Testing untestable code - ConFoo13
Offline strategies for HTML5 web applications - ConFoo13
Offline strategies for HTML5 web applications - ConFoo13
Offline-Strategien für HTML5Web Applikationen - WMMRN12
Offline-Strategien für HTML5Web Applikationen - WMMRN12
Große Systeme, lose Kopplung, Spaß bei der Arbeit! - WDC12
Große Systeme, lose Kopplung, Spaß bei der Arbeit! - WDC12
Offline strategies for HTML5 web applications - pfCongres2012
Offline strategies for HTML5 web applications - pfCongres2012
Wie Software-Generatoren die Welt verändern können - Herbstcampus12
Wie Software-Generatoren die Welt verändern können - Herbstcampus12
Testing untestable code - Herbstcampus12
Testing untestable code - Herbstcampus12
Testing untestable code - oscon 2012
Testing untestable code - oscon 2012
Introducing a Software Generator Framework - JAZOON12
Introducing a Software Generator Framework - JAZOON12
The state of DI - DPC12
The state of DI - DPC12
Separation of concerns - DPC12
Separation of concerns - DPC12
Real World Dependency Injection SE - phpugrhh
Real World Dependency Injection SE - phpugrhh
Offline-Strategien für HTML5 Web Applikationen - wmka
1.
2.
Offline Strategien für
HTML5 Web Applikationen Über mich Stephan Hochdörfer Head of IT der bitExpert AG, Mannheim S.Hochdoerfer@bitExpert.de @shochdoerfer
3.
4.
5.
6.
7.
8.
Was bedeutet „offline“? Offline
Strategien für HTML5 Web Applikationen Application Cache vs. Offline Storage
9.
App Cache für
statische Ressourcen Offline Strategien für HTML5 Web Applikationen <!DOCTYPE html> <html lang="en"> HTML Page:
10.
CACHE MANIFEST js/app.js css/app.css favicon.ico http://someotherdomain.com/image.png <!DOCTYPE html> <html
lang="en" manifest="cache.manifest"> App Cache für statische Ressourcen Offline Strategien für HTML5 Web Applikationen HTML Page: cache.manifest (Content-Type: text/cache-manifest):
11.
App Cache –
Was darf sollte gecacht werden? Offline Strategien für HTML5 Web Applikationen Ja: Schriften Startbild Applikationsicon Einstiegsseite Fallbackseite Nein: CSS HTML Javascript
12.
13.
Dynamische Daten lokal
speichern... Offline Strategien für HTML5 Web Applikationen Web Storage, Web SQL Database, IndexedDB, File API
14.
Web Storage: 2
Möglichkeiten Offline Strategien für HTML5 Web Applikationen localStorage vs. sessionStorage
15.
function add(item) { try { // store object as string localStorage.setItem(item.id, JSON.stringify(item) ); } catch(ex) { console.log(ex); } } Web Storage: Datensatz
hinzufügen Offline Strategien für HTML5 Web Applikationen
16.
function remove (id) { try { localStorage.removeItem(id); } catch(ex) { console.log(ex); } } Web Storage: Datensatz
löschen Offline Strategien für HTML5 Web Applikationen
17.
Web SQL Database Offline
Strategien für HTML5 Web Applikationen Eine lokale SQL Datenbank auf SQLite Basis.
18.
// initalize the database connection var db = openDatabase('todo', '1.0', 'Todo Database', 5 * 1024 * 1024 ); db.transaction(function (tx) { tx.executeSql( 'CREATE TABLE IF NOT EXISTS todo '+ '(id INTEGER PRIMARY KEY ASC, todo TEXT)', [], onSuccess, onError ); }); Web SQL Database:
Datenbank erzeugen Offline Strategien für HTML5 Web Applikationen
19.
function add(item) { db.transaction(function(tx) { tx.executeSql( 'INSERT INTO todo (todo) VALUES (?)', [ item.todo ], onSuccess, onError ); }); } Web SQL Database:
Datensatz hinzufügen Offline Strategien für HTML5 Web Applikationen
20.
function remove(id) { db.transaction(function (tx) { tx.executeSql( 'DELETE FROM todo WHERE id = ?', [ id ], onSuccess, onError ); }); } Web SQL Database:
Datensatz löschen Offline Strategien für HTML5 Web Applikationen
21.
IndexedDB Offline Strategien für
HTML5 Web Applikationen Kompromiss aus Web Storage und Web SQL Database.
22.
var db = null; var request = indexedDB.open("todo"); request.onfailure = onError; request.onsuccess = function(e) { db = request.result; var v = "1.0"; if(v != db.version) { var verRequest = db.setVersion(v); verRequest.onfailure = onError; verRequest.onsuccess = function(e) { var store = db.createObjectStore( "todo", { keyPath: "id", autoIncrement: true } ); e.target.transaction.oncomplete = function() {}; }; } }; IndexedDB: Objektspeicher erzeugen Offline
Strategien für HTML5 Web Applikationen
23.
function add(item) { try { var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE); var store = trans.objectStore("todo"); var request = store.put({ "todo": item.todo, }); } catch(ex) { onError(ex); } } IndexedDB: Datensatz hinzufügen Offline
Strategien für HTML5 Web Applikationen
24.
function remove(id) { try { var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE); var store = trans.objectStore("todo"); var request = store.delete(id); } catch(ex) { onError(ex); } } IndexedDB: Datensatz löschen Offline
Strategien für HTML5 Web Applikationen
25.
File API Offline Strategien
für HTML5 Web Applikationen FileReader API und FileWriter API
26.
// request quota for persistent store window.webkitStorageInfo.requestQuota( PERSISTENT, size, function(grantedBytes) { window.requestFileSystem( PERSISTENT, grantedBytes, function(fs) { // @TODO: access filesystem } } } } File API: Quota
anfordern Offline Strategien für HTML5 Web Applikationen
27.
Offline Strategien für
HTML5 Web Applikationen
28.
function writeToFile(fs, item) { fs.root.getFile( 'todo.txt', { create: true }, function(fileEntry) { fileEntry.createWriter( function(fileWriter) { var bb = new window.BlobBuilder(); bb.append(JSON.stringify(item)+ "n"); fileWriter.seek(fileWriter.length); fileWriter.write( bb.getBlob('text/plain')); }, onError ); }, onError ); }; File API: Daten
hinzufügen Offline Strategien für HTML5 Web Applikationen
29.
Datensynchronisation Offline Strategien für
HTML5 Web Applikationen PouchDB, the JavaScript Database that Syncs!
30.
31.
Browserunterstützung? Offline Strategien für
HTML5 Web Applikationen App Cache Web Storage WebSQL IndexedDB File API IE 10.0 8.0 10.0 10.0 - Firefox 11.0 11.0 11.0 11.0 19.0 Chrome 18.0 18.0 18.0 18.0 18.0 Safari 5.1 5.1 5.1 - - Opera 12.1 12.1 12.1 - - iOS Safari 3.2 3.2 3.2 - - Android 2.1 2.1 2.1 - - Quelle: http://caniuse.com
32.
Vielen Dank!
33.
Verweise Offline Strategien für
HTML5 Web Applikationen Quellcode: http://github.com/bitExpert/html5-offline PouchDB: http://pouchdb.com/ Hoodie: http://hood.ie/
Jetzt herunterladen