PROGRESSIVE APPFICADA WEB APPS O MELHOR DA WEB,

Size: px

Start display at page:

Download "PROGRESSIVE APPFICADA WEB APPS O MELHOR DA WEB,"

Denis Wilkinson
10 years ago
Views:

1 PROGRESSIVE WEB APPS O MELHOR DA WEB, APPFICADA

3 WEB vs APP

4 PROGRESSIVE WEB APPS

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

8 URIs

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

9 HTTPS

10 PROGRESSIVE WEB APPS

11 PROGRESSIVE WEB APPS

12 VISUAL APPFICADO v

13 SPA AJAX

14 $('body').on('click', 'a', function(event){ $('.container').load(this.href + '.conteudo'); event.preventdefault(); }); SPA AJAX transform: translate3d(-100%,0,0); transition: transform 600ms ease-out; transform: scale(0); transition: transform 500ms;

15 HIST ORY

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

17 $('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'); }; HIST ORY

18 OFF LINE

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

20 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); }); HW QuaggaJS

$decoder : { readers : ["code_128_reader"] } }, function() {$

21 HW

22 <meta name="theme-color" content="#f77f00"> THEME COLOR

23 PROGRESSIVE WEB APPS

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

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

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

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

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

29 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' ]); }) ); };

30 SERVICE WORKERS this.onfetch = function(event) { event.respondwith( caches.match(event.request) ); };

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

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

33 INSTALÁVEL ios

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

35 { "short_name": "Shopping", "name": "Shopping App Demo", } INSTALÁVEL Web Manifest

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

37 { "short_name": "Shopping", "name": "Shopping App Demo", "icons": [ { "src": "img/icon.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "index.html", } INSTALÁVEL Web Manifest

38 { "short_name": "Shopping", "name": "Shopping App Demo", "icons": [ { "src": "img/icon.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "index.html", "orientation": "portrait", } INSTALÁVEL Web Manifest

39 { } "short_name": "Shopping", "name": "Shopping App Demo", "icons": [ { "src": "img/icon.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "index.html", "orientation": "portrait", "display": "standalone" INSTALÁVEL Web Manifest

40 INSTALÁVEL Web Manifest

41 INSTALL BANNERS

42 PROGRESSIVE WEB APPS

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

44 NOTIFICATIONS Notification.requestPermission(function(){ navigator.serviceworker.ready.then(function(registration){ registration.shownotification('pagamento confirmado', { icon: 'img/icon.png', body: 'Saída liberada até 15h45' }); }); });

45 NOTIFICATIONS

46 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'); });

47 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(...) ); });

48 BACKGROUND SYNC GEOFENCING ALARMES TEMPORAIS

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

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

51 PROGRESSIVE WEB APPS

52 OBRIGADO!

Mobile Web Applications using HTML5. L. Cotfas 14 Dec. 2011

Mobile Web Applications using HTML5 L. Cotfas 14 Dec. 2011 Reasons for mobile web development Many different platforms: Android, IPhone, Symbian, Windows Phone/ Mobile, MeeGo (only a few of them) Reasons