Progressive Web Apps: o melhor da Web appficada

PROGRESSIVE
WEB APPS
O MELHOR DA WEB,
APPFICADA

@sergio_caelum
sergiolopes.org

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/lojas.html
URIs

https://sergiolopes.github.io/shopping/pagar-estacionamento.
URIs

https://sergiolopes.github.io/shopping/loja-adidas.html
URIs

https://sergiolopes.github.io/shopping/loja-tip-top.html
URIs

...
URIs

...
HTTPS

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

SPA
AJAX
$('.container').load(this.href + ' .conteudo');

SPA
AJAX
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
window.history.pushState({}, '', this.href);
});

HIST
ORY
window.history.pushState({}, '', this.href);
});
window.onpopstate = function(event) {
$('.container').load(location.href + ' .conteudo');
};

OFF
LINE
<html manifest="appcache.manifest">

OFF
LINE
CACHE MANIFEST
CACHE:
index.html
lojas.html
css/main.css
img/entrada.jpg
js/main.js
js/vendor/jquery.min.js
loja-adidas.html
NETWORK:
*
<html manifest="appcache.manifest">

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

event.respondWith(
new Response("<h1>Página offline!</h1>")
);
};
SERVICE
WORKERS

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

event.respondWith(
caches.match(event.request)
);
};
SERVICE
WORKERS

progressive
enhancement
if ('serviceWorker' in navigator) {
}
SERVICE
WORKERS

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

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

{
"icons": [
{
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "index.html",
}

{
"icons": [
{
"sizes": "192x192",
"type": "image/png"
}
],
"orientation": "portrait",
}

{
"icons": [
{
"sizes": "192x192",
"type": "image/png"
}
],
"display": "standalone",
}

{
"icons": [
{
"sizes": "192x192",
"type": "image/png"
}
],
"display": "standalone",
"theme_color": "#F77F00",
"background_color": "#FFB400"
}

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

NOTIFICATIONS
navigator.serviceWorker.ready.then(function(registration){
registration.showNotification('Pagamento confirmado', {
});
});
});

NOTIFICATIONS
navigator.serviceWorker.ready.then(function(registration){
registration.showNotification('Pagamento confirmado', {
});
});
});
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
});

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

GEOLOCALIZAÇÃO
VIBRAÇÃO
CÂMERA
MICROFONE

GEOLOCALIZAÇÃO
VIBRAÇÃO
CÂMERA
MICROFONE
BATERIA

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

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

LINKÁVEL
RESPONSIVA
SEGURA
OFFLINE

LINKÁVEL
RESPONSIVA
SEGURA
OFFLINE
APPY

LINKÁVEL
RESPONSIVA
SEGURA
OFFLINE
APPY
ENGAJÁVEL

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

OBRIGADO!
sergiolopes.org
@sergio_caelum

Progressive Web Apps: o melhor da Web appficada

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Progressive Web Apps: o melhor da Web appficada

Semelhante a Progressive Web Apps: o melhor da Web appficada (20)

Mais de Caelum

Mais de Caelum (20)

Último

Último (20)

Progressive Web Apps: o melhor da Web appficada