Service worker: discover the next web game changer

1,197 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Service worker: discover the next web game changer

  1. 1. ServiceWorker discover the next web game changer
  2. 2. AppCache is bad Unable to determinate low connectivity state. Local files used even if there is connection.
  3. 3. Remember Shared Web Worker? browser sessions a-domain.com a-domain.com a-domain.com b-domain.net c-domain.biz a-domain.com swworker.js target.postMessage('msg');
  4. 4. Welcome Service Worker! browser sessions a-domain.com a-domain.com a-domain.com b-domain.net c-domain.biz a-domain.com sworker.js the net some cache https requests
  5. 5. Phase #1: register Install or update the Service Worker. navigator.serviceWorker .register('./worker.js', {scope: './'}) .then( function(registration){ /* installed */ }, function(){ /* fail! */ } ); on index.html
  6. 6. 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
  7. 7. A Service Worker life cycle a.k.a. why we need activate index.html UA w.js w.js (v2) register install installing reload ok installed activating activate register install ok redundant installing installed close activate ok activating activated ok activated
  8. 8. Phase #3: fetch Called on each HTTP request. onfetch = function(evt){ evt.respondWith( on worker.js new Response(new Blob( ['Custom HTML'], {type : 'text/html'}), { headers: {"Content-Type": "text/html"}} ));};
  9. 9. 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
  10. 10. 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
  11. 11. Using fetch 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"} });}));};
  12. 12. Using IndexedDB 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(); };}));};
  13. 13. 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); };});});}};}));};
  14. 14. Proof-Of-Concept A Service Worker powered Wiki Engine 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 }}));};
  15. 15. Support? Meh! But it’s getting better every day. https://jakearchibald.github.io/isserviceworkerready/
  16. 16. Upcoming features push notifications geofencing
  17. 17. Thanks! @sandropaganotti github.com/sandropaganotti/service-worker-wiki

×