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

827 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
827
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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!

×