Always on! Or not?

Always ON!
…or not?
Carsten Sandtner (@casarock)
mediaman GmbH

about:me
Carsten Sandtner
@casarock
Technical Director
mediaman GmbH

The Beginning
NilsPeters-https://ﬂic.kr/p/9k2Wdp

Cookies
BrettJordan-https://ﬂic.kr/p/7ZRSzA

Ancient Times
ThomasConté-https://ﬂic.kr/p/9dzzpc

„HTML5 provides an application caching mechanism
that lets web-based applications run oﬄine.
Developers can use the Application Cache (AppCache)
interface to specify resources that the browser should
cache and make available to oﬄine users.“
-MDN
https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

• FILES ALWAYS COME FROM THE APPLICATIONCACHE, EVEN IF YOU’RE
ONLINE
• THE APPLICATIONCACHE ONLY UPDATES IF THE CONTENT OF THE
MANIFEST ITSELF HAS CHANGED
• THE APPLICATIONCACHE IS AN ADDITIONAL CACHE, NOT AT ALTERNATIVE
ONE
• NEVER EVER EVER FAR-FUTURE CACHE THE MANIFEST
• NON-CACHED RESOURCES WILL NOT LOAD ON A CACHED PAGE
• WE DON’T KNOW HOW WE GOT TO THE FALLBACK PAGE
• …

– Jake Archibald
http://alistapart.com/article/application-cache-is-a-douchebag
„Application Cache is a Douchebag“

2016
W3C decides to remove application cache
from standard

AlexanderBoden-https://ﬂic.kr/p/pMrQ1N
Things are getting better

Web Storages
• key/value store
• localStorage
• sessionStorage

localStorage
localStorage.myCar = 'Volkswagen Beetle';
localStorage['myCar'] = 'Volkswagen Beetle';
localStorage.setItem('myCar', 'Volkswagen Beetle');
let myCar = localStorage.getItem('myCar');
window.addEventListener('storage', function(e) { ... }
localStorage.removeItem('myCar');
localStorage.clear()
let complexType = {type: 'Beetle', manufacturer: 'Volkswagen'}
localStorage.setItem('myCar', JSON.stringify(complexType));

sessionStorage
sessionStorage.myCar = 'Volkswagen Beetle';
sessionStorage['myCar'] = 'Volkswagen Beetle';
sessionStorage.setItem('myCar', 'Volkswagen Beetle');
let myCar = sessionStorage.getItem('myCar');
window.addEventListener('storage', function(e) { ... }
sessionStorage.removeItem('myCar');
sessionStorage.clear()
let complexType = {type: 'Beetle', manufacturer: 'Volkswagen'}
sessionStorage.setItem('myCar', JSON.stringify(complexType));

WebStorages
• easy to use!
• good browser support!
• But:
• http/https deﬁne different stores!
• asynchronous
• Quota?

–Wikipedia
https://en.wikipedia.org/wiki/Indexed_Database_API
„The Indexed Database API, or IndexedDB (formerly
WebSimpleDB), is a W3C recommended web
browser standard interface for a transactional local
database of JSON objects collections with indices.“

IndexedDB: Open/Create
var indexedDB = window.indexedDB || window.mozIndexedDB ||
window.webkitIndexedDB || window.msIndexedDB;
var open = indexedDB.open("MyDatabase", 1);
// Create the schema
open.onupgradeneeded = function() {
var db = open.result;
var store = db.createObjectStore("FancyNamedStore", {keyPath: "id"});
var index = store.createIndex("NameIndex", ["name.last", "name.first"]);
};
open.onsuccess = function() {};
open.onfailure = function() {};

IndexedDB: Write/Read
open.onsuccess = function() {
var db = open.result;
var tx = db.transaction("FancyNamedStore", "readwrite");
var store = tx.objectStore("FancyNamedStore");
var index = store.index("NameIndex");
store.put({id: 12345, name: {first: "John", last: "Bar"}, age: 42});
store.put({id: 67890, name: {first: "Bob", last: "Foo"}, age: 35});
var getJohn = store.get(12345);
var getBob = index.get(["Foo", "Bob"]);
getJohn.onsuccess = function() {
console.log(getJohn.result.name.first); // => "John"
};
getBob.onsuccess = function() {
console.log(getBob.result.name.first); // => "Bob"
};
tx.oncomplete = function() {
db.close();
};
}

localForage* FTW!
* or any other library… like Store.js  
(https://github.com/marcuswestin/store.js/)

„localForage is a JavaScript library that improves the
oﬄine experience of your web app by using an
asynchronous data store with a simple, localStorage-
like API. It allows developers to store many types of
data instead of just strings.“
–https://localforage.github.io

„localForage includes a localStorage-backed fallback
store for browsers with no IndexedDB or WebSQL
support. Asynchronous storage is available in the
current versions of all major browsers: Chrome,
Firefox, IE, and Safari (including Safari Mobile).“

„localForage oﬀers a callback API as well as support
for the ES6 Promises API, so you can use
whichever you prefer.“

LocalForage
localforage.config({
driver : localforage.WEBSQL, // localforage.INDEXEDDB
// localforage.WEBSQL
// localforage.LOCALSTORAGE
name : 'carFinder',
version : 1.0,
size : 4980736, // Size of database, in bytes. WebSQL-only for now.
storeName : 'mycars', // Should be alphanumeric, with underscores.
description : 'Store all infos about my cars'
});
localforage.setItem('car', 'beetle').then(function () {
return localforage.getItem('car');
}).then(function (value) {
// Success, we've got a value
}).catch(function (err) {
// something went wrong
});

Modern Times
Image©byAppleComputerInc.

— https://github.com/w3c/ServiceWorker
„Service workers are a new browser feature that
provide event-driven scripts that run independently of
web pages. Unlike other workers, service workers
can be shut down at the end of events, note the lack
of retained references from documents, and they
have access to domain-wide events such as
network fetches.“

— https://github.com/w3c/ServiceWorker
„Service workers also have scriptable caches. Along
with the ability to respond to network requests from
certain web pages via script, this provides a way for
applications to “go oﬄine”.“

☁🖥 Internet
📜Service Worker
1 2
3

☁
🖥
Internet
📜Service Worker
📁Cache
1
2
3
3

☁
🖥
Internet
📜Service Worker
📁Cache
5
3
2
4
1

☁
🖥
Internet
📜Service Worker
📁Cache
❌
1
2
3
4

Register Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw-test/sw.js', {scope: '/sw-test/'})
.then(function(reg) {
// registration worked
console.log('Registration succeeded. Scope is ' + reg.scope);
}).catch(function(error) {
// registration failed
console.log('Registration failed with ' + error);
});
}

Service Worker Overview
self.addEventListener('install', function(event) {
console.log("installed");
});
self.addEventListener('activate', function(event) {
console.log("activated");
});
self.addEventListener('fetch', function(event) {
console.log("fetch");
event.respondWith(new Response("My response!!"));
});

Install
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll([
'/images/myImage.png',
'/index.html'
]);
})
);
});

