Service worker - Offline Web

SERVICE WORKER
OFFLINE-WEB WITH
BRUNOOSILVA

APP CACHE
ADVANTAGES
▸ Simple conﬁguration
▸ 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 ﬁle (Danger)
▸ Impossible develop or debug
▸ etc …

APP CACHE
IS LIMITED
IS COMPLICATE
IS BORING

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 ofﬂine 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 notiﬁcations 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
WORK WITH
BY CANIUSE.COM

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

Service worker - Offline Web

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (8)

Similaire à Service worker - Offline Web

Similaire à Service worker - Offline Web (20)

Dernier

Dernier (20)

Service worker - Offline Web