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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Progressive Web Apps: o melhor da Web appficada

Similar to Progressive Web Apps: o melhor da Web appficada (20)

More from Caelum

More from Caelum (20)

Recently uploaded

Recently uploaded (20)

Progressive Web Apps: o melhor da Web appficada