Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Discover
ServiceWorker
+SandroPaganotti
@sandropaganotti
HTTP GET /cat1.jpg
HTTP Response
SERVER
SERVER
serviceworker.js
CACHE
FORGED RESPONSE
OTHER SERVER
SERVICEWORKER
RECEIVES A
FETCH 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...
Return
Cached
CACHED?
ONLINE? Forward to
Server
BASIC USAGE:
CACHING FOR
OFFLINE ACCESS
Return
fallback
page
importScripts('serviceworker-cache-polyfill.js');
oninstall = function(evt) {
evt.waitUntil(
caches.open('assets').then(fu...
CACHING AND
COMPILING
HANDLEBAR
TEMPLATES
SEARCH/*
*.JPG
Fetch,
Compile,
Cache
CACHED? Return
Cached
Return
Cached
CACHED?...
onfetch = function(evt) {
if(//search/[^/]+$/.test(evt.request.url)){
evt.respondWith(caches.match(evt.request).then(funct...
Get Image
getImage = function(request) {
return caches.match(request).then(function(image){
return image || fetch(request....
importScripts('handlebars-v2.0.0.js');
var youtube = "https://gdata.youtube.com/feeds/api/videos?alt=json&q=";
performSear...
+SandroPaganotti
@sandropaganotti
Thank you!
Upcoming SlideShare
Loading in …5
×

Discover ServiceWorker

938 views

Published on

Discover Service Worker: a few use cases of this upcoming game changer

Published in: Technology
  • Be the first to comment

Discover ServiceWorker

  1. 1. Discover ServiceWorker +SandroPaganotti @sandropaganotti
  2. 2. HTTP GET /cat1.jpg HTTP Response SERVER
  3. 3. SERVER serviceworker.js CACHE FORGED RESPONSE OTHER SERVER SERVICEWORKER RECEIVES A FETCH EVENT...
  4. 4. SERVER CACHE FORGED RESPONSE OTHER SERVER serviceworker.js
  5. 5. SERVER CACHE FORGED RESPONSE OTHER SERVER serviceworker.js
  6. 6. SERVER CACHE FORGED RESPONSE OTHER SERVER onfetch = function(evt){ evt.respondWith( new Response('Sorry no, cats available :)') );}; serviceworker.js
  7. 7. Return Cached CACHED? ONLINE? Forward to Server BASIC USAGE: CACHING FOR OFFLINE ACCESS Return fallback page
  8. 8. 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
  9. 9. CACHING AND COMPILING HANDLEBAR TEMPLATES SEARCH/* *.JPG Fetch, Compile, Cache CACHED? Return Cached Return Cached CACHED? Fetch, Cache
  10. 10. 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
  11. 11. 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); }); }); };
  12. 12. 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
  13. 13. +SandroPaganotti @sandropaganotti Thank you!

×