Natura Meet Up PWA - Offline first

Transcript

1. – OFFLINE FIRST meetup
2. Chapter Manager @ Concrete
3. Tech Lead @ Social Selling
4. – OFFLINE FIRST meetup Por que isso é importante?
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 de 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 50ª posição no ranking de velocidade de internet móvel. fonte: IBGE (http://bit.ly/2k8rFTs)
12. – A média de velocidade de internet móvel no Brasil é 13mbs, abaixo da média global de 17mbs. fonte: IBGE (http://bit.ly/2k8rFTs)
13. – Mais de 70% dos acessos ao rede vem de dispositivos móveis. fonte: Rede Natura
14. – E o que isso tem a ver com PWA?
18. – 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)
19. – 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)
20. – Carregue instantaneamente e nunca mostre o downasaur, mesmo em condições de rede incertas. fonte: Google Developers (http://bit.ly/2kI5J1J)
21. – Mas como?!
22. – 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 }
23. – Online/Offline window.addEventListener('online', (e) => console.log('Online ')); window.addEventListener('offline', (e) => console.log('Offline ')); if(window.navigator.onLine) { console.log('Online ') } else { console.log('Offline ') }
24. – Service Workers INSTALL ACTIVATED ERROR IDLE TERMINATED FETCH / MESSAGE fonte: Google Developers | Web Fundamentals (http://bit.ly/2kxftft)
25. if('serviceWorker' in navigator) { console.log('ServiceWorker é suportado neste navegador ') } else { console.log('ServiceWorker não é suportado ') }
26. navigator.serviceWorker.register('assets/sw.js') .then(reg => console.info('registered ', reg)) .catch(err => console.error('error registering ', err))
27. navigator.serviceWorker.register('assets/sw.js') .then((reg) => { if(reg.installing) { console.log('Instalando ') } else if(reg.waiting) { console.log('Instalado ✅') } else if(reg.active) { console.log('SeviceWorker ativo ') } })
28. 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} `) }) }) })
29. 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))) })
30. self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request).then((response) => { if(response) return response return fetch(event.request) }) ) })
31. event.respondWith( caches.match(event.request).then((response) => { if(response) return response return 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')))
32. – CONCLUSÃO
33. – Offline first é possível, faz sentido, pode ser feito hoje e cria uma a experiência mais confiável para o seu usuário.
34. OBRIGADO! @marcusortense marcus.ortense@concrete.com.br bit.ly/2kypFEv