SlideShare a Scribd company logo
1 of 103
Download to read offline
Offline strategies for
HTML5 web applications
Stephan Hochdörfer, bitExpert AG
Offline strategies for HTML5 web applications
About me
 Stephan Hochdörfer
 Head of IT at bitExpert AG, Germany
 enjoying PHP since 1999
 S.Hochdoerfer@bitExpert.de
 @shochdoerfer
Offline strategies for HTML5 web applications
Storing data on the client? Seriously?
Offline strategies for HTML5 web applications
How did we solve these issues in the past?
Offline strategies for HTML5 web applications
Cookies are tasty, but not awesome!
Offline strategies for HTML5 web applications
IE DHTML behaviours, not sweet!
Offline strategies for HTML5 web applications
Flash Cookies are yummie!
Offline strategies for HTML5 web applications
Google Gears made it right. Sort of.
Can I haz alternative?
Offline strategies for HTML5 web applications
Offline strategies for HTML5 web applications
to the rescue!
Offline strategies for HTML5 web applications
[...] we take the next step,
announcing 2014 as the target for
Recommendation.
Jeff Jaffe, Chief Executive Officer, World Wide Web Consortium
Offline strategies for HTML5 web applications
Offline strategies for HTML5 web applications
What does „offline“ mean?
Offline strategies for HTML5 web applications
What does „offline“ mean?
Offline strategies for HTML5 web applications
Application vs. Content
What does „offline“ mean?
Offline strategies for HTML5 web applications
Application Cache vs. Offline Storage
App Cache for caching static resources
Offline strategies for HTML5 web applications
HTML Page:
<!DOCTYPE html>
<html lang="en">
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 for caching static resources
Offline strategies for HTML5 web applications
HTML Page:
cache.manifest (served with Content-Type: text/cache-manifest):
App Cache for caching static resources
Offline strategies for HTML5 web applications
CACHE MANIFEST
# 2013-07-25
NETWORK:
data.php
CACHE:
/main/home
/main/app.js
/settings/home
/settings/app.js
http://myhost/logo.png
http://myhost/check.png
http://myhost/cross.png
App Cache for caching static resources
Offline strategies for HTML5 web applications
CACHE MANIFEST
# 2013-07-25
FALLBACK:
/ /offline.html
NETWORK:
*
App Cache Scripting
Offline strategies for HTML5 web applications
// events fired by window.applicationCache
window.applicationCache.onchecking = function(e)
{log("Checking for updates");}
window.applicationCache.onnoupdate = function(e)
{log("No updates");}
window.applicationCache.onupdateready = function(e)
{log("Update ready");}
window.applicationCache.onobsolete = function(e)
{log("Obsolete");}
window.applicationCache.ondownloading = function(e)
{log("Downloading");}
window.applicationCache.oncached = function(e)
{log("Cached");}
window.applicationCache.onerror = function(e)
{log("Error");}
// Log each file
window.applicationCache.onprogress = function(e) {
log("Progress: downloaded file " + counter);
counter++;
};
App Cache Scripting
Offline strategies for HTML5 web applications
// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {
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
window.applicationCache.swapCache();
if (confirm('New version is available. Load it?)) {
window.location.reload();
}
} else {
// Manifest didn't change...
}
}, false);
}, false);
App Cache – Some gotchas!
Offline strategies for HTML5 web applications
App Cache – Some gotchas!
Offline strategies for HTML5 web applications
1. Files are always(!) served from the
application cache.
App Cache – Some gotchas!
Offline strategies for HTML5 web applications
2. The application cache only updates
if the content of the manifest itself
has changed!
App Cache – Some gotchas!
Offline strategies for HTML5 web applications
3. If any of the files listed in the
CACHE section can't be retrieved, the
entire cache will be disregarded.
App Cache – Some gotchas!
Offline strategies for HTML5 web applications
4. If the manifest file itself can't be
retrieved, the cache will ignored!
App Cache – Some gotchas!
Offline strategies for HTML5 web applications
5. Non-cached resources will not load
on a cached page!
App Cache – Some gotchas!
Offline strategies for HTML5 web applications
6. The page needs to be reloaded,
otherwise the new resources do not
show up!
App Cache – Some gotchas!
Offline strategies for HTML5 web applications
7. To avoid the risk of caching
manifest files set expires headers!
App Cache – What to cache?
Offline strategies for HTML5 web applications
Yes:

Fonts

Splash image

App icon

Entry page

Fallback bootstrap
No:

CSS

HTML

Javascript
App Cache – What to cache?
Offline strategies for HTML5 web applications
Use the app cache for
„static content“ only!
Data URI Schema
Offline strategies for HTML5 web applications
<!DOCTYPE HTML>
<html>
 <head>
  <title>The Data URI scheme</title>
  <style type="text/css">
  ul.checklist li {
    margin­left: 20px;
    background: white 
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAA
AFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAA
O9TXL0Y4OHwAAAABJRU5ErkJggg==') no­repeat scroll left 
top;
}
  </style>
 </head>
 <body>
  <img 
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAA
AFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAA
O9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
 </body>
