52
PROGRESSIVE WEB APPS O MELHOR DA WEB, APPFICADA

PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

PROGRESSIVE WEB APPS

O MELHOR DA WEB, APPF

ICAD

A

Page 2: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

@sergio_caelumsergiolopes.org

Page 3: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

WEB vs APP

Page 4: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

PROGRESSIVE WEB APPS

Page 5: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

PROGRESSIVE WEB APPS

Page 6: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

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 &amp; Restaurantes</a>

<a href="pagar.html">Pagar estacionamento

</a></div>

</main></body></html>

Page 7: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

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 &amp; Restaurantes</a>

<a href="pagar.html">Pagar estacionamento

</a></div>

</main></body></html>

Page 8: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

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 9: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

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 10: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

PROGRESSIVE WEB APPS

Page 11: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

PROGRESSIVE WEB APPS

Page 12: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

VISUAL APPFICADO

v

Page 13: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

SPA AJAX

Page 14: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

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 15: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

HIST ORY

Page 16: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

HIST ORY

$('body').on('click', 'a', function(event){

$('.container').load(this.href + ' .conteudo');event.preventDefault();

});

Page 17: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

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 18: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

OFF LINE

Page 19: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

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 20: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

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 21: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

HW

Page 22: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

THEME COLOR

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

Page 23: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

PROGRESSIVE WEB APPS

Page 24: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

<!DOCTYPE html><html><head><script>navigator.serviceWorker.register('worker.js');

</script></head><body><h1>Página offline</h1>

</body></html>

SERVICE WORKERS

Page 25: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

this.onfetch = function(event) {

console.log(event.request.url);

};

SERVICE WORKERS

Page 26: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

this.onfetch = function(event) {event.respondWith(

new Response("<h1>Página offline!</h1>") );};

SERVICE WORKERS

Page 27: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

this.onfetch = function(event) {event.respondWith(

new Response("<h1>Página offline!</h1>") );};

SERVICE WORKERS

this.oninstall = function(event) {console.log('instalou');

};

Page 28: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

caches.open('aplicacao').then(function(cache) { return cache.addAll([ '/index.html', '/style.css', '/logo.png', '/lojas.html' ]); })

SERVICE WORKERS

Page 29: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

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 30: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

this.onfetch = function(event) { event.respondWith( caches.match(event.request) );};

SERVICE WORKERS

Page 31: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

progressive enhancement

if ('serviceWorker' in navigator) {

}

SERVICE WORKERS

Page 32: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

<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 33: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

INSTALÁVEL iOS

Page 34: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

<link rel="manifest" href="manifest.json">

INSTALÁVEL Web Manifest

Page 35: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

INSTALÁVEL Web Manifest

{ "short_name": "Shopping", "name": "Shopping App Demo",

}

Page 36: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

INSTALÁVEL Web Manifest

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

}

Page 37: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

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

}

Page 38: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

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

}

Page 39: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

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

Page 40: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

INSTALÁVEL Web Manifest

Page 41: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

INSTALL BANNERS

Page 42: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

PROGRESSIVE WEB APPS

Page 43: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

NOTIFICATIONSNotification.requestPermission(function(){ new Notification('Pagamento confirmado', { icon: 'img/icon.png', body: 'Saída liberada até 15h45' }); });

Page 44: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

NOTIFICATIONSNotification.requestPermission(function(){ navigator.serviceWorker.ready.then(function(registration){ registration.showNotification('Pagamento confirmado', { icon: 'img/icon.png', body: 'Saída liberada até 15h45' }); });});

Page 45: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

NOTIFICATIONS

Page 46: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

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 47: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

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(...) );});

Page 48: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

BACKGROUND SYNC GEOFENCING ALARMES TEMPORAIS

Page 49: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

GEOLOCALIZAÇÃO VIBRAÇÃO CÂMERA MICROFONE BATERIA NET INFO AUTOCOMPLETE

Page 50: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

LINKÁVEL RESPONSIVA SEGURA OFFLINE APPY ENGAJÁVEL INSTALÁVEL

Page 51: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

PROGRESSIVE WEB APPS

Page 52: PROGRESSIVE WEB APPS O MELHOR DA WEB, Aqconrio.com/.../progressive-webapps-sergio.pdf ·

OBRIGADO!

sergiolopes.org @sergio_caelum

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