Softshake - Offline applications

Oﬄine applications
Jérôme Van Der Linden - 28/10/2016

jeromevdl @jeromevdl
Jérôme
Van Der
Linden
@OCTOSuisse @OCTOTechnology

Oﬄine applications
5 questions to ask before creating an oﬄine application

Question #1
What can I do oﬄine ?

Question #2
How much
data is it and
where can i store it ?

Few
megabytes
Hundred of
megabytes
(maybe few giga)

Several gigabytes (or many more) ?

Application Cache
<html manifest="/cache.manifest">
...
</html>
CACHE MANIFEST
# Explicitly cached
CACHE:
/favicon.ico
page.html
stylesheet.css
images/logo.png
scripts/main.js
http://cdn.example.com/scripts/main.js
# Resources that require the user to be online.
NETWORK:
*
# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
cache.manifest
index.html
http://www.html5rocks.com/en/tutorials/appcache/beginner/
http://alistapart.com/article/application-cache-is-a-douchebag

Service Workers (Cache API)
this.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll([
'/sw-test/',
'/sw-test/index.html',
'/sw-test/style.css',
'/sw-test/app.js',
'/sw-test/star-wars-logo.jpg',
'/sw-test/gallery/',
'/sw-test/gallery/myLittleVader.jpg'
]);
})
);
});
2. Installation of Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register(‘/sw.js')
.then(function(registration) {
// Registration was successful
}).catch(function(err) {
// registration failed :(
});
}
1. Registration of Service Worker
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
return response;
}
var fetchRequest = event.request.clone();
return fetch(fetchRequest).then(
function(response) {
if (!response || response.status !== 200) {
return response;
}
var responseToCache = response.clone();
caches.open('v1').then(function(cache) {
cache.put(event.request, responseToCache);
});
return response;
}
);
})
);
});
3 . Fetch and Cache requests

Service Workers (Cache API)
44+40+
https://jakearchibald.github.io/isserviceworkerready/
27+

Future of upcoming web development ?

Web storage (local / session)
if (('localStorage' in window) && window['localStorage'] !== null) {
localStorage.setItem(key, value);
}
if (key in localStorage) {
var value = localStorage.getItem(key);
}
1. Store data
2. Retrieve data
if (key in localStorage) {
localStorage.removeItem(key);
}
localStorage.clear();
3. Remove data / clear

Web SQL
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
msg = 'Log message created and row inserted.';
document.querySelector('#status').innerHTML = msg;
});
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "Found rows: " + len + "";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++) {
msg = "" + results.rows.item(i).log + "";
}
}, null);
});

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
msg = 'Log message created and row inserted.';
document.querySelector('#status').innerHTML = msg;
});
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "Found rows: " + len + "";
for (i = 0; i < len; i++) {
msg = "" + results.rows.item(i).log + "";
}
}, null);
});
Web SQL

IndexedDB
var db;
function openDb() {
var req = indexedDB.open(DB_NAME, DB_VERSION);
req.onsuccess = function (evt) {
db = this.result;
};
req.onerror = function (evt) {
console.error("openDb:", evt.target.errorCode);
};
req.onupgradeneeded = function (evt) {
var store = evt.currentTarget.result.createObjectStore(
DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
store.createIndex('title', 'title', { unique: false });
store.createIndex('isbn', 'isbn', { unique: true });
};
}
1. Open Database

IndexedDB
var tx = db.transaction(DB_STORE_NAME, 'readwrite');
var store = tx.objectStore(DB_STORE_NAME);
var obj = { isbn: ‘0062316095’, title: ‘Sapiens: A Brief History of Humankind’, year: 2015 };
var req;
try {
req = store.add(obj);
} catch (e) {
// ...
}
console.log("Insertion in DB successful");
// ...
};
req.onerror = function() {
console.error("Insert error", this.error);
// ...
};
2. Insert data

IndexedDB
var var tx = db.transaction(DB_STORE_NAME, 'readonly');
var req = store.openCursor();
var cursor = evt.target.result;
if (cursor) {
alert(cursor.value.title);
cursor.continue();
}
};
3. Retrieve data (cursor)
var req = store.get(42);
var object = evt.target.result;
alert(object.title);
};
3. Retrieve data (one item)

IndexedDB
var index = store.index(‘title’);
var req = index.get(‘Sapiens: A Brief History of Humankind’);
var result = evt.target.result;
if (result) {
// ...
}
};
3. Retrieve data (index)

IndexedDB wrappers
• db.js
• joqular
• TaffyDB
• localForage
• IDBWrapper
• YDN

IndexedDB
16+24+ 15+ 10+
8+ 4.4+

Quotas
50 %
33 %
20
%
20
%
Free disk space
Space browser can use
Space application (domain) can use

https://storage.spec.whatwg.org/
https://developers.google.com/web/updates/2016/06/persistent-storage
if (navigator.storage && navigator.storage.persist)
navigator.storage.persist().then(granted => {
if (granted)
alert("Storage will not be cleared except by explicit user action");
else
alert("Storage may be cleared by the UA under storage pressure.");
});
if (navigator.storage && navigator.storage.persist)
navigator.storage.persisted().then(persistent=>{
if (persistent)
console.log("Storage will not be cleared except by explicit user action");
else
console.log("Storage may be cleared by the UA under storage pressure.");
});
Persistent storage
55+

