progressive web apps: trick or real magic? - maurizio mangione - codemotion milan 2016
Post on 16-Apr-2017
276 Views
Preview:
TRANSCRIPT
2001 -> 2016
Page speed
Build tools
CSS sprites
Assets minification
Server side compression
Image optimization More knowledge
Register
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
}
const CACHENAME = 'my-cache-v1';
const urlsToCache = [
'/', '/styles/main.css', '/script/main.js'
];
Cache resources
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHENAME)
.then(cache => cache.addAll(urlsToCache))
);
});
Cache resources
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then( response =>
response != null ? response : fetch(event.request);
)
);
});
Respond with
Cache only
self.addEventListener('fetch', event => {
event.respondWith(caches.match(event.request));
});
Network - Fallback to cache
self.addEventListener('fetch', event => {
event.respondWith(
fetch(event.request).catch(() =>
caches.match(event.request);
)
);
});
Cache - Fallback to Network
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then( response =>
response != null ? response : fetch(event.request);
)
);
});
SW-PRECACHEmodule.exports = {
staticFileGlobs: [
'app/css/**.css',
'app/**.html',
'app/images/**.*',
'app/js/**.js'
]
};
SW-TOOLBOXimportScripts('sw-toolbox.js');
toolbox.router.get('/myapp/index.html', toolbox.networkFirst);
// Match URLs that end in index.html
toolbox.router.get(/index.html$/, request =>
new Response('Handled a request for ' + request.url);
);
top related