Progressive Web Apps: o melhor da Web appficada

1. PROGRESSIVE WEB APPS O MELHOR DA WEB, APPFICADA

2. @sergio_caelum sergiolopes.org

3. WEB vs APP

4. PROGRESSIVE WEB APPS

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 & Restaurantes </a> <a href="pagar.html"> Pagar estacionamento </a> </div> </main> </body> </html>

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 & Restaurantes </a> <a href="pagar.html"> Pagar estacionamento </a> </div> </main> </body> </html>

8. URIs

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

10. https://sergiolopes.github.io/shopping/ https://sergiolopes.github.io/shopping/lojas.html URIs

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

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

19. VISUAL APPFICADO v

24. SPA AJAX

25. SPA AJAX

26. SPA AJAX

27. SPA AJAX

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

29. SPA AJAX $('body').on('click', 'a', function(event){ $('.container').load(this.href + ' .conteudo');

30. SPA AJAX $('body').on('click', 'a', function(event){ $('.container').load(this.href + ' .conteudo'); event.preventDefault();

31. SPA AJAX $('body').on('click', 'a', function(event){ $('.container').load(this.href + ' .conteudo'); event.preventDefault(); });

32. SPA AJAX $('body').on('click', 'a', function(event){ $('.container').load(this.href + ' .conteudo'); event.preventDefault(); });

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. 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. HIST ORY

36. HIST ORY

37. HIST ORY

38. HIST ORY $('body').on('click', 'a', function(event){ $('.container').load(this.href + ' .conteudo'); event.preventDefault(); });

39. HIST ORY $('body').on('click', 'a', function(event){ window.history.pushState({}, '', this.href); $('.container').load(this.href + ' .conteudo'); event.preventDefault(); });

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. OFF LINE

42. OFF LINE

43. OFF LINE

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

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

47. HW QuaggaJS

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

50. HW

51. THEME COLOR

52. THEME COLOR <meta name="theme-color" content="#F77F00">

54. <!DOCTYPE html> <html> <head> <script> navigator.serviceWorker.register('worker.js'); </script> </head> <body> <h1>Página offline</h1> </body> </html> SERVICE WORKERS

55. this.onfetch = function(event) { console.log(event.request.url); }; SERVICE WORKERS

56. this.onfetch = function(event) { event.respondWith( new Response("<h1>Página offline!</h1>") ); }; SERVICE WORKERS

57. this.onfetch = function(event) { event.respondWith( new Response("<h1>Página offline!</h1>") ); }; SERVICE WORKERS this.oninstall = function(event) { console.log('instalou'); };

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

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. this.onfetch = function(event) { event.respondWith( caches.match(event.request) ); }; SERVICE WORKERS

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

62. INSTALÁVEL iOS

63. <meta name="apple-mobile-web-app-capable" content="yes"> INSTALÁVEL iOS

64. <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-title" content="Shopping"> INSTALÁVEL iOS

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. INSTALÁVEL iOS

67. INSTALÁVEL iOS

68. <link rel="manifest" href="manifest.json"> INSTALÁVEL Web Manifest

69. INSTALÁVEL Web Manifest { "short_name": "Shopping", "name": "O Shopping", }

70. INSTALÁVEL Web Manifest { "short_name": "Shopping", "name": "O Shopping", "icons": [ { "src": "img/icon.png", "sizes": "192x192", "type": "image/png" } ], }

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. 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. 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. 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. INSTALÁVEL Web Manifest

76. INSTALÁVEL Web Manifest

77. INSTALL BANNERS

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

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

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. PUSH NOTIFICATIONS navigator.serviceWorker.ready.then(function(reg) { reg.pushManager.subscribe({userVisibleOnly: true}) .then(function(subscription) { // descobre servidor Push });

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. BACKGROUND SYNC

86. BACKGROUND SYNC GEOFENCING

87. BACKGROUND SYNC GEOFENCING ALARMES TEMPORAIS

88. GEOLOCALIZAÇÃO

89. GEOLOCALIZAÇÃO VIBRAÇÃO

90. GEOLOCALIZAÇÃO VIBRAÇÃO CÂMERA

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

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

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

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

95. LINKÁVEL

96. LINKÁVEL RESPONSIVA

97. LINKÁVEL RESPONSIVA SEGURA

98. LINKÁVEL RESPONSIVA SEGURA OFFLINE

99. LINKÁVEL RESPONSIVA SEGURA OFFLINE APPY

100. LINKÁVEL RESPONSIVA SEGURA OFFLINE APPY ENGAJÁVEL

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

103. OBRIGADO! sergiolopes.org @sergio_caelum https://sergiolopes.github.io/shopping/

Progressive Web Apps: o melhor da Web appficada

Vous êtes en train de lire un aperçu.

Consultez-les par la suite

Progressive Web Apps: o melhor da Web appficada

Plus De Contenu Connexe

Diaporamas pour vous (20)

Similaire à Progressive Web Apps: o melhor da Web appficada (20)

Plus par Caelum (20)

Plus récents (20)