Progressive Web Apps: o melhor da Web appficada

PROGRESSIVE WEB APPS

O MELHOR DA WEB, APPF

ICAD

A

@sergio_caelum sergiolopes.org

WEB vs APP

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>

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...

HTTPS

VISUAL APPFICADO

v

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


});

SPA AJAX


});

transform: translate3d(-100%,0,0);transition: transform 600ms ease-out;

SPA AJAX


});

transform: translate3d(-100%,0,0);transition: transform 600ms ease-out;

transform: scale(0);transition: transform 500ms;

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

<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 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

THEME COLOR

THEME COLOR

<meta name="theme-color" content="#F77F00">

<!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

INSTALÁVEL iOS


{ "short_name": "Shopping", "name": "O Shopping",

}


{ "short_name": "Shopping", "name": "O Shopping", "icons": [ { "src": "img/icon.png", "sizes": "192x192", "type": "image/png" } ],

}


{ "short_name": "Shopping", "name": "O Shopping", "icons": [ { "src": "img/icon.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "index.html",

}


{ "short_name": "Shopping", "name": "O Shopping", "icons": [ { "src": "img/icon.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "index.html", "orientation": "portrait",

}


{ "short_name": "Shopping", "name": "O Shopping", "icons": [ { "src": "img/icon.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "index.html", "orientation": "portrait", "display": "standalone",

}


{ "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"}

INSTALL BANNERS

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

OBRIGADO!

sergiolopes.org @sergio_caelum

https://sergiolopes.github.io/shopping/

Progressive Web Apps: o melhor da Web appficada

Technology

Transcript of Progressive Web Apps: o melhor da Web appficada