Progressive Web Apps

Introduction to Progressive Web Apps - GDG Managua meetup 15 Dic. 2018

Transcript

1. PROGRESSIVE WEB APPS Oscar Cortez Dec 2018
2. ¿QUE ES UNA PWA?
3. UN MOMENTO
4. PWA
5. APWA
6. AWPW
7. AMWP
8. AMP
9. AMP != PWA
11. KILLEDBYGOOGLE.COM
13. RECAPITULANDO
14. ¿QUE ES UNA PWA?
15. LAS PROGRESSIVE WEB APPS SON EXPERIENCIAS QUE COMBINAN LO MEJOR DE LA WEB Y LO MEJOR DE LAS APPS. Pete LePage PWA
17. UN SITIO QUE USA LAS TECNOLOGÍAS MODERNAS EN LOS NAVEGADORES Y LAS MEJORES PRACTICAS PARA PROVEER UNA EXPERIENCIA RÁPIDA Y NATIVA. Zack Argyle PWA
18. UN SITIO QUE USA LAS TECNOLOGÍAS MODERNAS EN LOS NAVEGADORES Y LAS MEJORES PRACTICAS PARA PROVEER UNA EXPERIENCIA RÁPIDA Y NATIVA. Zack Argyle PWA
19. DE CONFIANZA RAPIDAS ATRACTIVAS PWA es…
20. TECNOLOGIAS USADAS
21. •HTTPS •W3C MANIFEST •SERVICE WORKER •CACHE
22. HTTPS
23. ¯\_(ツ)_/¯
24. W3C MANIFEST
25. { "name": "Donate App", "description": "This app helps you donate to worthy causes.", "icons": [{ "src": "images/icon.png", "sizes": "192x192" }] }
26. <!DOCTYPE html> <html> <head> <title>Racer 3K</title> <!-- Startup configuration --> <link rel="manifest" href="manifest.webmanifest"> <!-- Fallback application metadata for legacy browsers --> <meta name="application-name" content="Racer3K"> <link rel="icon" sizes="16x16 32x32 48x48" href="lo_def.ico"> <link rel="icon" sizes="512x512" href="hi_def.png"> </head> <body> </body> </html>
27. SERVICE WORKERS
28. UN SERVICE WORKER ES UNA SECUENCIA DE COMANDOS QUE TU NAVEGADOR EJECUTA EN SEGUNDO PLANO, SEPARADO DE UNA PÁGINA WEB. Matt Gaunt SW
29. if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/sw.js') .then(function(registration) { // Registration was successful console.log('ServiceWorker registration successful'); console.log('with scope: ', registration.scope); }).catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); }); }
30. CACHE
31. SÓLO HAY DOS COSAS DURAS EN CIENCIAS DE LA COMPUTACIÓN: INVALIDAR UNA MEMORIA CACHÉ Y NOMBRAR LAS COSAS. Confusio :p CACHE
32. •CACHE ONLY •NETWORK ONLY •CACHE FALLING TO NETWORK OR VICE VERSA •CACHE & NETWORK RACE •CACHE THEN NETWORK •GENERIC FALLBACK •YOUR CUSTOM WAY :P
33. COMO SE VE UNA PWA
34. POKEDEX.ORG
35. LAS 3R’S PARA INCREÍBLES PWA’S
36. REDUCE REUSE REVIEW
37. REDUCE REUSE REVIEW
38. A MEDIDA QUE CONSTRUIMOS SITIOS QUE DEPENDEN CADA VEZ MÁS DE JAVASCRIPT, A VECES PAGAMOS POR LO QUE ENVIAMOS DE MANERAS QUE NO SIEMPRE VEMOS FÁCILMENTE. Addy Osmani REDUCE
39. REDUCE REUSE REVIEW
40. REUSE Service Worker Network Website Cache
41. REDUCE REUSE REVIEW
42. INDEPENDIENTEMENTE DE LAS HERRAMIENTAS QUE ELIJA SU EQUIPO, UN PRESUPUESTO ES ESENCIAL. SIN UNO, INCLUSO LOS MÁS AVANZADOS, Y “LIGEROS" FRAMEWORKS PUEDEN CREAR FÁCILMENTE APLICACIONES INFLADAS E INUTILIZABLES. Alex Russel REVIEW
43. NO EXISTEN SITUACIONES HIPOTETICAS
44. LA FUERZA USAR DEBES
46. •APP-Shell: La arquitectura que usaras. •Browser Dev Tools: Tu navaja suiza. •IndexedDB: Almacenamiento estructurado de datos. •WorkBox: Set de librerias para PWAs.
47. •Lighthouse: Auditar nuestras PWAs. •Google PWA Checklist: Lo que tienes que considerar. •SSR: Compilar tu HTML en el servidor. •SW-Precache: Generador de Service-Workers.
49. => RTFM <= HTTPS://WEB.DEV
50. GRACIAS POR SU ATENCIÓN! @oscar_mcm