PROGRESSIVE WEB APPS O MELHOR DA WEB, APPFICADA
sergiolopes.org @sergio_caelum
WEB vs APP
PROGRESSIVE WEB APPS
PROGRESSIVE WEB APPS
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>
<!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> URIs <a href="pagar.html"> Pagar estacionamento </a> </div> </main> </body> </html>
https://sergiolopes.github.io/shopping/ https://sergiolopes.github.io/shopping/lojas.html https://sergiolopes.github.io/shopping/pagar-estacionamento. https://sergiolopes.github.io/shopping/loja-adidas.html https://sergiolopes.github.io/shopping/loja-tip-top.html... URIs
https://sergiolopes.github.io/shopping/ https://sergiolopes.github.io/shopping/lojas.html https://sergiolopes.github.io/shopping/pagar-estacionamento. https://sergiolopes.github.io/shopping/loja-adidas.html https://sergiolopes.github.io/shopping/loja-tip-top.html... HTTPS
PROGRESSIVE WEB APPS
PROGRESSIVE WEB APPS
VISUAL APPFICADO v
SPA AJAX
$('body').on('click', 'a', function(event){ $('.container').load(this.href + '.conteudo'); event.preventdefault(); }); SPA AJAX transform: translate3d(-100%,0,0); transition: transform 600ms ease-out; transform: scale(0); transition: transform 500ms;
HIST ORY
$('body').on('click', 'a', function(event){ $('.container').load(this.href + '.conteudo'); event.preventdefault(); }); 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'); }; HIST ORY
OFF LINE
<html manifest="appcache.manifest"> CACHE MANIFEST OFF LINE CACHE: index.html lojas.html css/main.css img/entrada.jpg js/main.js js/vendor/jquery.min.js loja-adidas.html NETWORK: *
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); }); HW QuaggaJS
HW
<meta name="theme-color" content="#f77f00"> THEME COLOR
PROGRESSIVE WEB APPS
SERVICE WORKERS <!DOCTYPE html> <html> <head> <script> navigator.serviceworker.register('worker.js'); </script> </head> <body> <h1>página offline</h1> </body> </html>
SERVICE WORKERS this.onfetch = function(event) { }; console.log(event.request.url);
SERVICE WORKERS this.onfetch = function(event) { event.respondwith( new Response("<h1>Página offline!</h1>") ); };
SERVICE WORKERS this.onfetch = function(event) { event.respondwith( new Response("<h1>Página offline!</h1>") ); }; this.oninstall = function(event) { console.log('instalou'); };
SERVICE WORKERS caches.open('aplicacao').then(function(cache) { return cache.addall([ '/index.html', '/style.css', '/logo.png', '/lojas.html' ]); })
SERVICE WORKERS 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 this.onfetch = function(event) { event.respondwith( caches.match(event.request) ); };
SERVICE WORKERS if ('serviceworker' in navigator) { } progressive enhancement
<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
INSTALÁVEL ios
<link rel="manifest" href="manifest.json"> INSTALÁVEL Web Manifest
{ "short_name": "Shopping", "name": "Shopping App Demo", } INSTALÁVEL Web Manifest
{ "short_name": "Shopping", "name": "Shopping App Demo", "icons": [ { "src": "img/icon.png", "sizes": "192x192", "type": "image/png" } ], } INSTALÁVEL Web Manifest
{ "short_name": "Shopping", "name": "Shopping App Demo", "icons": [ { "src": "img/icon.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "index.html", } INSTALÁVEL Web Manifest
{ "short_name": "Shopping", "name": "Shopping App Demo", "icons": [ { "src": "img/icon.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "index.html", "orientation": "portrait", } INSTALÁVEL Web Manifest
{ } "short_name": "Shopping", "name": "Shopping App Demo", "icons": [ { "src": "img/icon.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "index.html", "orientation": "portrait", "display": "standalone" INSTALÁVEL Web Manifest
INSTALÁVEL Web Manifest
INSTALL BANNERS
PROGRESSIVE WEB APPS
NOTIFICATIONS Notification.requestPermission(function(){ new Notification('Pagamento confirmado', { icon: 'img/icon.png', body: 'Saída liberada até 15h45' }); });
NOTIFICATIONS Notification.requestPermission(function(){ navigator.serviceworker.ready.then(function(registration){ registration.shownotification('pagamento confirmado', { icon: 'img/icon.png', body: 'Saída liberada até 15h45' }); }); });
NOTIFICATIONS
NOTIFICATIONS Notification.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'); });
PUSH NOTIFICATIONS navigator.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(...) ); });
BACKGROUND SYNC GEOFENCING ALARMES TEMPORAIS
GEOLOCALIZAÇÃO VIBRAÇÃO CÂMERA MICROFONE BATERIA NET INFO AUTOCOMPLETE
LINKÁVEL RESPONSIVA SEGURA OFFLINE APPY ENGAJÁVEL INSTALÁVEL
PROGRESSIVE WEB APPS
OBRIGADO! https://sergiolopes.github.io/shopping/ sergiolopes.org @sergio_caelum