Web to PWA!

Como transformar um site em uma PWA nota 100 no lighthouse!

Transcript

1. Web to
5. Site estático Site dinâmico Ajax Site Responsivo PWA 1991 2005 1997 2012 2015
6. Quem está usando?
7. O que é PWA?
8. "Progressive Web Apps são experiências que combinam o melhor da web e o melhor dos aplicativos.” Fonte: Developers Google
9. Pré-requisitos
10. Progressivo
11. Responsivo
12. Independente de conectividade
13. Semelhante a aplicativos
14. Atual
15. Seguro
16. Descobrível
17. Reenvolvente
18. Instalável
20. Linkável
21. Lighthouse
22. https, sempre HTTPS 1
23. O que fazer? • Habilitar HTTPS no servidor, isso é obrigatório. • Redirecionar o status 301 também para HTTPS.
24. Como fazer?
25. responsivo e rápido 2
26. Como fazer? • Media queries. • Sempre se preocupar com performance e boas práticas. • Lighthouse.
27. Como fazer? <meta name="viewport" content="width=device-width, initial-scale=1” > • Sempre definir corretamente o viewport no browser.
28. Cor tema do site 3
30. Como fazer? <meta name="theme-color" content="#000000"> • Escolher uma cor e buscar o código hexadecimal.
31. Manifesto 4
32. O que fazer? • Criar o manifest.json. • App Manifesto ou PWA Builder.
33. { "name": "Gefy Marcos", "short_name": "Gefy", "theme_color": "#333333", "background_color": "#000000", "display": “standalone", "//fullscreen, browser “start_url": "https:"//gefy.com.br/index.html", "orientation": “portrait", "//any, landscape "icons": [{ "src": "/img/logo-512x512.png", "sizes": "512x512", "type": "image/png" }] }
34. Importante "short_name": "Gefy", • O short_name não pode ter mais que 12 letras. • Nome que aparece com o ícone no celular.
35. Importante • O background_color é obrigatório. "background_color": "#000000",
36. Importante • É obrigatório ao menos um ícone 512x512. • Icone somente PNG. "icons": [{ "src": "/img/logo-512x512.png", "sizes": "512x512", "type": "image/png" }]
37. Importante <link rel="manifest" href="/manifest.json"> • Adicionar no head.
38. Service Worker 5
39. Fonte: https://caniuse.com/#feat=serviceworkers Suporte
40. É um script executado em segundo plano pelo navegador.
41. Executado separado da página web.
42. Possibilita utilizar push notifications, sincronização em segundo plano, etc…
43. Capacidade de interceptar e tratar solicitações de rede.
44. O service worker funciona numa thread separada do browser, ele não tem acesso ao DOM. Importante
45. Sempre deve ter o mesmo nome e ficar no mesmo local para não gerar duplicação. Importante
46. Lembre-se de deletar o cache antigo quando o site for atualizado. Importante
47. Como fazer? • Registrar o service worker no nosso head.
48. Como fazer? if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(function(registration) { console.log('Registration successful’); }).catch(function(err) { console.log('Registration failed: '); }); }
49. Ciclo de vida
50. Install É ativado só uma vez, ao registrar o sw.js.
51. var filesToAdd = ['/'] self.addEventListener('install', function(event) { event.waitUntil( caches.open('gefy-pwa') .then(function(cache) { return cache.addAll(filesToAdd); }) ); });
52. É ativado uma vez, após o “install”, após o service worker assumir o controle dos caches. Activate
53. self.addEventListener('activate', function(event) { var cacheWhitelist = ['gefy-pwa']; event.waitUntil( caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.map(function(cacheName) { if (cacheWhitelist .indexOf(cacheName) ""=== -1) { return caches.delete(cacheName); } }) ); }) ); });
54. É ativado toda vez que uma página é requisitada. Fetch
55. self.addEventListener('fetch', function(event) { event.respondWith( checkResponse(event.request) .catch(function() { return returnFromCache(event.request)} )); event.waitUntil(addToCache(event.request)); });
56. var checkResponse = function(request) { return new Promise(function(fulfill, reject) { fetch(request) .then(function(response) { if(response.status ""!== 404) { fulfill(response) } else { reject() } }, reject) }); };
57. var returnFromCache = function(request) { return caches.open('gefy-pwa') .then(function (cache) { return cache.match(request) .then(function (matching) { if(!matching "|| matching.status "== 404) { return cache.match(‘/404.html') } else { return matching } }); }); };
58. var addToCache = function(request) { return caches.open('gefy-pwa') .then(function (cache) { return fetch(request) .then(function (response) { return cache.put(request, response); }); }); };
59. Agora temos nosso primeiro PWA! YES…
60. • Online first • Offline first Abordagens
61. self.addEventListener('fetch', function(event) { event.respondWith( returnFromCache(event.request) .catch(function() { return checkResponse(event.request)} )); event.waitUntil(addToCache(event.request)); });
62. Testando
63. • O que é e como funciona um PWA. • Princípios básicos. • Como testar um PWA. • Cor de tema. • Manifesto. • Service worker. • Cache e redirecionamento. Conclusão
64. Obrigado! @gefymarcos gefy.com.br/talks