Introducción a PWA
Descargar como PPTX, PDF0 recomendaciones703 vistas
Progressive Web Apps (PWA) involucran una filosofía y tecnologías que permiten que los sitios web se comporten como aplicaciones nativas. Las PWA se basan en características soportadas por los navegadores como HTTPS, el manifiesto de la aplicación web y los trabajadores de servicio para proporcionar experiencias responsivas, funcionalidad sin conexión, interacciones táctiles y la capacidad de instalarse. Esto ofrece beneficios como un enfoque centrado en dispositivos móviles, mejor rendimiento y compromiso del
![Técnicamente
● HTTPS.
...service workers create the
opportunity for a bad actor to
turn a bad day into a bad
eternity.[ 👉 Especificación]](https://image.slidesharecdn.com/69j5zk5utjkchp1wevdi-signature-d199779c653230de38467393efa41b600a8c64c3a79f574e9d763c3fe91d0e4d-poli-190907222513/85/Introduccion-a-PWA-45-320.jpg)
![Técnicamente
● Web App Manifest.
{
"short_name": "name",
"name": "App name",
"icons": [
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/",
"theme_color": "#3367D6"
}](https://image.slidesharecdn.com/69j5zk5utjkchp1wevdi-signature-d199779c653230de38467393efa41b600a8c64c3a79f574e9d763c3fe91d0e4d-poli-190907222513/85/Introduccion-a-PWA-46-320.jpg)
Introducción a PWA
- 2. Introducción a PWA 💣 💣 WordCamp SJO - 2019
- 3. José Leiva leivajd.com / @leivajd
- 6. Objetivos.
- 8. 1.Visión general. 2.Beneficios e implementación.
- 9. 1.Visión general. 2.Beneficios e implementación. 3.Lecciones aprendidas.
- 10. ¿Qué es?
- 12. Término “sombrilla” que involucra una nueva filosofía y tecnologías.
- 13. Progressive Web Apps: Escaping Tabs Without Losing Our Soul Alex Russell - 2015 Frances Berriman - 2017 Naming Progressive Web Apps
- 14. ¿Qué involucra? Progressive. Filosofía de mejora progresiva.
- 15. ¿Qué involucra? Web. No nativo, no dependencias, no terceros.
- 16. ¿Qué involucra? App. ¿Qué es un app? Necesitamos un término simple.
- 17. Basado en features soportados por el browser, de manera progresiva se vuelven apps-like.
- 18. ¿app-like?
- 20. ¿app-like? ● Responsive. ● Offline first.
- 21. ¿app-like? ● Responsive. ● Offline first. ● Interacciones (touch, shell).
- 22. ¿app-like? ● Responsive. ● Offline first. ● Interacciones (touch, shell). ● Linkable.
- 23. ¿app-like? ● Responsive. ● Offline first. ● Interacciones (touch, shell). ● Linkable. ● Seguro (HTTPS).
- 24. ¿app-like? ● Responsive. ● Offline first. ● Interacciones (touch, shell). ● Linkable. ● Seguro (HTTPS). ● Instalable.
- 25. ¿Porqué?
- 27. Beneficios ● Mobile first. ● Performance.
- 28. Beneficios ● Mobile first. ● Performance. ● Engagement.
- 29. Beneficios ● Mobile first (pero de verdad!) ● Performance. ● Engagement. ● “Build once, deploy anywhere.”
- 35. Los beneficios son atractivos para cualquier sitio web.
- 42. ¿Cómo?
- 43. La implementación puede cubrirse en varias charlas adicionales.
- 44. Técnicamente ● HTTPS. ● Web App Manifest. ● Service Worker.
- 45. Técnicamente ● HTTPS. ...service workers create the opportunity for a bad actor to turn a bad day into a bad eternity.[ 👉 Especificación]
- 46. Técnicamente ● Web App Manifest. { "short_name": "name", "name": "App name", "icons": [ { "src": "/images/icons-512.png", "type": "image/png", "sizes": "512x512" } ], "start_url": "", "background_color": "#3367D6", "display": "standalone", "scope": "/", "theme_color": "#3367D6" }
- 47. Técnicamente ● Web App Manifest. <link rel="manifest" href="/manifest.json">
- 48. Técnicamente ● Service Worker. 🤯 😨 😎
- 49. 🏃💨
- 50. La “P” en PWA es clave.
- 51. Service Worker 🤯 ☁ GET /something Respuesta
- 52. Service Worker 🤯 ☁ GET /something Respuesta ❌
- 53. Service Worker 🤯 ☁ GET /something Respuesta ❌ 😭
- 54. Service Worker ● JS script en background.
- 55. Service Worker ● JS script en background. ● Push notifications.
- 56. Service Worker ● JS script en background. ● Push notifications. ● Background sync.
- 57. Service Worker ● JS script en background. ● Push notifications. ● Background sync. ● Network proxy.
- 58. Service Worker - network proxy 🤯 ☁ GET /something Response 🤖
- 59. Service Worker - network proxy 🤯 ☁ GET /something Response 🤖 📦
- 60. Service Worker - network proxy ● Control sobre request.
- 61. Service Worker - network proxy ● Control sobre request. ● Control sobre cache.
- 62. Service Worker - registro if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker .register('/service- worker.js'); }); }
- 63. Service Worker - registro if ('serviceWorker' in navigator) { window.addEventListener('load', () => { if (has('killserviceworker')) { navigator.serviceWorker.getRegistrations().then(registrations => { registrations.forEach(registration => { registration.unregister(); }); }); } else { navigator.serviceWorker.register('/service-worker.js', { scope: '/', }).then(() => { console.log('Service worker registration success'); }, (err) => { console.log('Service worker registration failed: ', err); }); } }); }
- 64. Service Worker - existe? if ('serviceWorker' in navigator) { // el browser lo soporta }
- 65. Service Worker - load window.addEventListener('load', () => { // minimizar carga en CPU y memoria });
- 66. Service Worker - feature flag if (has('killserviceworker')) { // desregistro } else { // registro }
- 67. Service Worker - desregistro navigator.serviceWorker .getRegistrations() .then(registrations => { registrations.forEach(registration => { registration.unregister(); }); );
- 68. Service Worker - registro navigator.serviceWorker .register('/service-worker.js', { scope: '/', });
- 69. Service Worker - estrategias ● Cache only. ● Network only. ● Network first. ● Cache first. ● Stale-While-Revalidate
- 70. Service Worker - estrategias ● Ejemplo Cache first.
- 71. Caso.
- 73. V1 - reemplazar iOS app
- 74. V1 - explorar Android app
- 75. V1 - caching & repeat visitors
- 76. V1 - caching & repeat visitors ● Webpagetest.org ● Home, PLP & PDP.
- 77. V1 - caching & repeat visitors ● ~0.4ms - SW vs No SW
- 78. V1 - caching & repeat visitors ● ~0.4ms - SW vs No SW ● Resultado esperado 🙆.
- 79. V1 - caching & repeat visitors ● ~0.4ms - SW vs No SW ● Resultado esperado. ● Base para offline.
- 80. V1 - soporte offline
- 81. V1 - métricas (PWA) ● Instalaciones 11,161 (Android)
- 82. V1 - métricas (PWA) ● Instalaciones 11,161 (Android) ● Open from Home 91,025
- 83. V1 - métricas (PWA) ● Instalaciones 11,161 (Android) ● Open from Home 91,025 ○ Android ~76% ○ iOS ~13%
- 84. V1 - métricas (repeat rate) ● Mobile Web - 1.54 ● Old app - 2.10 ● New app - 2.42
- 85. V1 - métricas (conversion rate) ● Mobile Web - 1.57% ● Old app - 2.03% ● New app - 2.93%
- 86. Service Worker nos dan la oportunidad de crear mejores experiencias.
- 87. El nombre no es para nosotros, y preocuparnos es una distraccion.
- 88. El nombre no es para nosotros, y preocuparnos es una distracción. El nombre es para su jefe, su cliente ó marketing.
- 89. PWA, solo necesitamos HTTPS, Service Worker y un Manifiesto.
- 90. PWA, solo necesitamos HTTPS, Service Worker y un Manifiesto. El reto es saber cómo y cuándo aplicar estas tecnologías.
- 91. ¿Qué van a construir?
- 92. Recursos.
- 93. ● leivajd.com/nota/introduccion-pwa José Leiva leivajd.com / @leivajd
Notas del editor
- #15: Idea de que sitios web deben construirse en capas.
- #16: No depender de terceros para publicar, App Store, equipos y skills especializados, etc
- #27: better mobile experiences. Aunque mobile first existe desde hace tiempo, la mayoria de los sitios web siguen siendo deficientes
- #28: Control sobre el cache
- #29: Push notifications, mejor experiencia, hay que ganarse estar en el Home screen
- #30: No dependencias, no Apple Drama
- #47: Archivo json que le informa al navegador acerca de nuestra aplicación web y cómo debe comportarse cuando se 'instala' en el dispositivo móvil o escritorio del usuario. Chrome requiere tener un manifiesto para mostrar el mensaje Agregar a la pantalla de inicio.
- #61: Control sobre request Control sobre cache
- #65: The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.
- #77: Home, PLP, PDP 9 corridas
- #78: Custom GA implementacion
- #79: Custom GA implementacion
- #80: Custom GA implementacion
- #82: Custom GA implementacion
- #83: Custom GA implementacion
- #84: Custom GA implementacion
- #85: Custom GA implementacion
- #86: Custom GA implementacion