Fetch
this.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});

Fetch & Update Cache
this.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(resp) {
return resp || fetch(event.request).then(function(response) {
caches.open('v1').then(function(cache) {
cache.put(event.request, response.clone());
});
return response;
});
}).catch(function() {
return caches.match('/sw-test/gallery/myLittleVader.jpg');
})
);
});

Clean Up Cache
this.addEventListener('activate', function(event) {
var cacheWhitelist = ['v2'];
event.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (cacheWhitelist.indexOf(key) === -1) {
return caches.delete(key);
}
}));
})
);
});

Update Cache
var CACHE_NAME = 'static-v9';
event.waitUntil(
caches.open(CACHE_NAME_STATIC).then(function(cache) {
return cache.addAll(['...']);
})
)
});
self.addEventListener('activate', function(event) {
var cacheWhitelist = [CACHE_NAME_STATIC];
event.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (cacheWhitelist.indexOf(key) === -1) {
return caches.delete(key);
}
}));
})
);
});

https://jakearchibald.github.io/isserviceworkerready/

GonzaloBaeza-https://ﬂic.kr/p/dCPzuE
Now & The Future

–Ada Rose Edwards
https://www.smashingmagazine.com/2016/09/the-building-blocks-of-progressive-web-apps/
„An ideal web app is a web page that has the best
aspects of both the web and native apps. It should
be fast and quick to interact with, ﬁt the device’s
viewport, remain usable oﬄine and be able to have
an icon on the home screen.“

OMG! PWA? WTF?
• Progressive
• Responsive
• Connectivity independent
• App-like
• Safe
• Discoverable
• Installable
• Linkable

PWA Architecture
„Thorsten“-https://ﬂic.kr/p/y3ib6k

Service Workers
www.audio-luci-store.it-https://ﬂic.kr/p/hQannE

Push Notiﬁcation
• Allow SW to wake up
• Works in Background, only SW is woken up
• Needs permission from user!

–W3C
https://w3c.github.io/push-api/
„The Push API enables sending of a push message
to a webapp via a push service.“

–Slightly modified by me…
„An ideal web page is a web page that has the best
aspects of both the web and native apps. It should
be fast and quick to interact with, fit the device’s
viewport and remain usable offline and be able to
have an icon on the home screen.“

Cache Data from APIs
• localStorage
• sessionStorage
• IndexedDB

Are you online?
var online = navigator.onLine;
if (!online) {
// Fallback -> Get Data from Storage!
}
else {
// Use network....
}

Wait?
• Slow network? (Edge, GPRS etc.)
• mobile networks are not reliable…
• „Lie“-Fi

Use Service Workers
• Provide ofﬂine fallback
• Cache static ﬁles
• Controll the network ;)

Demo
https://github.com/casarock/service-worker-demo

Considerations
• Don't abuse ofﬂine caches.
• How to deal with sensitive information?
• Are my assets permanently stored?
• Think about your use case!

Always on
is a lie.
Carsten Sandtner
@casarock
sandtner@mediaman.de
https://github.com/casarock
¯_(ツ)_/¯

Always on! Or not?

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Similar to Always on! Or not?

Similar to Always on! Or not? (20)

More from Carsten Sandtner

More from Carsten Sandtner (15)

Recently uploaded

Recently uploaded (20)

Always on! Or not?