Embed Size (px)
DESCRIPTION
Discover Service Worker: a few use cases of this upcoming game changer
Citation preview
Discover ServiceWorker
+SandroPaganotti@sandropaganotti
HTTP GET /cat1.jpg
HTTP Response
SERVER
SERVER
serviceworker.js
CACHE
FORGED RESPONSE
OTHER SERVER
SERVICEWORKERRECEIVES AFETCH EVENT...
SERVER
CACHE
FORGED RESPONSE
OTHER SERVER
serviceworker.js
SERVER
CACHE
FORGED RESPONSE
OTHER SERVER
serviceworker.js
SERVER
CACHE
FORGED RESPONSE
OTHER SERVER
onfetch = function(evt){
evt.respondWith(
new Response('Sorry no, cats available :)')
);};
serviceworker.js
Return Cached
CACHED?
ONLINE? Forward toServer
BASIC USAGE:CACHING FOROFFLINE ACCESS
Returnfallback
page
importScripts('serviceworker-cache-polyfill.js');
oninstall = function(evt) {
evt.waitUntil(
caches.open('assets').then(function(cache){
return cache.addAll([ 'page.html', 'style.css','app.js','404.html' ]);
})
);
};
onfetch = function(evt) {
evt.respondWith(
caches.match(evt.request).catch(function() {
return evt.default();
}).catch(function() {
return caches.match("404.html");
})
);
};
Not yet available
through polyfill
CACHING AND COMPILING HANDLEBAR TEMPLATES
SEARCH/*
*.JPG
Fetch, Compile,
Cache
CACHED? Return Cached
Return Cached
CACHED?
Fetch, Cache
onfetch = function(evt) {
if(/\/search\/[^\/]+$/.test(evt.request.url)){
evt.respondWith(caches.match(evt.request).then(function(entry) {
return entry || performSearch(evt.request);
}));
} else if(/\.jpg$/.test(evt.request.url)){
evt.respondWith(getImage(evt.request));
}
};
Routing
Get Image
getImage = function(request) {
return caches.match(request).then(function(image){
return image || fetch(request.url,
{mode: 'no-cors'}).then(function(res){
return storeResponse('img-cache', request, res);
});
});
};
importScripts('handlebars-v2.0.0.js');
var youtube = "https://gdata.youtube.com/feeds/api/videos?alt=json&q=";
performSearch = function(request) {
return caches.match('list.hbs').then(function(tpl) {
return tpl.text();
}).then(function(body){
return fetch(youtube + request.url.split('/').pop()).then(function(res) {
return res.json();
}).then(function(json){
list = list || Handlebars.compile(body);
var response = new Response(list(json),
{ headers: {"Content-Type": "text/html"} });
return storeResponse('pages-cache', request, response);
});})};
Get template from cache
Fetch JSON from YouTube
Generating HTML
+SandroPaganotti@sandropaganotti
Thank you!