</html>
Data URI Schema
Offline strategies for HTML5 web applications
Storing dynamic data locally (in HTML5)
Offline strategies for HTML5 web applications
Offline strategies for HTML5 web applications
Example: Todolist application
Storing dynamic data locally (in HTML5)
Offline strategies for HTML5 web applications
Find the sources here:
github.com/bitExpert/html5-offline
Storing dynamic data locally (in HTML5)
Offline strategies for HTML5 web applications
Web Storage, Web SQL Database,
IndexedDB, File API
Web Storage
Offline strategies for HTML5 web applications
Web Storage
Offline strategies for HTML5 web applications
Very convenient form of offline
storage: simple key-value store
Web Storage: 2 different types
Offline strategies for HTML5 web applications
localStorage vs. sessionStorage
function add(item) {
try {
// for a new item set id
if((typeof item.id === "undefined")
|| (null == item.id) || ("" == item.id)) {
item.id = get_lastIndex() + 1;
}
// store object as string
localStorage.setItem(item.id,
JSON.stringify(item)
);
// update the index
set_lastIndex(item.id);
}
catch(ex) {
console.log(ex);
}
}
Web Storage: Add item
Offline strategies for HTML5 web applications
Web Storage: Modify item
Offline strategies for HTML5 web applications
function modify(item) {
try {
// store object as string
localStorage.setItem(item.id,
JSON.stringify(item)
);
}
catch(ex) {
console.log(ex);
}
}
Web Storage: Remove item
Offline strategies for HTML5 web applications
function remove (id) {
try {
localStorage.removeItem(id);
}
catch(ex) {
console.log(ex);
}
}
Web Storage: Read items
Offline strategies for HTML5 web applications
function read() {
try {
var lastIdx = get_lastIndex();
for(var i = 1; i <= lastIdx; i++) {
if(null !== localStorage.getItem(i)) {
// parse and render item
var item = JSON.parse(
localStorage.getItem(i)
);
}
}
}
catch(ex) {
console.log(ex);
}
}
Web Storage: How to use sessionStorage?
Offline strategies for HTML5 web applications
Web Storage: How to use sessionStorage?
Offline strategies for HTML5 web applications
Replace „localStorage“
with „sessionStorage“
function add(item) {
try {
// for a new item set id
if((typeof item.id === "undefined")
|| (null == item.id) || ("" == item.id)) {
item.id = get_lastIndex() + 1;
}
// store object as string
sessionStorage.setItem(item.id,
JSON.stringify(item)
);
// update the index
set_lastIndex(item.id);
}
catch(ex) {
console.log(ex);
}
}
Web Storage: Add item (sessionStorage style)
Offline strategies for HTML5 web applications
Web Storage: Don`t like method calls?
Offline strategies for HTML5 web applications
Web Storage: Don`t like method calls?
Offline strategies for HTML5 web applications
var value = "my value";
// method call
localStorage.setItem("key", value);
// Array accessor
localStorage[key] = value;
// Property accessor
localStorage.key = value;
Offline Strategien für HTML5 Web Applikationen
What`s in the store?
Web Storage: Pro
Offline strategies for HTML5 web applications
Most compatible format up to now.
Web Storage: Con
Offline strategies for HTML5 web applications
The data is not structured.
Web Storage: Con
Offline strategies for HTML5 web applications
No transaction support!
Web Storage: Con
Offline strategies for HTML5 web applications
Lack of automatically expiring storage.
Web Storage: Con
Offline strategies for HTML5 web applications
Inadequate information about
storage quota.
Web SQL Database
Offline strategies for HTML5 web applications
Web SQL Database
Offline strategies for HTML5 web applications
An offline SQL database based on
SQLite, an general-purpose SQL engine.
Web SQL Database: Callback methods
Offline strategies for HTML5 web applications
var onError = function(tx, ex) {
alert("Error: " + ex.message);
};
var onSuccess = function(tx, results) {
var len = results.rows.length;
for(var i = 0; i < len; i++) {
// render found todo item
render(results.rows.item(i));
}
};
Web SQL Database: Setup Database
Offline strategies for HTML5 web applications
// 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: Add item
Offline strategies for HTML5 web applications
function add(item) {
db.transaction(function(tx) {
tx.executeSql(
'INSERT INTO todo (todo) VALUES (?)',
[
item.todo
],
onSuccess,
onError
);
});
}
Web SQL Database: Modify item
Offline strategies for HTML5 web applications
function modify(item) {
db.transaction(function(tx) {
tx.executeSql(
'UPDATE todo SET todo = ? WHERE id = ?',
[
item.todo
item.id
],
onSuccess,
onError
);
});
}
Web SQL Database: Remove item
Offline strategies for HTML5 web applications
function remove(id) {
db.transaction(function (tx) {
tx.executeSql(
'DELETE FROM todo WHERE id = ?',
[
id
],
onSuccess,
onError
);
});
}
Web SQL Database: Read items
Offline strategies for HTML5 web applications
function read() {
db.transaction(function (tx) {
tx.executeSql(
'SELECT * FROM todo',
[],
onSuccess,
onError
);
});
}
Web SQL Database: Pro
Offline strategies for HTML5 web applications
It`s a SQL database within the browser!
Web SQL Database: Con
Offline strategies for HTML5 web applications
It`s a SQL database within the browser!
Web SQL Database: Con
Offline strategies for HTML5 web applications
SQLite is slooooow!
Web SQL Database: Con
Offline strategies for HTML5 web applications
The specification is no
longer part of HTML5!
IndexedDB
Offline strategies for HTML5 web applications
IndexedDB
Offline strategies for HTML5 web applications
A nice compromise between Web
Storage and Web SQL Database giving
you the best of both worlds.
IndexedDB: Preparation
Offline strategies for HTML5 web applications
// different browsers, different naming conventions
var indexedDB = window.indexedDB ||
window.webkitIndexedDB || window.mozIndexedDB ||
window.msIndexedDB;
var IDBTransaction = window.IDBTransaction ||
window.webkitIDBTransaction;
var IDBKeyRange = window.IDBKeyRange ||
window.webkitIDBKeyRange;
IndexedDB: Create object store
Offline strategies for HTML5 web applications
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: Add item
Offline strategies for HTML5 web applications
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: Modify item
Offline strategies for HTML5 web applications
function modify(item) {
try {
var trans = db.transaction(["todo"],
IDBTransaction.READ_WRITE);
var store = trans.objectStore("todo");
var request = store.put(item);
}
catch(ex) {
onError(ex);
}
}
IndexedDB: Remove item
Offline strategies for HTML5 web applications
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: Read items
Offline strategies for HTML5 web applications
function read () {
try {
var trans = db.transaction(["todo"],
IDBTransaction.READ);
var store = trans.objectStore("todo");
var keyRange = IDBKeyRange.lowerBound(0);
var cursorRequest = store.openCursor(keyRange);
cursorRequest.onsuccess = function(e) {
var result = e.target.result;
if(!!result == false) {
return;
}
// @TODO: render result.value
result.continue();
};
}
catch(ex) {
onError(ex);
}
}
File API
Offline strategies for HTML5 web applications
File API
Offline strategies for HTML5 web applications
FileReader API and FileWriter API
File API: Preparations
Offline strategies for HTML5 web applications
var onError = function(e) {
var msg = '';
switch(e.code) {
case FileError.QUOTA_EXCEEDED_ERR:
msg = 'QUOTA_EXCEEDED_ERR'; break;
case FileError.NOT_FOUND_ERR:
msg = 'NOT_FOUND_ERR'; break;
case FileError.SECURITY_ERR:
msg = 'SECURITY_ERR'; break;
case FileError.INVALID_MODIFICATION_ERR:
msg = 'INVALID_MODIFICATION_ERR'; break;
case FileError.INVALID_STATE_ERR:
msg = 'INVALID_STATE_ERR'; break;
default:
msg = 'Unknown Error'; break;
};
alert("Error: " + msg);
};
File API: Preparations
Offline strategies for HTML5 web applications
// File system has been prefixed as of Google Chrome 12
window.requestFileSystem = window.requestFileSystem ||
window.webkitRequestFileSystem;
window.BlobBuilder = window.BlobBuilder ||
window.WebKitBlobBuilder;
var size = 5 * 1024*1024; // 5MB
File API: Requesting quota
Offline strategies for HTML5 web applications
// request quota for persistent store
window.webkitStorageInfo.requestQuota(
PERSISTENT,
size,
function(grantedBytes) {
window.requestFileSystem(
PERSISTENT,
grantedBytes,
function(fs) {
// @TODO: access filesystem
}
}
}
}
Offline strategies for HTML5 web applications
File API: Add item
Offline strategies for HTML5 web applications
function add(item) {
window.webkitStorageInfo.requestQuota(
PERSISTENT,
size,
function(grantedBytes) {
window.requestFileSystem(
PERSISTENT,
grantedBytes,
function(fs){
writeToFile(fs, item);
},
onError
);
},
function(e) {
onError(e);
}
);
},
File API: Add item
Offline strategies for HTML5 web applications
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
);
};
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: Add item
Offline strategies for HTML5 web applications
Deprecated!
function writeToFile(fs, item) {
fs.root.getFile(
'todo.txt',
{
create: true
},
function(fileEntry) {
fileEntry.createWriter(
function(fileWriter) {
var blob = new Blob([
JSON.stringify(item)+"n"
]);
fileWriter.seek(fileWriter.length);
fileWriter.write(blob);
}, onError
);
}, onError
);
};
File API: Add item
Offline strategies for HTML5 web applications
File API: Read items
Offline strategies for HTML5 web applications
function read() {
window.webkitStorageInfo.requestQuota(
PERSISTENT,
size,
function(grantedBytes) {
window.requestFileSystem(
PERSISTENT,
grantedBytes,
function(fs){
readFromFile(fs);
},
onError
);
},
function(e) {
onError(e);
}
);
}
File API: Read items
Offline strategies for HTML5 web applications
function readFromFile(fs) {
fs.root.getFile(
'todo.txt',
{
create: true
},
function(fileEntry) {
fileEntry.file(function(file){
var reader = new FileReader();
reader.onloadend = function(e) {
if (evt.target.readyState ==
FileReader.DONE) {
// process this.result
}
};
reader.readAsText(file);
});
}, onError
);
}
Am I online?
Offline strategies for HTML5 web applications
Am I online?
Offline strategies for HTML5 web applications
document.body.addEventListener("online", function () {
// browser is online!
}
document.body.addEventListener("offline", function () {
// browser is not online!
}
Am I online? Another approach...
Offline strategies for HTML5 web applications
$.ajax({
dataType: 'json',
url: 'http://myappurl.com/ping',
success: function(data){
// ping worked
},
error: function() {
// ping failed -> Server not reachable
}
});
How to sync your data?
Offline strategies for HTML5 web applications
How to sync your data?
Offline strategies for HTML5 web applications
PouchDB, the JavaScript
Database that syncs!
var db = new PouchDB('todo');
db.put({
_id: 1,
todo: 'Get some work done...',
});
db.replicate.to('http://example.com/mydb');
How to sync your data?
Offline strategies for HTML5 web applications
noBackend solution
Offline strategies for HTML5 web applications
noBackend solution
Offline strategies for HTML5 web applications
An approach to decouple apps from
backends, by abstracting backend
tasks with frontend code.
noBackend solution
Offline strategies for HTML5 web applications
„Hoodie is an architecture for
frontend-only web apps“
Browser support?
Offline strategies for HTML5 web applications
Browser support?
Offline strategies for HTML5 web applications
Source: http://caniuse.com
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 - -
Storage limitations?
Offline strategies for HTML5 web applications
Storage limitations?
Offline strategies for HTML5 web applications
All storage technologies are limited
by quotas. Be aware of what you do!
Storage limitations?
Offline strategies for HTML5 web applications
App Cache Web Storage WebSQL IndexedDB File API
iOS 5.1 10 MB 5 MB 5 MB 5 MB
Android 4 unlimited 5 MB ? ?
Safari 5.2 unlimited 5 MB 5 MB 5 MB
Chrome 18 5 MB 5 MB unlimited unlimited unlimited
IE 10 50 MB 10 MB 500 MB 500 MB
Opera 11 50 MB 5 MB 5 MB 5 MB
Firefox 11 unlimited 10 MB 50 MB 50 MB
Thank you!

More Related Content

What's hot

Turbogears Presentation
Turbogears PresentationTurbogears Presentation
Turbogears Presentationdidip
 
Emerging threats jonkman_sans_cti_summit_2015
Emerging threats jonkman_sans_cti_summit_2015Emerging threats jonkman_sans_cti_summit_2015
Emerging threats jonkman_sans_cti_summit_2015Emerging Threats
 
HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranRobert Nyman
 
After max+phonegap
After max+phonegapAfter max+phonegap
After max+phonegapyangdj
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Peter Lubbers
 
jQuery Mobile & PhoneGap
jQuery Mobile & PhoneGapjQuery Mobile & PhoneGap
jQuery Mobile & PhoneGapSwiip
 
An Overview of Models in Django
An Overview of Models in DjangoAn Overview of Models in Django
An Overview of Models in DjangoMichael Auritt
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersTodd Anglin
 
Open Social In The Enterprise
Open Social In The EnterpriseOpen Social In The Enterprise
Open Social In The EnterpriseTim Moore
 
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]Aaron Gustafson
 
Building mobile applications with DrupalGap
Building mobile applications with DrupalGapBuilding mobile applications with DrupalGap
Building mobile applications with DrupalGapAlex S
 
CiklumJavaSat_15112011:Alex Kruk VMForce
CiklumJavaSat_15112011:Alex Kruk VMForceCiklumJavaSat_15112011:Alex Kruk VMForce
CiklumJavaSat_15112011:Alex Kruk VMForceCiklum Ukraine
 
AtlasCamp 2015: Web technologies you should be using now
AtlasCamp 2015: Web technologies you should be using nowAtlasCamp 2015: Web technologies you should be using now
AtlasCamp 2015: Web technologies you should be using nowAtlassian
 
Metrics-Driven Engineering
Metrics-Driven EngineeringMetrics-Driven Engineering
Metrics-Driven EngineeringMike Brittain
 
AtlasCamp 2015: Using add-ons to build add-ons
AtlasCamp 2015: Using add-ons to build add-onsAtlasCamp 2015: Using add-ons to build add-ons
AtlasCamp 2015: Using add-ons to build add-onsAtlassian
 

What's hot (19)

Turbogears Presentation
Turbogears PresentationTurbogears Presentation
Turbogears Presentation
 
Emerging threats jonkman_sans_cti_summit_2015
Emerging threats jonkman_sans_cti_summit_2015Emerging threats jonkman_sans_cti_summit_2015
Emerging threats jonkman_sans_cti_summit_2015
 
HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - Altran
 
After max+phonegap
After max+phonegapAfter max+phonegap
After max+phonegap
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
jQuery Mobile & PhoneGap
jQuery Mobile & PhoneGapjQuery Mobile & PhoneGap
jQuery Mobile & PhoneGap
 
An Overview of Models in Django
An Overview of Models in DjangoAn Overview of Models in Django
An Overview of Models in Django
 
Rego Deep Dive
Rego Deep DiveRego Deep Dive
Rego Deep Dive
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
 
สปริงเฟรมเวิร์ค4.1
สปริงเฟรมเวิร์ค4.1สปริงเฟรมเวิร์ค4.1
สปริงเฟรมเวิร์ค4.1
 
Open Social In The Enterprise
Open Social In The EnterpriseOpen Social In The Enterprise
Open Social In The Enterprise
 
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
 
Building mobile applications with DrupalGap
Building mobile applications with DrupalGapBuilding mobile applications with DrupalGap
Building mobile applications with DrupalGap
 
CiklumJavaSat_15112011:Alex Kruk VMForce
CiklumJavaSat_15112011:Alex Kruk VMForceCiklumJavaSat_15112011:Alex Kruk VMForce
CiklumJavaSat_15112011:Alex Kruk VMForce
 
AtlasCamp 2015: Web technologies you should be using now
AtlasCamp 2015: Web technologies you should be using nowAtlasCamp 2015: Web technologies you should be using now
AtlasCamp 2015: Web technologies you should be using now
 
Testing untestable code - DPC10
Testing untestable code - DPC10Testing untestable code - DPC10
Testing untestable code - DPC10
 
Metrics-Driven Engineering
Metrics-Driven EngineeringMetrics-Driven Engineering
Metrics-Driven Engineering
 
AtlasCamp 2015: Using add-ons to build add-ons
AtlasCamp 2015: Using add-ons to build add-onsAtlasCamp 2015: Using add-ons to build add-ons
AtlasCamp 2015: Using add-ons to build add-ons
 

Viewers also liked

HTML5 Offline Web Application
HTML5 Offline Web ApplicationHTML5 Offline Web Application
HTML5 Offline Web ApplicationAllan Huang
 
OnConnectionLost: The life of an offline web application - JSUnconf 2015
OnConnectionLost: The life of an offline web application - JSUnconf 2015OnConnectionLost: The life of an offline web application - JSUnconf 2015
OnConnectionLost: The life of an offline web application - JSUnconf 2015Johannes Thönes
 
Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009
Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009
Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009Aduci
 
Updated: NW.js - Desktop Apps with Javascript
Updated: NW.js - Desktop Apps with JavascriptUpdated: NW.js - Desktop Apps with Javascript
Updated: NW.js - Desktop Apps with JavascriptRalf Schwoebel
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?Remy Sharp
 
From JavaEE to Android: Way in one click?
From JavaEE to Android: Way in one click?From JavaEE to Android: Way in one click?
From JavaEE to Android: Way in one click?Sergii Zhuk
 
Anatomy of mobile App development
Anatomy of mobile App developmentAnatomy of mobile App development
Anatomy of mobile App developmentRalf Schwoebel
 
HTML5 Offline Web Applications (Silicon Valley User Group)
HTML5 Offline Web Applications (Silicon Valley User Group)HTML5 Offline Web Applications (Silicon Valley User Group)
HTML5 Offline Web Applications (Silicon Valley User Group)robinzimmermann
 
Online / Offline
Online / OfflineOnline / Offline
Online / OfflinePeter Rozek
 
HTML5 AppCache: The Manifest
HTML5 AppCache: The ManifestHTML5 AppCache: The Manifest
HTML5 AppCache: The ManifestRalf Schwoebel
 
Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Ivano Malavolta
 
Real time Messages at Scale with Apache Kafka and Couchbase
Real time Messages at Scale with Apache Kafka and CouchbaseReal time Messages at Scale with Apache Kafka and Couchbase
Real time Messages at Scale with Apache Kafka and CouchbaseWill Gardella
 
Html5 Offline Applications
Html5 Offline Applications Html5 Offline Applications
Html5 Offline Applications Sunny Sharma
 
Clinical Data Repository vs. A Data Warehouse - Which Do You Need?
Clinical Data Repository vs. A Data Warehouse - Which Do You Need?Clinical Data Repository vs. A Data Warehouse - Which Do You Need?
Clinical Data Repository vs. A Data Warehouse - Which Do You Need?Health Catalyst
 

Viewers also liked (17)

HTML5 Offline Web Application
HTML5 Offline Web ApplicationHTML5 Offline Web Application
HTML5 Offline Web Application
 
OnConnectionLost: The life of an offline web application - JSUnconf 2015
OnConnectionLost: The life of an offline web application - JSUnconf 2015OnConnectionLost: The life of an offline web application - JSUnconf 2015
OnConnectionLost: The life of an offline web application - JSUnconf 2015
 
Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009
Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009
Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009
 
Updated: NW.js - Desktop Apps with Javascript
Updated: NW.js - Desktop Apps with JavascriptUpdated: NW.js - Desktop Apps with Javascript
Updated: NW.js - Desktop Apps with Javascript
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
 
From JavaEE to Android: Way in one click?
From JavaEE to Android: Way in one click?From JavaEE to Android: Way in one click?
From JavaEE to Android: Way in one click?
 
Anatomy of mobile App development
Anatomy of mobile App developmentAnatomy of mobile App development
Anatomy of mobile App development
 
HTML5 Offline Web Applications (Silicon Valley User Group)
HTML5 Offline Web Applications (Silicon Valley User Group)HTML5 Offline Web Applications (Silicon Valley User Group)
HTML5 Offline Web Applications (Silicon Valley User Group)
 
Online / Offline
Online / OfflineOnline / Offline
Online / Offline
 
HTML5 AppCache: The Manifest
HTML5 AppCache: The ManifestHTML5 AppCache: The Manifest
HTML5 AppCache: The Manifest
 
Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app
 
HTML: Tables and Forms
HTML: Tables and FormsHTML: Tables and Forms
HTML: Tables and Forms
 
Real time Messages at Scale with Apache Kafka and Couchbase
Real time Messages at Scale with Apache Kafka and CouchbaseReal time Messages at Scale with Apache Kafka and Couchbase
Real time Messages at Scale with Apache Kafka and Couchbase
 
Testing web application
Testing web applicationTesting web application
Testing web application
 
Html5 Offline Applications
Html5 Offline Applications Html5 Offline Applications
Html5 Offline Applications
 
Clinical Data Repository vs. A Data Warehouse - Which Do You Need?
Clinical Data Repository vs. A Data Warehouse - Which Do You Need?Clinical Data Repository vs. A Data Warehouse - Which Do You Need?
Clinical Data Repository vs. A Data Warehouse - Which Do You Need?
 
Lokijs
LokijsLokijs
Lokijs
 

Similar to Offline strategies for HTML5 web applications - frOSCon8

Offline strategies for HTML5 web applications - pfCongres2012
Offline strategies for HTML5 web applications - pfCongres2012Offline strategies for HTML5 web applications - pfCongres2012
Offline strategies for HTML5 web applications - pfCongres2012Stephan Hochdörfer
 
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Sho Ito
 
Progressive Web Apps. What, why and how
Progressive Web Apps. What, why and howProgressive Web Apps. What, why and how
Progressive Web Apps. What, why and howRiza Fahmi
 
"Progressive Web Apps" by Riza Fahmi (Hacktiv8)
"Progressive Web Apps" by Riza Fahmi	(Hacktiv8)"Progressive Web Apps" by Riza Fahmi	(Hacktiv8)
"Progressive Web Apps" by Riza Fahmi (Hacktiv8)Tech in Asia ID
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on MobileAdam Lu
 
High Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practicesHigh Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practicesStoyan Stefanov
 
The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)
The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)
The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)David Pichsenmeister
 
Internet Explorer 8 for Developers by Christian Thilmany
Internet Explorer 8 for Developers by Christian ThilmanyInternet Explorer 8 for Developers by Christian Thilmany
Internet Explorer 8 for Developers by Christian ThilmanyChristian Thilmany
 
The current status of html5 technology and standard
The current status of html5 technology and standardThe current status of html5 technology and standard
The current status of html5 technology and standardWonsuk Lee
 
Rey Bango - HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shimsRey Bango -  HTML5: polyfills and shims
Rey Bango - HTML5: polyfills and shimsStarTech Conference
 
混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaveryangdj
 
Boost your website by running PHP on Nginx
Boost your website by running PHP on NginxBoost your website by running PHP on Nginx
Boost your website by running PHP on NginxHarald Zeitlhofer
 
Building web applications using the web.
Building web applications using the web.Building web applications using the web.
Building web applications using the web.Christian Heilmann
 
GDG Addis - An Introduction to Django and App Engine
GDG Addis - An Introduction to Django and App EngineGDG Addis - An Introduction to Django and App Engine
GDG Addis - An Introduction to Django and App EngineYared Ayalew
 

Similar to Offline strategies for HTML5 web applications - frOSCon8 (20)

Offline strategies for HTML5 web applications - pfCongres2012
Offline strategies for HTML5 web applications - pfCongres2012Offline strategies for HTML5 web applications - pfCongres2012
Offline strategies for HTML5 web applications - pfCongres2012
 
Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walk
 
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~
 
Progressive Web Apps. What, why and how
Progressive Web Apps. What, why and howProgressive Web Apps. What, why and how
Progressive Web Apps. What, why and how
 
"Progressive Web Apps" by Riza Fahmi (Hacktiv8)
"Progressive Web Apps" by Riza Fahmi	(Hacktiv8)"Progressive Web Apps" by Riza Fahmi	(Hacktiv8)
"Progressive Web Apps" by Riza Fahmi (Hacktiv8)
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on Mobile
 
High Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practicesHigh Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practices
 
XPages Mobile, #dd13
XPages Mobile, #dd13XPages Mobile, #dd13
XPages Mobile, #dd13
 
Html5
Html5Html5
Html5
 
HTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi LHTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi L
 
The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)
The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)
The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)
 
Internet Explorer 8 for Developers by Christian Thilmany
Internet Explorer 8 for Developers by Christian ThilmanyInternet Explorer 8 for Developers by Christian Thilmany
Internet Explorer 8 for Developers by Christian Thilmany
 
The current status of html5 technology and standard
The current status of html5 technology and standardThe current status of html5 technology and standard
The current status of html5 technology and standard
 
Rey Bango - HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shimsRey Bango -  HTML5: polyfills and shims
Rey Bango - HTML5: polyfills and shims
 
混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver
 
HTML5와 모바일
HTML5와 모바일HTML5와 모바일
HTML5와 모바일
 
Boost your website by running PHP on Nginx
Boost your website by running PHP on NginxBoost your website by running PHP on Nginx
Boost your website by running PHP on Nginx
 
Building web applications using the web.
Building web applications using the web.Building web applications using the web.
Building web applications using the web.
 
GDG Addis - An Introduction to Django and App Engine
GDG Addis - An Introduction to Django and App EngineGDG Addis - An Introduction to Django and App Engine
GDG Addis - An Introduction to Django and App Engine
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
 

More from 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...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
 
Phing for power users - frOSCon8
Phing for power users - frOSCon8Phing for power users - frOSCon8
Phing for power users - frOSCon8Stephan Hochdörfer
 
Real World Dependency Injection - oscon13
Real World Dependency Injection - oscon13Real World Dependency Injection - oscon13
Real World Dependency Injection - oscon13Stephan Hochdörfer
 
Dependency Injection in PHP - dwx13
Dependency Injection in PHP - dwx13Dependency Injection in PHP - dwx13
Dependency Injection in PHP - dwx13Stephan Hochdörfer
 
Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Stephan Hochdörfer
 
Your Business. Your Language. Your Code - dpc13
Your Business. Your Language. Your Code - dpc13Your Business. Your Language. Your Code - dpc13
Your Business. Your Language. Your Code - dpc13Stephan Hochdörfer
 
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
 
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
 
Real World Dependency Injection - phpugffm13
Real World Dependency Injection - phpugffm13Real World Dependency Injection - phpugffm13
Real World Dependency Injection - phpugffm13Stephan Hochdörfer
 
Testing untestable code - ConFoo13
Testing untestable code - ConFoo13Testing untestable code - ConFoo13
Testing untestable code - ConFoo13Stephan Hochdörfer
 
Offline-Strategien für HTML5Web Applikationen - WMMRN12
Offline-Strategien für HTML5Web Applikationen - WMMRN12Offline-Strategien für HTML5Web Applikationen - WMMRN12
Offline-Strategien für HTML5Web Applikationen - WMMRN12Stephan Hochdörfer
 
Große Systeme, lose Kopplung, Spaß bei der Arbeit! - WDC12
Große Systeme, lose Kopplung, Spaß bei der Arbeit! - WDC12Große Systeme, lose Kopplung, Spaß bei der Arbeit! - WDC12
Große Systeme, lose Kopplung, Spaß bei der Arbeit! - WDC12Stephan Hochdörfer
 
Wie Software-Generatoren die Welt verändern können - Herbstcampus12
Wie Software-Generatoren die Welt verändern können - Herbstcampus12Wie Software-Generatoren die Welt verändern können - Herbstcampus12
Wie Software-Generatoren die Welt verändern können - Herbstcampus12Stephan Hochdörfer
 
Testing untestable code - Herbstcampus12
Testing untestable code - Herbstcampus12Testing untestable code - Herbstcampus12
Testing untestable code - Herbstcampus12Stephan Hochdörfer
 
Testing untestable code - oscon 2012
Testing untestable code - oscon 2012Testing untestable code - oscon 2012
Testing untestable code - oscon 2012Stephan Hochdörfer
 
Introducing a Software Generator Framework - JAZOON12
Introducing a Software Generator Framework - JAZOON12Introducing a Software Generator Framework - JAZOON12
Introducing a Software Generator Framework - JAZOON12Stephan Hochdörfer
 

More from Stephan Hochdörfer (20)

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...
 
Phing for power users - frOSCon8
Phing for power users - frOSCon8Phing for power users - frOSCon8
Phing for power users - frOSCon8
 
Real World Dependency Injection - oscon13
Real World Dependency Injection - oscon13Real World Dependency Injection - oscon13
Real World Dependency Injection - oscon13
 
Dependency Injection in PHP - dwx13
Dependency Injection in PHP - dwx13Dependency Injection in PHP - dwx13
Dependency Injection in PHP - dwx13
 
Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13
 
Your Business. Your Language. Your Code - dpc13
Your Business. Your Language. Your Code - dpc13Your Business. Your Language. Your Code - dpc13
Your Business. Your Language. Your Code - dpc13
 
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
 
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
 
Real World Dependency Injection - phpugffm13
Real World Dependency Injection - phpugffm13Real World Dependency Injection - phpugffm13
Real World Dependency Injection - phpugffm13
 
Testing untestable code - ConFoo13
Testing untestable code - ConFoo13Testing untestable code - ConFoo13
Testing untestable code - ConFoo13
 
A Phing fairy tale - ConFoo13
A Phing fairy tale - ConFoo13A Phing fairy tale - ConFoo13
A Phing fairy tale - ConFoo13
 
Offline-Strategien für HTML5Web Applikationen - WMMRN12
Offline-Strategien für HTML5Web Applikationen - WMMRN12Offline-Strategien für HTML5Web Applikationen - WMMRN12
Offline-Strategien für HTML5Web Applikationen - WMMRN12
 
Testing untestable code - IPC12
Testing untestable code - IPC12Testing untestable code - IPC12
Testing untestable code - IPC12
 
Große Systeme, lose Kopplung, Spaß bei der Arbeit! - WDC12
Große Systeme, lose Kopplung, Spaß bei der Arbeit! - WDC12Große Systeme, lose Kopplung, Spaß bei der Arbeit! - WDC12
Große Systeme, lose Kopplung, Spaß bei der Arbeit! - WDC12
 
Wie Software-Generatoren die Welt verändern können - Herbstcampus12
Wie Software-Generatoren die Welt verändern können - Herbstcampus12Wie 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 - Herbstcampus12Testing untestable code - Herbstcampus12
Testing untestable code - Herbstcampus12
 
Testing untestable code - oscon 2012
Testing untestable code - oscon 2012Testing untestable code - oscon 2012
Testing untestable code - oscon 2012
 
Introducing a Software Generator Framework - JAZOON12
Introducing a Software Generator Framework - JAZOON12Introducing a Software Generator Framework - JAZOON12
Introducing a Software Generator Framework - JAZOON12
 
The state of DI - DPC12
The state of DI - DPC12The state of DI - DPC12
The state of DI - DPC12
 
Separation of concerns - DPC12
Separation of concerns - DPC12Separation of concerns - DPC12
Separation of concerns - DPC12
 

Recently uploaded

"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 

Recently uploaded (20)

"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 

Offline strategies for HTML5 web applications - frOSCon8

  • 1. Offline strategies for HTML5 web applications Stephan Hochdörfer, bitExpert AG
  • 2. Offline strategies for HTML5 web applications About me  Stephan Hochdörfer  Head of IT at bitExpert AG, Germany  enjoying PHP since 1999  S.Hochdoerfer@bitExpert.de  @shochdoerfer
  • 3. Offline strategies for HTML5 web applications Storing data on the client? Seriously?
  • 4. Offline strategies for HTML5 web applications How did we solve these issues in the past?
  • 5. Offline strategies for HTML5 web applications Cookies are tasty, but not awesome!
  • 6. Offline strategies for HTML5 web applications IE DHTML behaviours, not sweet!
  • 7. Offline strategies for HTML5 web applications Flash Cookies are yummie!
  • 8. Offline strategies for HTML5 web applications Google Gears made it right. Sort of.
  • 9. Can I haz alternative? Offline strategies for HTML5 web applications
  • 10. Offline strategies for HTML5 web applications to the rescue!
  • 11. Offline strategies for HTML5 web applications [...] we take the next step, announcing 2014 as the target for Recommendation. Jeff Jaffe, Chief Executive Officer, World Wide Web Consortium
  • 12. Offline strategies for HTML5 web applications
  • 13. Offline strategies for HTML5 web applications
  • 14. What does „offline“ mean? Offline strategies for HTML5 web applications
  • 15. What does „offline“ mean? Offline strategies for HTML5 web applications Application vs. Content
  • 16. What does „offline“ mean? Offline strategies for HTML5 web applications Application Cache vs. Offline Storage
  • 17. App Cache for caching static resources Offline strategies for HTML5 web applications HTML Page: <!DOCTYPE html> <html lang="en">
  • 18. 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 for caching static resources Offline strategies for HTML5 web applications HTML Page: cache.manifest (served with Content-Type: text/cache-manifest):
  • 19. App Cache for caching static resources Offline strategies for HTML5 web applications CACHE MANIFEST # 2013-07-25 NETWORK: data.php CACHE: /main/home /main/app.js /settings/home /settings/app.js http://myhost/logo.png http://myhost/check.png http://myhost/cross.png
  • 20. App Cache for caching static resources Offline strategies for HTML5 web applications CACHE MANIFEST # 2013-07-25 FALLBACK: / /offline.html NETWORK: *
  • 21. App Cache Scripting Offline strategies for HTML5 web applications // events fired by window.applicationCache window.applicationCache.onchecking = function(e) {log("Checking for updates");} window.applicationCache.onnoupdate = function(e) {log("No updates");} window.applicationCache.onupdateready = function(e) {log("Update ready");} window.applicationCache.onobsolete = function(e) {log("Obsolete");} window.applicationCache.ondownloading = function(e) {log("Downloading");} window.applicationCache.oncached = function(e) {log("Cached");} window.applicationCache.onerror = function(e) {log("Error");} // Log each file window.applicationCache.onprogress = function(e) { log("Progress: downloaded file " + counter); counter++; };
  • 22. App Cache Scripting Offline strategies for HTML5 web applications // Check if a new cache is available on page load. window.addEventListener('load', function(e) { 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 window.applicationCache.swapCache(); if (confirm('New version is available. Load it?)) { window.location.reload(); } } else { // Manifest didn't change... } }, false); }, false);
  • 23. App Cache – Some gotchas! Offline strategies for HTML5 web applications
  • 24. App Cache – Some gotchas! Offline strategies for HTML5 web applications 1. Files are always(!) served from the application cache.
  • 25. App Cache – Some gotchas! Offline strategies for HTML5 web applications 2. The application cache only updates if the content of the manifest itself has changed!
  • 26. App Cache – Some gotchas! Offline strategies for HTML5 web applications 3. If any of the files listed in the CACHE section can't be retrieved, the entire cache will be disregarded.
  • 27. App Cache – Some gotchas! Offline strategies for HTML5 web applications 4. If the manifest file itself can't be retrieved, the cache will ignored!
  • 28. App Cache – Some gotchas! Offline strategies for HTML5 web applications 5. Non-cached resources will not load on a cached page!
  • 29. App Cache – Some gotchas! Offline strategies for HTML5 web applications 6. The page needs to be reloaded, otherwise the new resources do not show up!
  • 30. App Cache – Some gotchas! Offline strategies for HTML5 web applications 7. To avoid the risk of caching manifest files set expires headers!
  • 31. App Cache – What to cache? Offline strategies for HTML5 web applications Yes:  Fonts  Splash image  App icon  Entry page  Fallback bootstrap No:  CSS  HTML  Javascript
  • 32. App Cache – What to cache? Offline strategies for HTML5 web applications Use the app cache for „static content“ only!
  • 33. Data URI Schema Offline strategies for HTML5 web applications
  • 35. Storing dynamic data locally (in HTML5) Offline strategies for HTML5 web applications
  • 36. Offline strategies for HTML5 web applications Example: Todolist application
  • 37. Storing dynamic data locally (in HTML5) Offline strategies for HTML5 web applications Find the sources here: github.com/bitExpert/html5-offline
  • 38. Storing dynamic data locally (in HTML5) Offline strategies for HTML5 web applications Web Storage, Web SQL Database, IndexedDB, File API
  • 39. Web Storage Offline strategies for HTML5 web applications
  • 40. Web Storage Offline strategies for HTML5 web applications Very convenient form of offline storage: simple key-value store
  • 41. Web Storage: 2 different types Offline strategies for HTML5 web applications localStorage vs. sessionStorage
  • 42. function add(item) { try { // for a new item set id if((typeof item.id === "undefined") || (null == item.id) || ("" == item.id)) { item.id = get_lastIndex() + 1; } // store object as string localStorage.setItem(item.id, JSON.stringify(item) ); // update the index set_lastIndex(item.id); } catch(ex) { console.log(ex); } } Web Storage: Add item Offline strategies for HTML5 web applications
  • 43. Web Storage: Modify item Offline strategies for HTML5 web applications function modify(item) { try { // store object as string localStorage.setItem(item.id, JSON.stringify(item) ); } catch(ex) { console.log(ex); } }
  • 44. Web Storage: Remove item Offline strategies for HTML5 web applications function remove (id) { try { localStorage.removeItem(id); } catch(ex) { console.log(ex); } }
  • 45. Web Storage: Read items Offline strategies for HTML5 web applications function read() { try { var lastIdx = get_lastIndex(); for(var i = 1; i <= lastIdx; i++) { if(null !== localStorage.getItem(i)) { // parse and render item var item = JSON.parse( localStorage.getItem(i) ); } } } catch(ex) { console.log(ex); } }
  • 46. Web Storage: How to use sessionStorage? Offline strategies for HTML5 web applications
  • 47. Web Storage: How to use sessionStorage? Offline strategies for HTML5 web applications Replace „localStorage“ with „sessionStorage“
  • 48. function add(item) { try { // for a new item set id if((typeof item.id === "undefined") || (null == item.id) || ("" == item.id)) { item.id = get_lastIndex() + 1; } // store object as string sessionStorage.setItem(item.id, JSON.stringify(item) ); // update the index set_lastIndex(item.id); } catch(ex) { console.log(ex); } } Web Storage: Add item (sessionStorage style) Offline strategies for HTML5 web applications
  • 49. Web Storage: Don`t like method calls? Offline strategies for HTML5 web applications
  • 50. Web Storage: Don`t like method calls? Offline strategies for HTML5 web applications var value = "my value"; // method call localStorage.setItem("key", value); // Array accessor localStorage[key] = value; // Property accessor localStorage.key = value;
  • 51. Offline Strategien für HTML5 Web Applikationen What`s in the store?
  • 52. Web Storage: Pro Offline strategies for HTML5 web applications Most compatible format up to now.
  • 53. Web Storage: Con Offline strategies for HTML5 web applications The data is not structured.
  • 54. Web Storage: Con Offline strategies for HTML5 web applications No transaction support!
  • 55. Web Storage: Con Offline strategies for HTML5 web applications Lack of automatically expiring storage.
  • 56. Web Storage: Con Offline strategies for HTML5 web applications Inadequate information about storage quota.
  • 57. Web SQL Database Offline strategies for HTML5 web applications
  • 58. Web SQL Database Offline strategies for HTML5 web applications An offline SQL database based on SQLite, an general-purpose SQL engine.
  • 59. Web SQL Database: Callback methods Offline strategies for HTML5 web applications var onError = function(tx, ex) { alert("Error: " + ex.message); }; var onSuccess = function(tx, results) { var len = results.rows.length; for(var i = 0; i < len; i++) { // render found todo item render(results.rows.item(i)); } };
  • 60. Web SQL Database: Setup Database Offline strategies for HTML5 web applications // 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 ); });
  • 61. Web SQL Database: Add item Offline strategies for HTML5 web applications function add(item) { db.transaction(function(tx) { tx.executeSql( 'INSERT INTO todo (todo) VALUES (?)', [ item.todo ], onSuccess, onError ); }); }
  • 62. Web SQL Database: Modify item Offline strategies for HTML5 web applications function modify(item) { db.transaction(function(tx) { tx.executeSql( 'UPDATE todo SET todo = ? WHERE id = ?', [ item.todo item.id ], onSuccess, onError ); }); }
  • 63. Web SQL Database: Remove item Offline strategies for HTML5 web applications function remove(id) { db.transaction(function (tx) { tx.executeSql( 'DELETE FROM todo WHERE id = ?', [ id ], onSuccess, onError ); }); }
  • 64. Web SQL Database: Read items Offline strategies for HTML5 web applications function read() { db.transaction(function (tx) { tx.executeSql( 'SELECT * FROM todo', [], onSuccess, onError ); }); }
  • 65. Web SQL Database: Pro Offline strategies for HTML5 web applications It`s a SQL database within the browser!
  • 66. Web SQL Database: Con Offline strategies for HTML5 web applications It`s a SQL database within the browser!
  • 67. Web SQL Database: Con Offline strategies for HTML5 web applications SQLite is slooooow!
  • 68. Web SQL Database: Con Offline strategies for HTML5 web applications The specification is no longer part of HTML5!
  • 69. IndexedDB Offline strategies for HTML5 web applications
  • 70. IndexedDB Offline strategies for HTML5 web applications A nice compromise between Web Storage and Web SQL Database giving you the best of both worlds.
  • 71. IndexedDB: Preparation Offline strategies for HTML5 web applications // different browsers, different naming conventions var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB; var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction; var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;
  • 72. IndexedDB: Create object store Offline strategies for HTML5 web applications 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() {}; }; } };
  • 73. IndexedDB: Add item Offline strategies for HTML5 web applications 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); } }
  • 74. IndexedDB: Modify item Offline strategies for HTML5 web applications function modify(item) { try { var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE); var store = trans.objectStore("todo"); var request = store.put(item); } catch(ex) { onError(ex); } }
  • 75. IndexedDB: Remove item Offline strategies for HTML5 web applications 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); } }
  • 76. IndexedDB: Read items Offline strategies for HTML5 web applications function read () { try { var trans = db.transaction(["todo"], IDBTransaction.READ); var store = trans.objectStore("todo"); var keyRange = IDBKeyRange.lowerBound(0); var cursorRequest = store.openCursor(keyRange); cursorRequest.onsuccess = function(e) { var result = e.target.result; if(!!result == false) { return; } // @TODO: render result.value result.continue(); }; } catch(ex) { onError(ex); } }
  • 77. File API Offline strategies for HTML5 web applications
  • 78. File API Offline strategies for HTML5 web applications FileReader API and FileWriter API
  • 79. File API: Preparations Offline strategies for HTML5 web applications var onError = function(e) { var msg = ''; switch(e.code) { case FileError.QUOTA_EXCEEDED_ERR: msg = 'QUOTA_EXCEEDED_ERR'; break; case FileError.NOT_FOUND_ERR: msg = 'NOT_FOUND_ERR'; break; case FileError.SECURITY_ERR: msg = 'SECURITY_ERR'; break; case FileError.INVALID_MODIFICATION_ERR: msg = 'INVALID_MODIFICATION_ERR'; break; case FileError.INVALID_STATE_ERR: msg = 'INVALID_STATE_ERR'; break; default: msg = 'Unknown Error'; break; }; alert("Error: " + msg); };
  • 80. File API: Preparations Offline strategies for HTML5 web applications // File system has been prefixed as of Google Chrome 12 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder; var size = 5 * 1024*1024; // 5MB
  • 81. File API: Requesting quota Offline strategies for HTML5 web applications // request quota for persistent store window.webkitStorageInfo.requestQuota( PERSISTENT, size, function(grantedBytes) { window.requestFileSystem( PERSISTENT, grantedBytes, function(fs) { // @TODO: access filesystem } } } }
  • 82. Offline strategies for HTML5 web applications
  • 83. File API: Add item Offline strategies for HTML5 web applications function add(item) { window.webkitStorageInfo.requestQuota( PERSISTENT, size, function(grantedBytes) { window.requestFileSystem( PERSISTENT, grantedBytes, function(fs){ writeToFile(fs, item); }, onError ); }, function(e) { onError(e); } ); },
  • 84. File API: Add item Offline strategies for HTML5 web applications 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 ); };
  • 85. 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: Add item Offline strategies for HTML5 web applications Deprecated!
  • 86. function writeToFile(fs, item) { fs.root.getFile( 'todo.txt', { create: true }, function(fileEntry) { fileEntry.createWriter( function(fileWriter) { var blob = new Blob([ JSON.stringify(item)+"n" ]); fileWriter.seek(fileWriter.length); fileWriter.write(blob); }, onError ); }, onError ); }; File API: Add item Offline strategies for HTML5 web applications
  • 87. File API: Read items Offline strategies for HTML5 web applications function read() { window.webkitStorageInfo.requestQuota( PERSISTENT, size, function(grantedBytes) { window.requestFileSystem( PERSISTENT, grantedBytes, function(fs){ readFromFile(fs); }, onError ); }, function(e) { onError(e); } ); }
  • 88. File API: Read items Offline strategies for HTML5 web applications function readFromFile(fs) { fs.root.getFile( 'todo.txt', { create: true }, function(fileEntry) { fileEntry.file(function(file){ var reader = new FileReader(); reader.onloadend = function(e) { if (evt.target.readyState == FileReader.DONE) { // process this.result } }; reader.readAsText(file); }); }, onError ); }
  • 89. Am I online? Offline strategies for HTML5 web applications
  • 90. Am I online? Offline strategies for HTML5 web applications document.body.addEventListener("online", function () { // browser is online! } document.body.addEventListener("offline", function () { // browser is not online! }
  • 91. Am I online? Another approach... Offline strategies for HTML5 web applications $.ajax({ dataType: 'json', url: 'http://myappurl.com/ping', success: function(data){ // ping worked }, error: function() { // ping failed -> Server not reachable } });
  • 92. How to sync your data? Offline strategies for HTML5 web applications
  • 93. How to sync your data? Offline strategies for HTML5 web applications PouchDB, the JavaScript Database that syncs!
  • 94. var db = new PouchDB('todo'); db.put({ _id: 1, todo: 'Get some work done...', }); db.replicate.to('http://example.com/mydb'); How to sync your data? Offline strategies for HTML5 web applications
  • 95. noBackend solution Offline strategies for HTML5 web applications
  • 96. noBackend solution Offline strategies for HTML5 web applications An approach to decouple apps from backends, by abstracting backend tasks with frontend code.
  • 97. noBackend solution Offline strategies for HTML5 web applications „Hoodie is an architecture for frontend-only web apps“
  • 98. Browser support? Offline strategies for HTML5 web applications
  • 99. Browser support? Offline strategies for HTML5 web applications Source: http://caniuse.com 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 - -
  • 100. Storage limitations? Offline strategies for HTML5 web applications
  • 101. Storage limitations? Offline strategies for HTML5 web applications All storage technologies are limited by quotas. Be aware of what you do!
  • 102. Storage limitations? Offline strategies for HTML5 web applications App Cache Web Storage WebSQL IndexedDB File API iOS 5.1 10 MB 5 MB 5 MB 5 MB Android 4 unlimited 5 MB ? ? Safari 5.2 unlimited 5 MB 5 MB 5 MB Chrome 18 5 MB 5 MB unlimited unlimited unlimited IE 10 50 MB 10 MB 500 MB 500 MB Opera 11 50 MB 5 MB 5 MB 5 MB Firefox 11 unlimited 10 MB 50 MB 50 MB