PWA - Um novo horizonte

Transcript

1. UM NOVO HORIZONTE PARA DESENVOLVEDORES
2. Guilherme Silva • 26 anos • 6 anos como desenvolvedor • Apaixonado por tecnologia, mobile e web
3. O que não é PWA? • Uma nova tecnologia que eu tenho que aprender? • Um framework, que vai substituir o que eu já conheço? • Uma nova forma de desenvolver app's nativo • Um novo nome para app's híbridos(ionic, cordova) • A solução para todos os meus projetos mobile
4. O que é PWA - Progressive Web App Um conjunto de técnicas, envolvendo marcação html e boas práticas para desenvolver aplicações webs, adicionando de forma progressiva as funcionalidades de apps nativos
5. O que preciso para desenvolver uma PWA • Seu site deve ser seguro (HTTPS) • App like, parecer como um aplicativo e dar a mesma experiência para o usuário • Progressivo, deve permitir acesso e funcionar independente do navegador • Offline, deve retornar pelo menos a url principal • Seguir a checklist do Google
6. O core de uma PWA - Service Worker Um service worker é um script que seu navegador executa em segundo plano, separado da página da Web, possibilitando recursos que não precisam de uma página da Web ou de interação do usuário.
7. Para que serve o Service Worker O service worker dita como o navegador deve se comportar em determinadas situações • Intercepta requisições HTTP • Cache API - trabalho offline • Push notification • Sincronização em segundo plano
8. Requisitos de um Service Worker • Ser servido em HTTPS • Compatibilidade de navegadores • Ter o service worker registrado na aplicação
9. Ciclo de vida de um Service Worker Existem 5 etapas no ciclo de vida de um Service Worker • Installing enquanto estiver bloqueado na Promise do event.waitUntil durante o evento install • installed enquanto espera para se tornar ativo • activating enquanto estiver bloqueado na Promise do event.waiUntil durante o evento activate • activated quando estiver totalmente operacional e capaz de interceptar requisições via fetch • redundant ao ser substituído por uma versão mais recente do script do ServiceWorker, ou por ser descartado devido a uma falha no install
10. Como eu registro um Service Worker if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/sw.js').then(function(registration) { // Registration was successful console.log('ServiceWorker registration successful with scope: ', registration.scope); }).catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); }); }
11. Instalando o Service Worker var CACHE_NAME = 'my-site-cache-v1'; var urlsToCache = ['/', '/styles/main.css', '/script/main.js']; self.addEventListener('install', function(event) { event.waitUntil( caches.open(CACHE_NAME).then(function(cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); }) ); });
12. self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).then(function(response) { if (response) return response; return fetch(event.request); } ) ); }); Trabalhando com requisições e cache
13. Como atualizo meu site e meu Service Worker self.addEventListener('activate', function(event) { var cacheWhitelist = ['pages-cache-v1', 'blog-posts-cache-v1']; event.waitUntil( caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.map(function(cacheName) { if (cacheWhitelist.indexOf(cacheName) === -1) return caches.delete(cacheName); })); })); });
14. Tão importante quanto temos o Manifest.json O manifest.json é um arquivo JSON simples que informa ao navegador sobre seu aplicativo da Web e como ele deve se comportar quando 'instalado' no dispositivo móvel ou na área de trabalho do usuário
15. { "short_name": "AppName", "name": "ApplicationName", "icons": [ { "src": "/images/icons-192.png", "type": "image/png", "sizes": "192x192" }... ], "start_url": "/index.html", "display": "standalone", "background_color": "#3367D6", "theme_color": "#3367D6" }
16. Como que eu incluo um manifest? <link rel="icon" href="images/icons-256.png" sizes="256x256" /> <link rel="icon" href="images/icons-128.png" sizes="128x128" /> <link rel="icon" href="images/icons-64.png" sizes="64x64" /> <link rel="manifest" href="manifest.json" /> <meta name="theme-color" content="#3367D6" />
17. Avaliando minha PWA - Lighthouse
18. Recursos Adicionais • Google PWA Guide • Seu primeiro PWA • PWA (Progressive Web Apps) e o mínimo que você precisa saber a respeito • Como fazer seu site funcionar offline com PWA • Transformando o site da Magnetis em um PWA • PWA no iOS: Como deixá-lo mais Nativo • What Web Can Do Today
19. That's all folks!