19
SERVICE WORKER OFFLINE-WEB WITH BRUNOOSILVA
| Date post: | 12-Apr-2017 |
| Category: |
Software |
| Upload: | bruno-oliveira |
| View: | 486 times |
| Download: | 0 times |
SERVICE WORKEROFFLINE-WEB WITH
BRUNOOSILVA
APP CACHEBEFORE…
APP CACHE
ADVANTAGES
▸ Simple configuration
▸ Work in all browsers (up to IE)
▸ Quick to implement
APP CACHE
HTML 1 <html manifest="hello.appcache">
HELLO.APPCACHE 1 /index.html 2 /pagina-2.html 3 /nao-disponivel.html 4 /style.css 5 /app.js 6 /burro.jpg 7 8 NETWORK: 9 http://www.google-analytics.com/ga.js 10 11 FALLBACK: 12 /burro.jpg /sem-foto.jpg
APP CACHE
DISADVANTAGES
▸ Forget any url
▸ Set mime-type in server
▸ Nothing can give error 404 and 500
▸ No cache the manifest file (Danger)
▸ Impossible develop or debug
▸ etc …
APP CACHE IS LIMITED
IS COMPLICATE
IS BORING
SERVICE WORKERNOW
SERVICE WORKER
WHATS IS ?
▸ Service workers essentially act as proxy servers that sit between web applications, and the browser and network (when available). They are intended to (amongst other things) enable the creation of effective offline experiences, intercepting network requests and taking appropriate action based on whether the network is available and updated assets reside on the server. They will also allow access to push notifications and background sync APIs.
SERVICE WORKER
INITIALIZATION 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <script> 5 if ('serviceWorker' in navigator) { 6 navigator.serviceWorker.register('magica.js') 7 .then(function(){ 8 console.log('Tem Service Worker! :)'); 9 }, function(err){ 10 console.log('Deu ruim! :(', err); 11 }); 12 } else { 13 console.error('Use um browser melhor. :)'); 14 } 15 </script> 16 </head> 17 <body> 18 <h1>Service Worker</h1> 19 </body> 20 </html>
SERVICE WORKER
MAGICA.JS - INSTALL 1 var path = '/', 2 CACHE_NAME = 'bluesoft-v1'; 3 4 this.addEventListener('install', function(event) { 5 // Instala app, adicionar os arquivos no cache 6 7 event.waitUntil( 8 caches.open(CACHE_NAME).then(function(cache) { 9 return cache.addAll([ 10 path, 11 path + 'index.html', 12 path + 'pagina-2.html', 13 path + 'nao-disponivel.html', 14 path + 'style.css', 15 path + 'app.js', 16 path + 'burro.jpg' 17 ]); 18 }) 19 ); 20 });
SERVICE WORKER
MAGICA.JS - FETCH 1 this.addEventListener('fetch', function(event) { 2 var response; 3 event.respondWith(caches.match(event.request) 4 .then(function(r) { 5 response = r; 6 if(!response){ 7 throw "Nao tem no cache"; 8 } 9 caches.open(CACHE_NAME).then(function(cache) { 10 cache.put(event.request, response); 11 }); 12 return response.clone(); 13 }).catch(function() { 14 return fetch(event.request).then(function(res){ 15 return res.clone(); 16 }, function(err){ 17 return caches.match(path + 'nao-disponivel.html'); 18 }); 19 }) 20 ); 21 });
SERVICE WORKER
MAGICA.JS - UPDATE WITH INSTALL AND ACTIVATE 1 this.addEventListener('install', function(event) { 2 // Instala app, adicionar os arquivos no cache 3 4 event.waitUntil( 5 caches.open('bluesoft-v2').then(function(cache) { 6 return cache.addAll([ 7 path, 8 path + 'index.html', 9 path + 'new-file.html' 10 ]); 11 }) 12 ); 13 }); 14 15 this.addEventListener('activate', function(event) { 16 // App active and working 17 18 event.waitUntil( 19 caches.delete('bluesoft-v1') 20 ); 21 });
SERVICE WORKER
ADVANTAGES
▸ Run in background ( with Browser closed )
▸ Based in promise
▸ Cache API
▸ Programmatic and controllable
▸ Chrome like ( Updates )
▸ The future
▸ etc …
SERVICE WORKER
DISADVANTAGES, BUT FOR SECURITY
▸ HTTPS only
▸ All asynchronous
▸ Not working localStorage (IndexDb only)
▸ Ajax synchronous
▸ Stop at any time
SERVICE WORKER
IDEAS FANTASTIC
BACKGROUND SYNC 1 registration.sync.register('event'); 2 this.onsync = function(){}
PUSH NOTIFICATION 1 registration.pushRegistrationManager.register() 2 .then(function(details){ }); 3 4 this.onpush = function(event){ 5 new Notification(event.menssage.data); 6 }; 7 8 this.onnotificationclick = function(){ 9 new ServiceWorkerClient('/index.html') 10 };
GEOFENCING ALARM AND MUCH MORE…
SERVICE WORKER
EDITORS
SERVICE WORKER
REFERENCES
▸ https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
▸ https://www.w3.org/TR/service-workers/
▸ http://caniuse.com/#search=serviceWorker
▸ https://github.com/brunoosilva/service-worker
THANKS
BRUNOOSILVA
