Submit Search
Upload
Discover ServiceWorker
•
2 likes
•
1,276 views
Sandro Paganotti
Follow
Discover Service Worker: a few use cases of this upcoming game changer
Read less
Read more
Technology
Report
Share
Report
Share
1 of 13
Download now
Download to read offline
Recommended
Modern Mobile Web Apps
Modern Mobile Web Apps
dynamis
用 Javascript 實現你的想像
用 Javascript 實現你的想像
Anna Su
Progressive Mobile Web Apps
Progressive Mobile Web Apps
dynamis
Java script.trend(spec)
Java script.trend(spec)
dynamis
Service Workers
Service Workers
Patrick Kettner
Rubyslava2102
Rubyslava2102
Marius Sajgalik
Node.js and Web.js
Node.js and Web.js
Will Gunn
Invoke y como poner en marcha un entorno de trabajo
Invoke y como poner en marcha un entorno de trabajo
NaN-tic
Recommended
Modern Mobile Web Apps
Modern Mobile Web Apps
dynamis
用 Javascript 實現你的想像
用 Javascript 實現你的想像
Anna Su
Progressive Mobile Web Apps
Progressive Mobile Web Apps
dynamis
Java script.trend(spec)
Java script.trend(spec)
dynamis
Service Workers
Service Workers
Patrick Kettner
Rubyslava2102
Rubyslava2102
Marius Sajgalik
Node.js and Web.js
Node.js and Web.js
Will Gunn
Invoke y como poner en marcha un entorno de trabajo
Invoke y como poner en marcha un entorno de trabajo
NaN-tic
Web App Mvc
Web App Mvc
Will Gunn
Dart und JavaScript
Dart und JavaScript
Christian Grobmeier
PayPal's NemoJS and Applitools Eyes - Visual Testing with Node.js
PayPal's NemoJS and Applitools Eyes - Visual Testing with Node.js
Applitools
Dart != JavaScript
Dart != JavaScript
Christian Grobmeier
JavaScript Dynamic Loading
JavaScript Dynamic Loading
Tomokazu Kiyohara
Socket.io - Intro
Socket.io - Intro
Antonio Kobashikawa Carrasco
SSP - The Simple Singleton Pattern
SSP - The Simple Singleton Pattern
Rodolfo Dias
Фатальный недостаток Node.js
Фатальный недостаток Node.js
Oleksii Okhrymenko
Criando aplicações com vuejs
Criando aplicações com vuejs
Felipe César
GRUNT - The JavaScript Task Runner
GRUNT - The JavaScript Task Runner
Larry Nung
How to stop writing spaghetti code - JSConf.eu 2010
How to stop writing spaghetti code - JSConf.eu 2010
Tom Croucher
Task Automatisierung mit Grunt.js
Task Automatisierung mit Grunt.js
3rfan
Yeoman is awesome
Yeoman is awesome
DataArt
Heroku for Java
Heroku for Java
Anders Sveen
透過範例學習React (react tutorial 2)
透過範例學習React (react tutorial 2)
Justin Wu
Convox: Open Source Tooling for ECS
Convox: Open Source Tooling for ECS
Noah Zoschke
HTTP Interceptors com AngularJS
HTTP Interceptors com AngularJS
Rodrigo Branas
Where to start refactoring?
Where to start refactoring?
thiagoalessio
Config
Config
guest4f11e4
HTML5を使ったウェブアプリケーションの高速化
HTML5を使ったウェブアプリケーションの高速化
hagino 3000
More Related Content
What's hot
Web App Mvc
Web App Mvc
Will Gunn
Dart und JavaScript
Dart und JavaScript
Christian Grobmeier
PayPal's NemoJS and Applitools Eyes - Visual Testing with Node.js
PayPal's NemoJS and Applitools Eyes - Visual Testing with Node.js
Applitools
Dart != JavaScript
Dart != JavaScript
Christian Grobmeier
JavaScript Dynamic Loading
JavaScript Dynamic Loading
Tomokazu Kiyohara
Socket.io - Intro
Socket.io - Intro
Antonio Kobashikawa Carrasco
SSP - The Simple Singleton Pattern
SSP - The Simple Singleton Pattern
Rodolfo Dias
Фатальный недостаток Node.js
Фатальный недостаток Node.js
Oleksii Okhrymenko
Criando aplicações com vuejs
Criando aplicações com vuejs
Felipe César
GRUNT - The JavaScript Task Runner
GRUNT - The JavaScript Task Runner
Larry Nung
How to stop writing spaghetti code - JSConf.eu 2010
How to stop writing spaghetti code - JSConf.eu 2010
Tom Croucher
Task Automatisierung mit Grunt.js
Task Automatisierung mit Grunt.js
3rfan
Yeoman is awesome
Yeoman is awesome
DataArt
Heroku for Java
Heroku for Java
Anders Sveen
透過範例學習React (react tutorial 2)
透過範例學習React (react tutorial 2)
Justin Wu
Convox: Open Source Tooling for ECS
Convox: Open Source Tooling for ECS
Noah Zoschke
HTTP Interceptors com AngularJS
HTTP Interceptors com AngularJS
Rodrigo Branas
Where to start refactoring?
Where to start refactoring?
thiagoalessio
Config
Config
guest4f11e4
HTML5を使ったウェブアプリケーションの高速化
HTML5を使ったウェブアプリケーションの高速化
hagino 3000
What's hot
(20)
Web App Mvc
Web App Mvc
Dart und JavaScript
Dart und JavaScript
PayPal's NemoJS and Applitools Eyes - Visual Testing with Node.js
PayPal's NemoJS and Applitools Eyes - Visual Testing with Node.js
Dart != JavaScript
Dart != JavaScript
JavaScript Dynamic Loading
JavaScript Dynamic Loading
Socket.io - Intro
Socket.io - Intro
SSP - The Simple Singleton Pattern
SSP - The Simple Singleton Pattern
Фатальный недостаток Node.js
Фатальный недостаток Node.js
Criando aplicações com vuejs
Criando aplicações com vuejs
GRUNT - The JavaScript Task Runner
GRUNT - The JavaScript Task Runner
How to stop writing spaghetti code - JSConf.eu 2010
How to stop writing spaghetti code - JSConf.eu 2010
Task Automatisierung mit Grunt.js
Task Automatisierung mit Grunt.js
Yeoman is awesome
Yeoman is awesome
Heroku for Java
Heroku for Java
透過範例學習React (react tutorial 2)
透過範例學習React (react tutorial 2)
Convox: Open Source Tooling for ECS
Convox: Open Source Tooling for ECS
HTTP Interceptors com AngularJS
HTTP Interceptors com AngularJS
Where to start refactoring?
Where to start refactoring?
Config
Config
HTML5を使ったウェブアプリケーションの高速化
HTML5を使ったウェブアプリケーションの高速化
Discover ServiceWorker
1.
Discover ServiceWorker +SandroPaganotti @sandropaganotti
2.
HTTP GET /cat1.jpg HTTP
Response SERVER
3.
SERVER serviceworker.js CACHE FORGED RESPONSE OTHER SERVER SERVICEWORKER RECEIVES
A FETCH EVENT...
4.
SERVER CACHE FORGED RESPONSE OTHER SERVER serviceworker.js
5.
SERVER CACHE FORGED RESPONSE OTHER SERVER serviceworker.js
6.
SERVER CACHE FORGED RESPONSE OTHER SERVER onfetch
= function(evt){ evt.respondWith( new Response('Sorry no, cats available :)') );}; serviceworker.js
7.
Return Cached CACHED? ONLINE? Forward to Server BASIC
USAGE: CACHING FOR OFFLINE ACCESS Return fallback page
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.
CACHING AND COMPILING HANDLEBAR TEMPLATES SEARCH/* *.JPG Fetch, Compile, Cache CACHED? Return Cached Return Cached CACHED? Fetch, Cache
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.
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.
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.
+SandroPaganotti @sandropaganotti Thank you!
Download now