Progressive Web Apps: o melhor da Web appficada
-
Upload
caelum -
Category
Technology
-
view
38.243 -
download
5
Transcript of Progressive Web Apps: o melhor da Web appficada
![Page 1: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/1.jpg)
PROGRESSIVE WEB APPS
O MELHOR DA WEB, APPF
ICAD
A
![Page 2: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/2.jpg)
@sergio_caelum sergiolopes.org
![Page 3: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/3.jpg)
WEB vs APP
![Page 4: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/4.jpg)
PROGRESSIVE WEB APPS
![Page 5: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/5.jpg)
PROGRESSIVE WEB APPS
![Page 6: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/6.jpg)
HTML semântico
<!doctype html><html lang="pt-br"><head> <title>Shopping</title></head><body> <main class="home">
<h1>O Shopping</h1>
<div class="collection"><a href="lojas.html">
Lojas & Restaurantes</a>
<a href="pagar.html">Pagar estacionamento
</a></div>
</main></body></html>
![Page 7: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/7.jpg)
URIs
<!doctype html><html lang="pt-br"><head> <title>Shopping</title></head><body> <main class="home">
<h1>O Shopping</h1>
<div class="collection"><a href="lojas.html">
Lojas & Restaurantes</a>
<a href="pagar.html">Pagar estacionamento
</a></div>
</main></body></html>
![Page 8: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/8.jpg)
URIs
![Page 9: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/9.jpg)
https://sergiolopes.github.io/shopping/
URIs
![Page 10: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/10.jpg)
https://sergiolopes.github.io/shopping/https://sergiolopes.github.io/shopping/lojas.html
URIs
![Page 11: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/11.jpg)
https://sergiolopes.github.io/shopping/https://sergiolopes.github.io/shopping/lojas.htmlhttps://sergiolopes.github.io/shopping/pagar-estacionamento.html
URIs
![Page 12: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/12.jpg)
https://sergiolopes.github.io/shopping/https://sergiolopes.github.io/shopping/lojas.htmlhttps://sergiolopes.github.io/shopping/pagar-estacionamento.htmlhttps://sergiolopes.github.io/shopping/loja-adidas.html
URIs
![Page 13: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/13.jpg)
https://sergiolopes.github.io/shopping/https://sergiolopes.github.io/shopping/lojas.htmlhttps://sergiolopes.github.io/shopping/pagar-estacionamento.htmlhttps://sergiolopes.github.io/shopping/loja-adidas.htmlhttps://sergiolopes.github.io/shopping/loja-tip-top.html
URIs
![Page 14: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/14.jpg)
https://sergiolopes.github.io/shopping/https://sergiolopes.github.io/shopping/lojas.htmlhttps://sergiolopes.github.io/shopping/pagar-estacionamento.htmlhttps://sergiolopes.github.io/shopping/loja-adidas.htmlhttps://sergiolopes.github.io/shopping/loja-tip-top.html...
URIs
![Page 15: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/15.jpg)
https://sergiolopes.github.io/shopping/https://sergiolopes.github.io/shopping/lojas.htmlhttps://sergiolopes.github.io/shopping/pagar-estacionamento.htmlhttps://sergiolopes.github.io/shopping/loja-adidas.htmlhttps://sergiolopes.github.io/shopping/loja-tip-top.html...
URIs
![Page 16: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/16.jpg)
https://sergiolopes.github.io/shopping/https://sergiolopes.github.io/shopping/lojas.htmlhttps://sergiolopes.github.io/shopping/pagar-estacionamento.htmlhttps://sergiolopes.github.io/shopping/loja-adidas.htmlhttps://sergiolopes.github.io/shopping/loja-tip-top.html...
HTTPS
![Page 17: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/17.jpg)
PROGRESSIVE WEB APPS
![Page 18: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/18.jpg)
PROGRESSIVE WEB APPS
![Page 19: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/19.jpg)
VISUAL APPFICADO
v
![Page 20: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/20.jpg)
VISUAL APPFICADO
v
![Page 21: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/21.jpg)
VISUAL APPFICADO
v
![Page 22: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/22.jpg)
VISUAL APPFICADO
v
![Page 23: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/23.jpg)
VISUAL APPFICADO
v
![Page 24: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/24.jpg)
SPA AJAX
![Page 25: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/25.jpg)
SPA AJAX
![Page 26: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/26.jpg)
SPA AJAX
![Page 27: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/27.jpg)
SPA AJAX
![Page 28: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/28.jpg)
SPA AJAX
$('body').on('click', 'a', function(event){
![Page 29: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/29.jpg)
SPA AJAX
$('body').on('click', 'a', function(event){$('.container').load(this.href + ' .conteudo');
![Page 30: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/30.jpg)
SPA AJAX
$('body').on('click', 'a', function(event){$('.container').load(this.href + ' .conteudo');event.preventDefault();
![Page 31: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/31.jpg)
SPA AJAX
$('body').on('click', 'a', function(event){$('.container').load(this.href + ' .conteudo');event.preventDefault();
});
![Page 32: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/32.jpg)
SPA AJAX
$('body').on('click', 'a', function(event){$('.container').load(this.href + ' .conteudo');event.preventDefault();
});
![Page 33: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/33.jpg)
SPA AJAX
$('body').on('click', 'a', function(event){$('.container').load(this.href + ' .conteudo');event.preventDefault();
});
transform: translate3d(-100%,0,0);transition: transform 600ms ease-out;
![Page 34: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/34.jpg)
SPA AJAX
$('body').on('click', 'a', function(event){$('.container').load(this.href + ' .conteudo');event.preventDefault();
});
transform: translate3d(-100%,0,0);transition: transform 600ms ease-out;
transform: scale(0);transition: transform 500ms;
![Page 35: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/35.jpg)
HIST ORY
![Page 36: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/36.jpg)
HIST ORY
![Page 37: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/37.jpg)
HIST ORY
![Page 38: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/38.jpg)
HIST ORY
$('body').on('click', 'a', function(event){
$('.container').load(this.href + ' .conteudo');event.preventDefault();
});
![Page 39: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/39.jpg)
HIST ORY
$('body').on('click', 'a', function(event){window.history.pushState({}, '', this.href);$('.container').load(this.href + ' .conteudo');event.preventDefault();
});
![Page 40: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/40.jpg)
HIST ORY
$('body').on('click', 'a', function(event){window.history.pushState({}, '', this.href);$('.container').load(this.href + ' .conteudo');event.preventDefault();
});
window.onpopstate = function(event) {$('.container').load(location.href + ' .conteudo');
};
![Page 41: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/41.jpg)
OFF LINE
![Page 42: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/42.jpg)
OFF LINE
![Page 43: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/43.jpg)
OFF LINE
![Page 44: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/44.jpg)
OFF LINE
<html manifest="appcache.manifest">
![Page 45: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/45.jpg)
OFF LINE
CACHE MANIFEST
CACHE:index.htmllojas.htmlcss/main.cssimg/entrada.jpgjs/main.jsjs/vendor/jquery.min.jsloja-adidas.html
NETWORK:*
<html manifest="appcache.manifest">
![Page 46: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/46.jpg)
HW
![Page 47: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/47.jpg)
HW QuaggaJS
![Page 48: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/48.jpg)
HW
Quagga.init({ inputStream : { name : "Live", type : "LiveStream" }, decoder : { readers : ["code_128_reader"] }}, function() { Quagga.start();});
Quagga.onDetected(function(result) { var code = result.codeResult.code; alert('Código: ' + code);});
QuaggaJS
![Page 49: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/49.jpg)
HW
![Page 50: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/50.jpg)
HW
![Page 51: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/51.jpg)
THEME COLOR
![Page 52: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/52.jpg)
THEME COLOR
<meta name="theme-color" content="#F77F00">
![Page 53: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/53.jpg)
PROGRESSIVE WEB APPS
![Page 54: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/54.jpg)
<!DOCTYPE html><html><head><script>navigator.serviceWorker.register('worker.js');
</script></head><body><h1>Página offline</h1>
</body></html>
SERVICE WORKERS
![Page 55: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/55.jpg)
this.onfetch = function(event) {
console.log(event.request.url);
};
SERVICE WORKERS
![Page 56: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/56.jpg)
this.onfetch = function(event) {event.respondWith(
new Response("<h1>Página offline!</h1>") );};
SERVICE WORKERS
![Page 57: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/57.jpg)
this.onfetch = function(event) {event.respondWith(
new Response("<h1>Página offline!</h1>") );};
SERVICE WORKERS
this.oninstall = function(event) {console.log('instalou');
};
![Page 58: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/58.jpg)
caches.open('aplicacao').then(function(cache) { return cache.addAll([ '/index.html', '/style.css', '/logo.png', '/lojas.html' ]); })
SERVICE WORKERS
![Page 59: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/59.jpg)
this.oninstall = function(event){ event.waitUntil( caches.open('aplicacao').then(function(cache) { return cache.addAll([ '/index.html', '/style.css', '/logo.png', '/lojas.html' ]); }) );};
SERVICE WORKERS
![Page 60: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/60.jpg)
this.onfetch = function(event) { event.respondWith( caches.match(event.request) );};
SERVICE WORKERS
![Page 61: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/61.jpg)
progressive enhancement
if ('serviceWorker' in navigator) {
}
SERVICE WORKERS
![Page 62: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/62.jpg)
INSTALÁVEL iOS
![Page 63: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/63.jpg)
<meta name="apple-mobile-web-app-capable" content="yes">
INSTALÁVEL iOS
![Page 64: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/64.jpg)
<meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-title" content="Shopping">
INSTALÁVEL iOS
![Page 65: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/65.jpg)
<meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-title" content="Shopping"><link rel="apple-touch-icon-precomposed" href="img/icon.png">
INSTALÁVEL iOS
![Page 66: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/66.jpg)
INSTALÁVEL iOS
![Page 67: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/67.jpg)
INSTALÁVEL iOS
![Page 68: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/68.jpg)
<link rel="manifest" href="manifest.json">
INSTALÁVEL Web Manifest
![Page 69: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/69.jpg)
INSTALÁVEL Web Manifest
{ "short_name": "Shopping", "name": "O Shopping",
}
![Page 70: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/70.jpg)
INSTALÁVEL Web Manifest
{ "short_name": "Shopping", "name": "O Shopping", "icons": [ { "src": "img/icon.png", "sizes": "192x192", "type": "image/png" } ],
}
![Page 71: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/71.jpg)
INSTALÁVEL Web Manifest
{ "short_name": "Shopping", "name": "O Shopping", "icons": [ { "src": "img/icon.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "index.html",
}
![Page 72: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/72.jpg)
INSTALÁVEL Web Manifest
{ "short_name": "Shopping", "name": "O Shopping", "icons": [ { "src": "img/icon.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "index.html", "orientation": "portrait",
}
![Page 73: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/73.jpg)
INSTALÁVEL Web Manifest
{ "short_name": "Shopping", "name": "O Shopping", "icons": [ { "src": "img/icon.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "index.html", "orientation": "portrait", "display": "standalone",
}
![Page 74: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/74.jpg)
INSTALÁVEL Web Manifest
{ "short_name": "Shopping", "name": "O Shopping", "icons": [ { "src": "img/icon.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "index.html", "orientation": "portrait", "display": "standalone", "theme_color": "#F77F00", "background_color": "#FFB400"}
![Page 75: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/75.jpg)
INSTALÁVEL Web Manifest
![Page 76: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/76.jpg)
INSTALÁVEL Web Manifest
![Page 77: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/77.jpg)
INSTALL BANNERS
![Page 78: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/78.jpg)
PROGRESSIVE WEB APPS
![Page 79: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/79.jpg)
NOTIFICATIONSNotification.requestPermission(function(){ new Notification('Pagamento confirmado', { icon: 'img/icon.png', body: 'Saída liberada até 15h45' }); });
![Page 80: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/80.jpg)
NOTIFICATIONSNotification.requestPermission(function(){ navigator.serviceWorker.ready.then(function(registration){ registration.showNotification('Pagamento confirmado', { icon: 'img/icon.png', body: 'Saída liberada até 15h45' }); });});
![Page 81: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/81.jpg)
NOTIFICATIONS
![Page 82: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/82.jpg)
NOTIFICATIONSNotification.requestPermission(function(){ navigator.serviceWorker.ready.then(function(registration){ registration.showNotification('Pagamento confirmado', { icon: 'img/icon.png', body: 'Saída liberada até 15h45' }); });});
self.addEventListener('notificationclick', function(event) { clients.openWindow('/timer.html');});
![Page 83: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/83.jpg)
PUSH NOTIFICATIONSnavigator.serviceWorker.ready.then(function(reg) { reg.pushManager.subscribe({userVisibleOnly: true}) .then(function(subscription) { // descobre servidor Push });
![Page 84: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/84.jpg)
PUSH NOTIFICATIONSnavigator.serviceWorker.ready.then(function(reg) { reg.pushManager.subscribe({userVisibleOnly: true}) .then(function(subscription) { // descobre servidor Push });
self.addEventListener('push', function(event) { event.waitUntil( self.registration.showNotification(...) );});
![Page 85: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/85.jpg)
![Page 86: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/86.jpg)
BACKGROUND SYNC
![Page 87: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/87.jpg)
BACKGROUND SYNCGEOFENCING
![Page 88: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/88.jpg)
BACKGROUND SYNCGEOFENCINGALARMES TEMPORAIS
![Page 89: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/89.jpg)
![Page 90: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/90.jpg)
GEOLOCALIZAÇÃO
![Page 91: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/91.jpg)
GEOLOCALIZAÇÃOVIBRAÇÃO
![Page 92: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/92.jpg)
GEOLOCALIZAÇÃOVIBRAÇÃOCÂMERA
![Page 93: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/93.jpg)
GEOLOCALIZAÇÃOVIBRAÇÃOCÂMERAMICROFONE
![Page 94: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/94.jpg)
GEOLOCALIZAÇÃOVIBRAÇÃOCÂMERAMICROFONEBATERIA
![Page 95: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/95.jpg)
GEOLOCALIZAÇÃOVIBRAÇÃOCÂMERAMICROFONEBATERIANET INFO
![Page 96: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/96.jpg)
GEOLOCALIZAÇÃOVIBRAÇÃOCÂMERAMICROFONEBATERIANET INFOAUTOCOMPLETE
![Page 97: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/97.jpg)
![Page 98: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/98.jpg)
LINKÁVEL
![Page 99: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/99.jpg)
LINKÁVELRESPONSIVA
![Page 100: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/100.jpg)
LINKÁVELRESPONSIVASEGURA
![Page 101: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/101.jpg)
LINKÁVELRESPONSIVASEGURAOFFLINE
![Page 102: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/102.jpg)
LINKÁVELRESPONSIVASEGURAOFFLINEAPPY
![Page 103: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/103.jpg)
LINKÁVELRESPONSIVASEGURAOFFLINEAPPYENGAJÁVEL
![Page 104: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/104.jpg)
LINKÁVELRESPONSIVASEGURAOFFLINEAPPYENGAJÁVELINSTALÁVEL
![Page 105: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/105.jpg)
PROGRESSIVE WEB APPS
![Page 106: Progressive Web Apps: o melhor da Web appficada](https://reader034.fdocument.pub/reader034/viewer/2022051404/5876e6701a28ab046d8b6165/html5/thumbnails/106.jpg)
OBRIGADO!
sergiolopes.org @sergio_caelum
https://sergiolopes.github.io/shopping/