Post on 15-Apr-2017
PROGRESSIVE WEB APPS
O MELHOR DA WEB, APPF
ICAD
A
@sergio_caelum sergiolopes.org
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>
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>
URIs
https://sergiolopes.github.io/shopping/
URIs
https://sergiolopes.github.io/shopping/https://sergiolopes.github.io/shopping/lojas.html
URIs
https://sergiolopes.github.io/shopping/https://sergiolopes.github.io/shopping/lojas.htmlhttps://sergiolopes.github.io/shopping/pagar-estacionamento.html
URIs
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
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
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
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
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
PROGRESSIVE WEB APPS
PROGRESSIVE WEB APPS
VISUAL APPFICADO
v
VISUAL APPFICADO
v
VISUAL APPFICADO
v
VISUAL APPFICADO
v
VISUAL APPFICADO
v
SPA AJAX
SPA AJAX
SPA AJAX
SPA AJAX
SPA AJAX
$('body').on('click', 'a', function(event){
SPA AJAX
$('body').on('click', 'a', function(event){$('.container').load(this.href + ' .conteudo');
SPA AJAX
$('body').on('click', 'a', function(event){$('.container').load(this.href + ' .conteudo');event.preventDefault();
SPA AJAX
$('body').on('click', 'a', function(event){$('.container').load(this.href + ' .conteudo');event.preventDefault();
});
SPA AJAX
$('body').on('click', 'a', function(event){$('.container').load(this.href + ' .conteudo');event.preventDefault();
});
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;
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;
HIST ORY
HIST ORY
HIST ORY
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();
});
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');
};
OFF LINE
OFF LINE
OFF LINE
OFF LINE
<html manifest="appcache.manifest">
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">
HW
HW QuaggaJS
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
HW
HW
THEME COLOR
THEME COLOR
<meta name="theme-color" content="#F77F00">
PROGRESSIVE WEB APPS
<!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>") );};
SERVICE WORKERS
this.oninstall = function(event) {console.log('instalou');
};
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
progressive enhancement
if ('serviceWorker' in navigator) {
}
SERVICE WORKERS
INSTALÁVEL iOS
<meta name="apple-mobile-web-app-capable" content="yes">
INSTALÁVEL iOS
<meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-title" content="Shopping">
INSTALÁVEL iOS
<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
INSTALÁVEL iOS
<link rel="manifest" href="manifest.json">
INSTALÁVEL Web Manifest
INSTALÁVEL Web Manifest
{ "short_name": "Shopping", "name": "O Shopping",
}
INSTALÁVEL Web Manifest
{ "short_name": "Shopping", "name": "O Shopping", "icons": [ { "src": "img/icon.png", "sizes": "192x192", "type": "image/png" } ],
}
INSTALÁVEL Web Manifest
{ "short_name": "Shopping", "name": "O Shopping", "icons": [ { "src": "img/icon.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "index.html",
}
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",
}
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",
}
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"}
INSTALÁVEL Web Manifest
INSTALÁVEL Web Manifest
INSTALL BANNERS
PROGRESSIVE WEB APPS
NOTIFICATIONSNotification.requestPermission(function(){ new Notification('Pagamento confirmado', { icon: 'img/icon.png', body: 'Saída liberada até 15h45' }); });
NOTIFICATIONSNotification.requestPermission(function(){ navigator.serviceWorker.ready.then(function(registration){ registration.showNotification('Pagamento confirmado', { icon: 'img/icon.png', body: 'Saída liberada até 15h45' }); });});
NOTIFICATIONS
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');});
PUSH NOTIFICATIONSnavigator.serviceWorker.ready.then(function(reg) { reg.pushManager.subscribe({userVisibleOnly: true}) .then(function(subscription) { // descobre servidor Push });
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(...) );});
BACKGROUND SYNC
BACKGROUND SYNCGEOFENCING
BACKGROUND SYNCGEOFENCINGALARMES TEMPORAIS
GEOLOCALIZAÇÃO
GEOLOCALIZAÇÃOVIBRAÇÃO
GEOLOCALIZAÇÃOVIBRAÇÃOCÂMERA
GEOLOCALIZAÇÃOVIBRAÇÃOCÂMERAMICROFONE
GEOLOCALIZAÇÃOVIBRAÇÃOCÂMERAMICROFONEBATERIA
GEOLOCALIZAÇÃOVIBRAÇÃOCÂMERAMICROFONEBATERIANET INFO
GEOLOCALIZAÇÃOVIBRAÇÃOCÂMERAMICROFONEBATERIANET INFOAUTOCOMPLETE
LINKÁVEL
LINKÁVELRESPONSIVA
LINKÁVELRESPONSIVASEGURA
LINKÁVELRESPONSIVASEGURAOFFLINE
LINKÁVELRESPONSIVASEGURAOFFLINEAPPY
LINKÁVELRESPONSIVASEGURAOFFLINEAPPYENGAJÁVEL
LINKÁVELRESPONSIVASEGURAOFFLINEAPPYENGAJÁVELINSTALÁVEL
PROGRESSIVE WEB APPS
OBRIGADO!
sergiolopes.org @sergio_caelum
https://sergiolopes.github.io/shopping/