ANDRII DATSENKO <ASDatsenko@luxoft.com>
TECHNICAL LEAD
May 17, 2017
ERR_INTERNET_DISCONNECTED
Page
SW
Network
Fast Performance
Instant Content Load
Push Notifications
Add to Home Screen
Service Workers are just one type of Worker. Web Workers in the browser allow us to run code in a separate worker thread.
JavaScript is a single threaded. However sometimes we need to do more than one thing at a time.
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js')
.then(reg => {
console.log('Service Worker Registered')
})
.catch(err => {
console.log(`Error registering worker ${err}`);
})
}
navigator.serviceWorker.register('./sw-api.js', { scope: '/api/' });
navigator.serviceWorker.register('./sw-assets.js', { scope: '/assets/' });
/assets/ Matches
Install
Active
self.addEventListener('install', function(e) {
caches.open('app-name')
.then((cache) => {
});
});
return cache.addAll([
'',
'js/script.js',
'css/style.css'
]);
Files have to be available!!
self.addEventListener('fetch', function(e) {
e.respondeWith(
caches.open('union-times')
.then((cache) => {
return caches
.match(e.request)
.then((res) => res);
});
})
);
});
return caches.match(e.request)
.then(function(res) {
return res || fetch(e.request).then(res => {
cache.put(e.request, res.clone());
return res;
});
});
self.addEventListener('fetch', function(e) {
e.respondWith(
fetch(e.request)
.then((response) => networkThenCache(response,e))
.catch(() => pullFromCache(e))
);
});
function networkThenCache(response,e) {
return caches.open(cacheVersion)
.then(function(cache) {
return caches.match(e.request)
.then(function(res) {
cache.put(e.request, response.clone());
return response;
});
});
}
function pullFromCache(e) {
return caches.open(cacheVersion)
.then(function(cache) {
return caches.match(e.request)
.then(function(res) {
return res;
});
});
}
const cacheVersion = 'app-name-2.0.0';
self.addEventListener('activate', function(e) {
e.waitUntil(
caches.keys().then((cacheNames) => {
return Promise.all(
cacheNames
.filter((name) => name === cacheVersion)
.map((cache) => caches.delete(cache))
);
})
})
);
});
toolbox.precache([
'/index.html',
'/site.css',
'/images/logo.png'
]);
toolbox.router.get(':foo/index.html', function(request, values) {
return new Response('Handled a request for ' + request.url +
', where foo is "' + values.foo + '"');
});
toolbox.router.post('/(.*)', apiHandler, {
origin: 'https://api.example.com'
});
Q&A Time
ANDRII DATSENKO <ASDatsenko@luxoft.com>
TECHNICAL LEAD
May 17, 2017
ERR_INTERNET_DISCONNECTED