Progressive Web Apps e além

Breve introdução a Progressive Web Apps, abordando as principais características desejáveis, resultados e arquitetura necessária para implementação.

Links:
https://github.com/HenriqueLimas/weather-pwa

-----
Henrique Limas
henrique.ramos.limas@gmail.com
https://github.com/HenriqueLimas

Transcript

1. Progressive Web App e além
2. Um pouco de história Babbage Machine Diskette CD & DVD Google Maps
3. Mobile vs Mobile Web 87% 13% VS Source: comScore Mobile Metrix, U.S. +18, June 2016 Tempo gasto
4. 80% Do tempo dos usuários são consumidos nos apps TOP 3 Source: comScore Mobile Metrix, U.S. +18, June 2016 1 Facebook 2 Facebook Messenger 3 YouTube
5. Mobile vs Mobile Web Source: comScore Mobile Metrix, U.S. +18, June 2016 Média de usuários únicos por mês (MM) Média de minutos por usuário 11,4 4,0 188,6 10,9
6. Mobile vs Mobile Web VS Performance Offline Notificações Fácil alcance
7. Progressive Web Apps Fácil alcance Performance Offline Notificações PWA
8. Alguns resultados com PWA
9. 82% mais conversões no iOS 2x mais visualizações 74% mais tempo gasto do usuário
10. Custo da aquisição de cada usuário €0,35 €4,00
11. Progressive Web App
12. Características Source: https://goo.gl/VsGswn Confiáveis Rápidas Engajáveis
13. Confiáveis
14. Confiáveis Source: https://goo.gl/VsGswn
15. Rápidas
16. Rápidas Source: https://goo.gl/VsGswn
17. Engajáveis
18. Engajáveis Source: https://goo.gl/VsGswn
19. Porque PWA?
20. Sem PlayStore e AppStore Sem problemas de atualização em lie-fie Simples test A/B Fácil acesso ServiceWorkers melhora 3x o tempo de loading
21. Como?
22. Maneiras de começar com PWA - Nova aplicação - Versão simples - Única feature
23. Criando do zero
24. Redução de 92% dos recursos iniciais Redução de 82% na primeira transaction
25. Uma versão mais simples
26. < 1s loading inicial
27. 80ms tempo para carregar os artigos na PWA
28. Foco em uma feature
29. 62 linguagens em 178 países 80% melhor tempo de loading
30. Arquitetura de uma PWA
31. Weather app App-shell Conteúdo VS
32. Pensando em App-shell 1. Componentes principais 2. O que precisa estar na tela 3. Outros componentes de ui 4. Recursos necessários (JSS, CSS etc..)
33. App-shell
34. Content
35. Maneiras de entregar o App-shell
36. Server-side rendering Browser Server Browser Server Primeira requisição Renderização
37. Client-side rendering Browser Server Browser Server Primeira requisição Espera, precisamos do JavaScript Executa o JavaScript Espera, precisamos do conteúdo Renderização
38. Inserir o conteúdo no server Browser Server Browser Server Primeira requisição Espera, precisamos do JavaScript JavaScript retorna incluindo o conteúdo Executa o JavaScript Renderização
39. Database
40. Database no Browser Local Storage Fácil de usar Sincrono Caches Fácil de usar Asincrono Rápido Pouco suporte nos Browsers IndexedDB Rápido Asincrono Suporte nos Browsers Difícil de usar (localforage, lovefield) DADOS NÃO SÃO PERMANENTES!
41. Como PWA são possíveis?
42. Tecnologias principais Service Worker Web manifest
43. Service Worker
44. Service Worker Web Server Web Server Service Worker Proxy no browser em Javascript
45. Source: https://goo.gl/7rjG7n
46. Registration if ('serviceWorker' in navigator) { navigator.serviceWorker .register('/service-worker.js') .then(...); } main.js
47. Installation var cacheName = ‘weatherPWA-v1’; var dataCacheName = ‘weatherData-v1’; var filesToCache = [...] // Lista das url self.addEventListener(‘install’, function (e) { e.waitUntil( caches.open(cacheName).then(function (e) { return cache.addAll(filesToCache) }) ) }) service-worker.js
48. Activation self.addEventListener(‘activate’, function (e) { e.waitUntil( caches.keys().then(function (keyList) { return Promise.all(keyList.map(function (key) { if (key !== cacheName && dataCacheName) { Return caches.delete(keys) } })) }) ) }) service-worker.js
49. Fetch self.addEventListener(‘fetch’, function (e) { console.log(‘[ServiceWorker] Fetch’, e.request.url); e.respondWith( caches.match(e.request).then(function (response) { return response || fetch(e.request); }) ) }) service-worker.js
50. Estratégias de Caching
51. Cache only Source: https://goo.gl/onRTtp
52. Network only Source: https://goo.gl/onRTtp
53. Cache first Source: https://goo.gl/onRTtp
54. Network first Source: https://goo.gl/onRTtp
55. Cache & Network race Source: https://goo.gl/onRTtp
56. Cache than Network Source: https://goo.gl/onRTtp
57. Web App Manifest
59. Web App Manifest { “name”: “Weather”, “short_name”: “Weather”, “start_url”: “/index.html?hs=true”, “icons”: [{“src”: “img.png”,“sizes”: “48x48”,type: “image/png”}], “background_color”: “#3E4EB8”, “theme_color”: “#3E4EB8”, “display”: “standalone”, “orientation”: “portrait”, } manifest.json <link rel=“manifest.json” href=“manifest.json”> index.html
60. E no Safari?
61. <link rel=“apple-touch-icon” sizes=“60” href=“icons/apple-60.png”> <meta name=“apple-mobile-web-app-capable” content=“yes”> <meta name=“apple-mobile-web-app-status-bar-style” content=“default”> Safari index.html Remover UI do browser Status bar Icons
62. Web App Install Banners
63. Service Worker Web App Manifest Usuário engajado Web App Install Banners
64. E agora? - Offline cookbook (Jake Archibald) https://goo.gl/onRTtp - Promises https://goo.gl/xnIibs - Push Notifications https://goo.gl/sosvrl - Web Payments API https://goo.gl/QWq6nY - Credential Management API https://goo.gl/uFEOl4 - Pwa.rocks https://pwa.rocks - Pokedex.org https://goo.gl/6Ymrkd - Offline Web Apps on Github Pages https://goo.gl/cfZgew
65. Obrigado
66. Henrique Limas Github: /HenriqueLimas Email: henrique.ramos.limas@gmail.com Slides: https://goo.gl/fXIsIL