Successfully reported this slideshow.
Your SlideShare is downloading. ×

Progressive Web Apps: o melhor da Web appficada

Ad

PROGRESSIVE
WEB APPS
O MELHOR DA WEB,
APPFICADA

Ad

@sergio_caelum
sergiolopes.org

Ad

WEB vs APP

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Check these out next

1 of 106 Ad
1 of 106 Ad
Advertisement

More Related Content

More from Caelum (20)

Advertisement

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/

×