Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
PROGRESSIVE
WEB APPS
O MELHOR DA WEB,
APPFICADA
@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...
URIs
<!doctype html>
<html lang="pt-br">
<head>
<title>Shopping</title>
</head>
<body>
<main class="home">
<h1>O Shopping<...
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.html
https://sergiolopes.github.io/sh...
https://sergiolopes.github.io/shopping/
https://sergiolopes.github.io/shopping/lojas.html
https://sergiolopes.github.io/sh...
https://sergiolopes.github.io/shopping/
https://sergiolopes.github.io/shopping/lojas.html
https://sergiolopes.github.io/sh...
https://sergiolopes.github.io/shopping/
https://sergiolopes.github.io/shopping/lojas.html
https://sergiolopes.github.io/sh...
https://sergiolopes.github.io/shopping/
https://sergiolopes.github.io/shopping/lojas.html
https://sergiolopes.github.io/sh...
https://sergiolopes.github.io/shopping/
https://sergiolopes.github.io/shopping/lojas.html
https://sergiolopes.github.io/sh...
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(...
SPA
AJAX
$('body').on('click', 'a', function(event){
$('.container').load(this.href + ' .conteudo');
event.preventDefault(...
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(thi...
HIST
ORY
$('body').on('click', 'a', function(event){
window.history.pushState({}, '', this.href);
$('.container').load(thi...
OFF
LINE
OFF
LINE
OFF
LINE
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-...
HW
HW QuaggaJS
HW
Quagga.init({
inputStream : {
name : "Live",
type : "LiveStream"
},
decoder : {
readers : ["code_128_reader"]
}
}, func...
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 ...
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.on...
caches.open('aplicacao').then(function(cache) {
return cache.addAll([
'/index.html',
'/style.css',
'/logo.png',
'/lojas.ht...
this.oninstall = function(event){
event.waitUntil(
caches.open('aplicacao').then(function(cache) {
return cache.addAll([
'...
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">
INSTA...
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Shopping">
<link...
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": "19...
INSTALÁVEL Web Manifest
{
"short_name": "Shopping",
"name": "O Shopping",
"icons": [
{
"src": "img/icon.png",
"sizes": "19...
INSTALÁVEL Web Manifest
{
"short_name": "Shopping",
"name": "O Shopping",
"icons": [
{
"src": "img/icon.png",
"sizes": "19...
INSTALÁVEL Web Manifest
{
"short_name": "Shopping",
"name": "O Shopping",
"icons": [
{
"src": "img/icon.png",
"sizes": "19...
INSTALÁVEL Web Manifest
{
"short_name": "Shopping",
"name": "O Shopping",
"icons": [
{
"src": "img/icon.png",
"sizes": "19...
INSTALÁVEL Web Manifest
INSTALÁVEL Web Manifest
INSTALL
BANNERS
PROGRESSIVE
WEB APPS
NOTIFICATIONS
Notification.requestPermission(function(){
new Notification('Pagamento confirmado', {
icon: 'img/icon.png',
...
NOTIFICATIONS
Notification.requestPermission(function(){
navigator.serviceWorker.ready.then(function(registration){
regist...
NOTIFICATIONS
NOTIFICATIONS
Notification.requestPermission(function(){
navigator.serviceWorker.ready.then(function(registration){
regist...
PUSH NOTIFICATIONS
navigator.serviceWorker.ready.then(function(reg) {
reg.pushManager.subscribe({userVisibleOnly: true})
....
PUSH NOTIFICATIONS
navigator.serviceWorker.ready.then(function(reg) {
reg.pushManager.subscribe({userVisibleOnly: true})
....
BACKGROUND SYNC
BACKGROUND SYNC
GEOFENCING
BACKGROUND SYNC
GEOFENCING
ALARMES TEMPORAIS
GEOLOCALIZAÇÃO
GEOLOCALIZAÇÃO
VIBRAÇÃO
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
LINKÁVEL
RESPONSIVA
LINKÁVEL
RESPONSIVA
SEGURA
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
PROGRESSIVE
WEB APPS
OBRIGADO!
sergiolopes.org
@sergio_caelum
https://sergiolopes.github.io/shopping/
Progressive Web Apps: o melhor da Web appficada
Progressive Web Apps: o melhor da Web appficada
Progressive Web Apps: o melhor da Web appficada
Upcoming SlideShare
Loading in …5
×

Progressive Web Apps: o melhor da Web appficada

58,815 views

Published on

Slides da palestra de Sérgio Lopes na RubyConf Brazil.

Site de exemplo: https://sergiolopes.github.io/shopping/

Published in: Technology

Progressive Web Apps: o melhor da Web appficada

  1. 1. PROGRESSIVE WEB APPS O MELHOR DA WEB, APPFICADA
  2. 2. @sergio_caelum sergiolopes.org
  3. 3. WEB vs APP
  4. 4. PROGRESSIVE WEB APPS
  5. 5. PROGRESSIVE WEB APPS
  6. 6. 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>
  7. 7. 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>
  8. 8. URIs
  9. 9. https://sergiolopes.github.io/shopping/ URIs
  10. 10. https://sergiolopes.github.io/shopping/ https://sergiolopes.github.io/shopping/lojas.html URIs
  11. 11. https://sergiolopes.github.io/shopping/ https://sergiolopes.github.io/shopping/lojas.html https://sergiolopes.github.io/shopping/pagar-estacionamento. URIs
  12. 12. https://sergiolopes.github.io/shopping/ https://sergiolopes.github.io/shopping/lojas.html https://sergiolopes.github.io/shopping/pagar-estacionamento. https://sergiolopes.github.io/shopping/loja-adidas.html URIs
  13. 13. https://sergiolopes.github.io/shopping/ https://sergiolopes.github.io/shopping/lojas.html https://sergiolopes.github.io/shopping/pagar-estacionamento. https://sergiolopes.github.io/shopping/loja-adidas.html https://sergiolopes.github.io/shopping/loja-tip-top.html URIs
  14. 14. https://sergiolopes.github.io/shopping/ https://sergiolopes.github.io/shopping/lojas.html https://sergiolopes.github.io/shopping/pagar-estacionamento. https://sergiolopes.github.io/shopping/loja-adidas.html https://sergiolopes.github.io/shopping/loja-tip-top.html ... URIs
  15. 15. https://sergiolopes.github.io/shopping/ https://sergiolopes.github.io/shopping/lojas.html https://sergiolopes.github.io/shopping/pagar-estacionamento. https://sergiolopes.github.io/shopping/loja-adidas.html https://sergiolopes.github.io/shopping/loja-tip-top.html ... URIs
  16. 16. https://sergiolopes.github.io/shopping/ https://sergiolopes.github.io/shopping/lojas.html https://sergiolopes.github.io/shopping/pagar-estacionamento. https://sergiolopes.github.io/shopping/loja-adidas.html https://sergiolopes.github.io/shopping/loja-tip-top.html ... HTTPS
  17. 17. PROGRESSIVE WEB APPS
  18. 18. PROGRESSIVE WEB APPS
  19. 19. VISUAL APPFICADO v
  20. 20. VISUAL APPFICADO v
  21. 21. VISUAL APPFICADO v
  22. 22. VISUAL APPFICADO v
  23. 23. VISUAL APPFICADO v
  24. 24. SPA AJAX
  25. 25. SPA AJAX
  26. 26. SPA AJAX
  27. 27. SPA AJAX
  28. 28. SPA AJAX $('body').on('click', 'a', function(event){
  29. 29. SPA AJAX $('body').on('click', 'a', function(event){ $('.container').load(this.href + ' .conteudo');
  30. 30. SPA AJAX $('body').on('click', 'a', function(event){ $('.container').load(this.href + ' .conteudo'); event.preventDefault();
  31. 31. SPA AJAX $('body').on('click', 'a', function(event){ $('.container').load(this.href + ' .conteudo'); event.preventDefault(); });
  32. 32. SPA AJAX $('body').on('click', 'a', function(event){ $('.container').load(this.href + ' .conteudo'); event.preventDefault(); });
  33. 33. 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;
  34. 34. 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;
  35. 35. HIST ORY
  36. 36. HIST ORY
  37. 37. HIST ORY
  38. 38. HIST ORY $('body').on('click', 'a', function(event){ $('.container').load(this.href + ' .conteudo'); event.preventDefault(); });
  39. 39. HIST ORY $('body').on('click', 'a', function(event){ window.history.pushState({}, '', this.href); $('.container').load(this.href + ' .conteudo'); event.preventDefault(); });
  40. 40. 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'); };
  41. 41. OFF LINE
  42. 42. OFF LINE
  43. 43. OFF LINE
  44. 44. OFF LINE <html manifest="appcache.manifest">
  45. 45. 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">
  46. 46. HW
  47. 47. HW QuaggaJS
  48. 48. 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
  49. 49. HW
  50. 50. HW
  51. 51. THEME COLOR
  52. 52. THEME COLOR <meta name="theme-color" content="#F77F00">
  53. 53. PROGRESSIVE WEB APPS
  54. 54. <!DOCTYPE html> <html> <head> <script> navigator.serviceWorker.register('worker.js'); </script> </head> <body> <h1>Página offline</h1> </body> </html> SERVICE WORKERS
  55. 55. this.onfetch = function(event) { console.log(event.request.url); }; SERVICE WORKERS
  56. 56. this.onfetch = function(event) { event.respondWith( new Response("<h1>Página offline!</h1>") ); }; SERVICE WORKERS
  57. 57. this.onfetch = function(event) { event.respondWith( new Response("<h1>Página offline!</h1>") ); }; SERVICE WORKERS this.oninstall = function(event) { console.log('instalou'); };
  58. 58. caches.open('aplicacao').then(function(cache) { return cache.addAll([ '/index.html', '/style.css', '/logo.png', '/lojas.html' ]); }) SERVICE WORKERS
  59. 59. 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
  60. 60. this.onfetch = function(event) { event.respondWith( caches.match(event.request) ); }; SERVICE WORKERS
  61. 61. progressive enhancement if ('serviceWorker' in navigator) { } SERVICE WORKERS
  62. 62. INSTALÁVEL iOS
  63. 63. <meta name="apple-mobile-web-app-capable" content="yes"> INSTALÁVEL iOS
  64. 64. <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-title" content="Shopping"> INSTALÁVEL iOS
  65. 65. <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
  66. 66. INSTALÁVEL iOS
  67. 67. INSTALÁVEL iOS
  68. 68. <link rel="manifest" href="manifest.json"> INSTALÁVEL Web Manifest
  69. 69. INSTALÁVEL Web Manifest { "short_name": "Shopping", "name": "O Shopping", }
  70. 70. INSTALÁVEL Web Manifest { "short_name": "Shopping", "name": "O Shopping", "icons": [ { "src": "img/icon.png", "sizes": "192x192", "type": "image/png" } ], }
  71. 71. INSTALÁVEL Web Manifest { "short_name": "Shopping", "name": "O Shopping", "icons": [ { "src": "img/icon.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "index.html", }
  72. 72. 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", }
  73. 73. 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", }
  74. 74. 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" }
  75. 75. INSTALÁVEL Web Manifest
  76. 76. INSTALÁVEL Web Manifest
  77. 77. INSTALL BANNERS
  78. 78. PROGRESSIVE WEB APPS
  79. 79. NOTIFICATIONS Notification.requestPermission(function(){ new Notification('Pagamento confirmado', { icon: 'img/icon.png', body: 'Saída liberada até 15h45' }); });
  80. 80. NOTIFICATIONS Notification.requestPermission(function(){ navigator.serviceWorker.ready.then(function(registration){ registration.showNotification('Pagamento confirmado', { icon: 'img/icon.png', body: 'Saída liberada até 15h45' }); }); });
  81. 81. NOTIFICATIONS
  82. 82. NOTIFICATIONS Notification.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'); });
  83. 83. PUSH NOTIFICATIONS navigator.serviceWorker.ready.then(function(reg) { reg.pushManager.subscribe({userVisibleOnly: true}) .then(function(subscription) { // descobre servidor Push });
  84. 84. 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(...) ); });
  85. 85. BACKGROUND SYNC
  86. 86. BACKGROUND SYNC GEOFENCING
  87. 87. BACKGROUND SYNC GEOFENCING ALARMES TEMPORAIS
  88. 88. GEOLOCALIZAÇÃO
  89. 89. GEOLOCALIZAÇÃO VIBRAÇÃO
  90. 90. GEOLOCALIZAÇÃO VIBRAÇÃO CÂMERA
  91. 91. GEOLOCALIZAÇÃO VIBRAÇÃO CÂMERA MICROFONE
  92. 92. GEOLOCALIZAÇÃO VIBRAÇÃO CÂMERA MICROFONE BATERIA
  93. 93. GEOLOCALIZAÇÃO VIBRAÇÃO CÂMERA MICROFONE BATERIA NET INFO
  94. 94. GEOLOCALIZAÇÃO VIBRAÇÃO CÂMERA MICROFONE BATERIA NET INFO AUTOCOMPLETE
  95. 95. LINKÁVEL
  96. 96. LINKÁVEL RESPONSIVA
  97. 97. LINKÁVEL RESPONSIVA SEGURA
  98. 98. LINKÁVEL RESPONSIVA SEGURA OFFLINE
  99. 99. LINKÁVEL RESPONSIVA SEGURA OFFLINE APPY
  100. 100. LINKÁVEL RESPONSIVA SEGURA OFFLINE APPY ENGAJÁVEL
  101. 101. LINKÁVEL RESPONSIVA SEGURA OFFLINE APPY ENGAJÁVEL INSTALÁVEL
  102. 102. PROGRESSIVE WEB APPS
  103. 103. OBRIGADO! sergiolopes.org @sergio_caelum https://sergiolopes.github.io/shopping/

×