Embed Size (px)
DESCRIPTION
This talk aims to introduce the upcoming ServiceWorker technology, its basic functionalities, its lifecycle and its most common use cases. Then it moves to analyse in detail a less obvious implementation of this technology: how to create a wiki engine using ServiceWorker and IndexedDB.
Citation preview
ServiceWorkerdiscover the next web game changer
AppCache is badUnable to determinate low connectivity state.Local files used even if there is connection.
Remember Shared Web Worker?
a-domain.coma-domain.coma-domain.comb-domain.netc-domain.biza-domain.com
browser sessions
swworker.js
target.postMessage('msg');
Welcome Service Worker!
a-domain.coma-domain.coma-domain.comb-domain.netc-domain.biza-domain.com
browser sessions
sworker.jsthe net
some cache
https requests
Phase #1: register
navigator.serviceWorker
.register('./worker.js', {scope: './'})
.then(
function(registration){ /* installed */ },
function(){ /* fail! */ }
);
Install or update the Service Worker.
on index.html
Phase #2: oninstall, onactivate Install or update the Service Worker.
oninstall = function(){
/* setup cache, init database */
};
onactivate = function(){
/* clear cache, update database */
};
on worker.js
A Service Worker life cycle
index.html UA w.jsregister install
installing
w.js (v2)
reload register install
okredundant
installing
installedclose
activateok activating
activated
activatedok
ok installed
activatingactivate
a.k.a. why we need activate
Phase #3: fetch Called on each HTTP request.
onfetch = function(evt){
evt.respondWith(
new Response(new Blob(
['Custom HTML'], {type : 'text/html'}),
{ headers: {"Content-Type": "text/html"}}
));};
on worker.js
Using Caches similar to ES6 Map, still not supported by any browser
oninstall = function(evt){
e.waitUntil(
caches.create("shell-v1").then(
function(cache) {
return cache.addAll(["/app.html"])
}););};
on worker-cache.js
Using Caches / 2
onfetch = function(evt){
evt.respondWith(
caches.match(e.request).catch(function() {
return e.default();
}).catch(function() {
return caches.match("/fallback.html");
}));};
on worker-cache.js
var youtube = "https://gdata.youtube.com/feeds/api/videos?alt=json";
onfetch = function(evt){
evt.respondWith(
fetch(youtube + '&q=' + evt.request.url.match(/\?(.+)$/)[1])
.then(function(res){return res.json();})
.then(function(data){
var imgs = data.feed.entry.map(function(entry){
var url = entry['media$group']['media$thumbnail'][0].url;
return "<img src='" + url + "'>";
}).join("<br>");
return new Response(new Blob([imgs], {type : 'text/html'}), {
headers: {"Content-Type": "text/html"}
});}));};
Using fetch
var db;
oninstall = function(evt){
evt.waitUntil(
new Promise(function(resolve){
var request = indexedDB.open('simple-cache');
request.onupgradeneeded = function(){
request.result.createObjectStore('pages',
{keyPath: 'url', autoIncrement: false});
};
request.onsuccess = function(){
db = request.result;
resolve();
};}));};
Using IndexedDB
onfetch = function(evt){
evt.respondWith(
new Promise(function(resolve){
var pageStore = db.transaction('pages').objectStore('pages');
pageStore.get(evt.request.url).onsuccess = function(e){
if(e.target.result){
resolve(
new Response(new Blob([e.target.result.body], {type : 'text/html'}), {
headers: {"Content-Type": "text/html"}
})
);
}else{
fetch(evt.request.url).then(function(res){
res.text().then(function(text){
db.transaction('pages','readwrite').objectStore('pages')
.add({url: evt.request.url, body: text})
.onsuccess = function(){
resolve(res);
};});});}};}));};
Proof-Of-Concept
onfetch = function(){
e.respondWith(
new Promise(function(resolve) {
if(/\/savepage\?/.test(e.request.url)){
// - save the page on idDB
// - forge a 'done' response
}else{
// if the page exists on idDB return it
// otherwise forge a form that points to /savepage
}}));};
A Service Worker powered Wiki Engine
Support? Meh!But it’s getting better every day.
https://jakearchibald.github.io/isserviceworkerready/
Upcoming featurespush notifications
geofencing
Thanks!@sandropaganotti
github.com/sandropaganotti/service-worker-wiki
