Discover ServiceWorker
-
Upload
sandro-paganotti -
Category
Technology
-
view
185 -
download
0
description
Transcript of Discover ServiceWorker
![Page 1: Discover ServiceWorker](https://reader033.fdocuments.in/reader033/viewer/2022052601/559945271a28ab784a8b45e5/html5/thumbnails/1.jpg)
Discover ServiceWorker
+SandroPaganotti@sandropaganotti
![Page 2: Discover ServiceWorker](https://reader033.fdocuments.in/reader033/viewer/2022052601/559945271a28ab784a8b45e5/html5/thumbnails/2.jpg)
HTTP GET /cat1.jpg
HTTP Response
SERVER
![Page 3: Discover ServiceWorker](https://reader033.fdocuments.in/reader033/viewer/2022052601/559945271a28ab784a8b45e5/html5/thumbnails/3.jpg)
SERVER
serviceworker.js
CACHE
FORGED RESPONSE
OTHER SERVER
SERVICEWORKERRECEIVES AFETCH EVENT...
![Page 4: Discover ServiceWorker](https://reader033.fdocuments.in/reader033/viewer/2022052601/559945271a28ab784a8b45e5/html5/thumbnails/4.jpg)
SERVER
CACHE
FORGED RESPONSE
OTHER SERVER
serviceworker.js
![Page 5: Discover ServiceWorker](https://reader033.fdocuments.in/reader033/viewer/2022052601/559945271a28ab784a8b45e5/html5/thumbnails/5.jpg)
SERVER
CACHE
FORGED RESPONSE
OTHER SERVER
serviceworker.js
![Page 6: Discover ServiceWorker](https://reader033.fdocuments.in/reader033/viewer/2022052601/559945271a28ab784a8b45e5/html5/thumbnails/6.jpg)
SERVER
CACHE
FORGED RESPONSE
OTHER SERVER
onfetch = function(evt){
evt.respondWith(
new Response('Sorry no, cats available :)')
);};
serviceworker.js
![Page 7: Discover ServiceWorker](https://reader033.fdocuments.in/reader033/viewer/2022052601/559945271a28ab784a8b45e5/html5/thumbnails/7.jpg)
Return Cached
CACHED?
ONLINE? Forward toServer
BASIC USAGE:CACHING FOROFFLINE ACCESS
Returnfallback
page
![Page 8: Discover ServiceWorker](https://reader033.fdocuments.in/reader033/viewer/2022052601/559945271a28ab784a8b45e5/html5/thumbnails/8.jpg)
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
![Page 9: Discover ServiceWorker](https://reader033.fdocuments.in/reader033/viewer/2022052601/559945271a28ab784a8b45e5/html5/thumbnails/9.jpg)
CACHING AND COMPILING HANDLEBAR TEMPLATES
SEARCH/*
*.JPG
Fetch, Compile,
Cache
CACHED? Return Cached
Return Cached
CACHED?
Fetch, Cache
![Page 10: Discover ServiceWorker](https://reader033.fdocuments.in/reader033/viewer/2022052601/559945271a28ab784a8b45e5/html5/thumbnails/10.jpg)
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
![Page 11: Discover ServiceWorker](https://reader033.fdocuments.in/reader033/viewer/2022052601/559945271a28ab784a8b45e5/html5/thumbnails/11.jpg)
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);
});
});
};
![Page 12: Discover ServiceWorker](https://reader033.fdocuments.in/reader033/viewer/2022052601/559945271a28ab784a8b45e5/html5/thumbnails/12.jpg)
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
![Page 13: Discover ServiceWorker](https://reader033.fdocuments.in/reader033/viewer/2022052601/559945271a28ab784a8b45e5/html5/thumbnails/13.jpg)
+SandroPaganotti@sandropaganotti
Thank you!