Concrete on Beer JavaScript - Offline first

Talk sobre web offline feita na Concrete onde falei quando como e porque pensar em aplicações offline na web

Transcript

1. – OFFLINE FIRST v2.3.2
2. Chapter Manager @ Concrete
3. – OFFLINE FIRST Por que isso é importante?
4. – Já ouviu falar sobre PWA?
5. – Qual a realidade da internet hoje?
6. – 40% dos usuários abandonam o site após 3 segundos de espera. fonte: Dynatrace / Gomez.com (http://bit.ly/29jzPRc)
7. – Amazon identificou que cada 100 milissegundos de espera representa a queda de 1% nas vendas fonte: Amazon / Findory (http://bit.ly/2kd4UOp)
8. – Em 2019 a cobertura 3G no Brasil chegou a 97.6%, atingindo 5438 municípios. fonte: Operadoras (http://bit.ly/2kaUSNC)
9. – 33% dos brasileiros acessa a internet apenas por dispositivos móveis fonte: IBGE (http://bit.ly/2k8rFTs)
10. – 76% dos brasileiros utiliza banda larga móvel, sendo que 17% não possui acesso a outro tipo de conexão. fonte: IBGE (http://bit.ly/2k8rFTs)
11. – Brasil ocupa a 72ª posição no ranking de velocidade de internet móvel. fonte: Speedtest Global Index - March 2020 (https://bit.ly/3bs9YDN)
12. – Argentina ocupa a 70ª posição no ranking de velocidade de internet móvel. fonte: Speedtest Global Index - March 2020 (https://bit.ly/3bs9YDN)
13. – A média de velocidade de internet móvel no Brasil é 24.2Mbps e na Argentina é 24.6Mbps abaixo da média global de 30.4 Mbps. fonte: Speedtest Global Index - March 2020 (https://bit.ly/3bs9YDN)
14. – O 1º lugar fica com a fica com os Emirados Árabes Unidos com 83.5 Mbps fonte: Speedtest Global Index - March 2020 (https://bit.ly/3bs9YDN)
15. – O Sudão, Venezuela e Afeganistão ocupam as últimas posições tendo média inferior a 7 Mbps fonte: Speedtest Global Index - March 2020 (https://bit.ly/3bs9YDN)
16. fonte: broadbandsearch (https://bit.ly/3500Gwr) – Consumo de mídia por dispositivo 250 200 150 100 50 0 2013 2019 mobile desktop minutos de uso por dia
17. – E o que isso tem a ver com PWA?
19. This machine is a server. DO NOT POWER IT DOWN ! !
22. – Progressive Web Apps é uma experiência do usuário ao alcance da web confiável, rápida e engajante. fonte: Google Developers (http://bit.ly/2kI5J1J)
23. – Progressive Web Apps é uma experiência do usuário ao alcance da web confiável, rápida e engajante. fonte: Google Developers (http://bit.ly/2kI5J1J)
24. – Carregue instantaneamente e nunca mostre o downasaur, mesmo em condições de rede incertas. fonte: Google Developers (http://bit.ly/2kI5J1J)
25. – Mas como?!
26. – Tipo de conexão console.log(navigator.connection) NetworkInformation { downlink: 10, // Estimativa da banda em MB/S effectiveType: '4g', // Tipo de conexão slow-2g, 2g, 3g', or 4g rtt: 0, // round-trip time em milissegundo saveData: false, // O usuário utiliza economia de dados onchange: null, // Event Handler }
27. – Online/Offline window.addEventListener('online', () => console.log('Online ')); window.addEventListener('offline', () => console.log('Offline ')); if(window.navigator.onLine) { console.log('Online ') } else { console.log('Offline ') }
28. – Service Workers INSTALL ACTIVATED ERROR IDLE TERMINATED FETCH / MESSAGE fonte: Google Developers | Web Fundamentals (http://bit.ly/2kxftft)
29. if('serviceWorker' in navigator) { console.log('ServiceWorker é suportado neste navegador ') } else { console.log('ServiceWorker não é suportado ') } – Verificando suporte
30. navigator.serviceWorker.register('assets/sw.js') .then(reg => console.info('registered ', reg)) .catch(err => console.error('error registering ', err)) – Registrando
31. navigator.serviceWorker.register('assets/sw.js') .then(reg => { if(reg.installing) console.log('Instalando ') if(reg.waiting) console.log('Instalado ✅') if(reg.active) console.log('SeviceWorker ativo ') }) – Estados do service worker
32. navigator.serviceWorker.register('assets/sw.js') .then(reg => { const sw = reg.installing reg.addEventListener('updatefound', () => { sw.addEventListener('statechange', () => console.log(`Status atualizado para ${sw.state} `)) }) }) – Escutando mudanças de estado
33. ☝
34. – Caches
35. const PRE_CACHE_URL = [ '/index.html', '/styles/main.css', '/script/main.js' ]; self.addEventListener('install', event => event.waitUntil(caches.open('cache-app-v1') .then(cache => cache.addAll(PRE_CACHE_URL)))) – Pré-cache
36. self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request) .then(response => response || fetch(event.request))) }) – Resposta do cache
37. event.respondWith( caches.match(event.request).then(response => response || fetch(event.request) .then(response => { caches.open('cache-app-v1').then(cache => cache.put(event.request, response.clone())) return response }) ) .catch(() => caches.match('fallback.html')))
38. self.addEventListener('fetch', event => { const url = new URL(event.request.url) if (url.origin === location.origin && url.pathname === '/') { event.respondWith(caches.match('/index.html')) } }) – Carregamento instantâneo
39. const EXPECTED_CACHES = ['cache-app-v2'] self.addEventListener('activate', event => { event.waitUntil(caches.keys() .then(cachesName => Promise.all( cachesName .filter(name => !EXPECTED_CACHES.includes(name)) .map(name => caches.delete(name))) ) ) }) – Limpando o cache
40. – Mas e os dados?
41. – IndexedDB!
42. if(window.indexedDB) { console.log('IndexedDB é suportado neste navegador ') } else { console.log('IndexedDB não é suportado ') } – Verificando suporte
43. const DB_NAME = 'ConcreteOnBeerJS' const DB_VERSION = 1 let request = window.indexedDB.open(DB_NAME, DB_VERSION) – Criando um novo banco
44. const DB_NAME = 'ConcreteOnBeerJS' let request = window.indexedDB.open(DB_NAME, 1) – Criando um novo banco
45. request.onerror = event => console.error(`Erro ao abrir o ${DB_NAME} `, event) request.onsuccess = event => console.log(`Banco ${DB_NAME} aberto `, event.target.result) request.onupgradeneeded = event => console.log(`Banco ${DB_NAME} versão 1 `, event.target.result) – Criando um novo banco
46. request.onupgradeneeded = (event) => { const db = event.target.result const objectStore = db.createObjectStore('participantes', { keyPath: 'email' }) } – Criando uma ObjectStore
47. request.onupgradeneeded = (event) => { const db = event.target.result const objectStore = db.createObjectStore('participantes', { keyPath: 'id', autoIncrement: true }) } – Criando uma ObjectStore
48. const transaction = db.transaction(['participantes'], 'readwrite') transaction.oncomplete = event => console.log('Transação finalizada com sucesso ', event) transaction.onerror = event => console.error('Erro na transação ❌', event) – Criando uma transação
49. const objectStore = transaction.objectStore('participantes') objectStore.add({ email: 'people@email.com', createdAt: new Date() }) – Inserindo um novo registro
50. const objectStore = transaction.objectStore('participantes') const request = objectStore.get('people@email.com') request.onsuccess = event => console.info(event.target.result) request.onerror = event => console.error(event) – Lendo registros
51. const objectStore = transaction.objectStore('participantes') const request = objectStore.getAll() request.onsuccess = event => console.info(event.target.result) request.onerror = event => console.error(event) – Lendo registros
52. const request = objectStore.get('people@email.com') request.onsuccess = () => { request.result.updatedAt = new Date() const updateRequest = objectStore.put(request.result) updateRequest.onsuccess = event => console.log(event) updateRequest.error = event => console.error(event) } – Atualizando registros
53. const request = db.transaction(['participantes'], 'readwrite') .objectStore('participantes') .delete('people@email.com') request.onsuccess = event => console.info(event) request.onerror = event => console.error(event) – Removendo registros
56. – CONCLUSÃO
57. – Offline first é possível, faz sentido, pode ser feito hoje e cria uma a experiência mais confiável para o seu usuário.
58. OBRIGADO! @marcusortense bit.ly/380nOM4
59. GRACIAS! @marcusortense bit.ly/380nOM4