Question #3
How to handle oﬄine-online
synchronization ?

Basic Resolution : based on timestamp
« Last version win »

Optimistic lock
Source : Patterns of Enterprise Application Architecture - Martin Fowler
System transaction
boundaries
Business transaction
boundaries

Pessimistic lock
Source : Patterns of Enterprise Application Architecture - Martin Fowler
System transaction
boundaries
Business transaction
boundaries

Theory is when you
know everything but
nothing works.
Practice is when
everything works but no
one knows why.
In our lab, theory and
practice are combined:
nothing works and no
one knows why!

Softshake - Offline applications

kinto.js
var db = new Kinto();
var todos = db.collection(‘todos’);
todos.create({
title: ‘buy some bread’),
finished : false
})
.then(function(res){…})
.catch(function(err){…})
todos.list().then(function(res) {
renderTodos(res.data);
})
.catch(function(err) {…});
todos.update(todo)
.then(function(res) {…})
Create, Read, Update, Delete
using IndexedDB
todos.delete(todo.id)
.then(function(res) {…})
var syncOptions = {
remote: "https://host/kintoapi",
headers: {Authorization: …}
};
todos.sync(syncOptions)
Synchronize with remote

kinto.js
var syncOptions = {
remote: "https://host/kintoapi",
headers: {Authorization: …}
};
{
"ok": true,
"lastModified": 1434617181458,
"errors": [],
"created": [], // created locally
"updated": [], // updated locally
"deleted": [], // deleted locally
"published": [ // published remotely
{
"last_modified": 1434617181458,
"done": false,
"id": "7ca54d89-479a-4201-8494",
"title": "buy some bread",
"_status": "synced"
}
],
"conflicts": [],
"skipped": []
}
{
"ok": true,
"errors": [],
"published": [], // published remotely
"conflicts": [
{
"type": "incoming", // or outgoing
"local": {
"last_modified": 1434619634577,
"done": true,
"id": "7ca54d89-479a-4201-8494",
"_status": "updated"
},
"remote": {
"last_modified": 1434619745465,
"done": false,
"id": "7ca54d89-479a-4201-8494",
"title": "buy some bread and wine"
}
}
],
"skipped": []
}
OK Conﬂicts

kinto.js
{
"ok": true,
"errors": [],
"published": [], // published remotely
"conflicts": [
{
"type": "incoming", // or outgoing
"local": {
"last_modified": 1434619634577,
"done": true,
"id": "7ca54d89-479a-4201-8494",
"_status": "updated"
},
"remote": {
"last_modified": 1434619745465,
"done": false,
"id": "7ca54d89-479a-4201-8494",
"title": "buy some bread and wine"
}
}
],
"skipped": []
}
Conflicts
.then(function(res){
if (res.conflicts.length) {
return handleConflicts(res.conflicts);
}
})
.catch(function(err){…});
function handleConflicts(conflicts) {
return Promise.all(conflicts.map(function(conflict) {
return todos.resolve(conflict, conflict.remote);
}))
.then(function() {
todos.sync(syncOptions);
});
}
Choose your way to solve the conflict:
• Choose remote or local version
• Choose according last_modified
• Pick the good fields
(need to provide 3-way-merge screen)

Question #4
How to communicate with users ?

Inform the user …
Save Save locally
Send Send when online

Do not load indeﬁnitelyyyyyyyyyy

Do not display
an empty screen

Question #5
Do I really need oﬄine ?

« You are not on a f*cking plane and if
you are, it doesn’t matter »
- David Heinemeier Hansson (2007)
https://signalvnoise.com/posts/347-youre-not-on-a-fucking-plane-and-if-you-are-it-doesnt-matter

ATAWAD
Unfortunately
NOT
AnyWhere !

Bibliography
• http://diveintohtml5.info/offline.html
• https://github.com/pazguille/offline-first
• https://jakearchibald.com/2014/offline-cookbook/
• https://github.com/offlinefirst/research/blob/master/links.md
• http://www.html5rocks.com/en/tutorials/offline/whats-offline/
• http://offlinefirst.org/
• http://fr.slideshare.net/MarcelKalveram/offline-first-the-painless-way
• https://developer.mozilla.org/en-US/Apps/Fundamentals/Offline
• https://uxdesign.cc/offline-93c2f8396124#.97njk8o5m
• https://www.ibm.com/developerworks/community/blogs/worklight/entry/
offline_patterns?lang=en
• http://apress.jensimmons.com/v5/pro-html5-programming/ch12.html
• http://alistapart.com/article/offline-first
• http://alistapart.com/article/application-cache-is-a-douchebag
• https://logbook.hanno.co/offline-first-matters-developers-know/
• https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/
Using_Service_Workers
• https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
• https://developer.chrome.com/apps/offline_storage
• http://martinfowler.com/eaaCatalog/index.html
• http://offlinestat.es/
• http://caniuse.com/
Jake Archibald

Softshake - Offline applications

More Related Content

What's hot (20)

Viewers also liked (18)

Similar to Softshake - Offline applications (20)

More from jeromevdl (13)

Recently uploaded (20)

Softshake - Offline applications