pwa-with-pwf

Transcript

1. PWA with PWF !"#$ PWA with PWA - @ianaya89 1
2. Nacho Anaya @ianaya89 • Full Stack Developer @BloqInc • Speaker • Embajador @Auth0 • Organizador @Vuenos_Aires PWA with PWA - @ianaya89 2
3. PWA with PWA - @ianaya89 3
4. PWA with PWA - @ianaya89 4
5. ! Herramientas + Estándares + Buenas Prácticas PWA with PWA - @ianaya89 5
6. ! Aplicaciones basada en tecnologías web PWA with PWA - @ianaya89 6
7. ! Una app con un link PWA with PWA - @ianaya89 7
8. ! Progresivas PWA with PWA - @ianaya89 8
9. ! ⚡ PWA with PWA - @ianaya89 9
10. PWA with PWA - @ianaya89 10
11. ☝ Ventajas • ♻ Deploy / Actualizacion • " Soporte Offline • #$ Multi Dispositivos • % Code Source • & Stores! • ' Linkeables PWA with PWA - @ianaya89 11
12. ! PWA with PWA - @ianaya89 12
13. ! whatwebcando.today PWA with PWA - @ianaya89 13
14. ! Web App Manifest PWA with PWA - @ianaya89 14
15. ! Service Workers PWA with PWA - @ianaya89 15
16. !!! PWA with PWA - @ianaya89 16
17. PWA with PWA - @ianaya89 17
18. ! F.I.R.E. PWA with PWA - @ianaya89 18
19. ! Fast PWA with PWA - @ianaya89 19
20. ! Integrated PWA with PWA - @ianaya89 20
21. ! Reliable PWA with PWA - @ianaya89 21
22. ! Engaging PWA with PWA - @ianaya89 22
23. PWA with PWA - @ianaya89 23
24. ! Framework Progresivo PWA with PWA - @ianaya89 24
25. ! DX PWA with PWA - @ianaya89 25
26. ! vue-cli PWA with PWA - @ianaya89 26
27. ! pwa-plugin PWA with PWA - @ianaya89 27
28. ⚙ pwa-plugin - Configuración module.exports = { pwa: { name: 'My App', themeColor: '#4DBA87', msTileColor: '#000000', appleMobileWebAppCapable: 'yes', appleMobileWebAppStatusBarStyle: 'black', // configure the workbox plugin workboxPluginMode: 'InjectManifest', workboxOptions: { // swSrc is required in InjectManifest mode. swSrc: 'dev/sw.js', // ...other Workbox options... } } } PWA with PWA - @ianaya89 28
29. PWA with PWA - @ianaya89 29
30. ! Workbox - Modos • GenerateSW (default) • InjectManifest PWA with PWA - @ianaya89 30
31. ! register-service-worker register(`${process.env.BASE_URL}service-worker.js`, { ready () {}, cached () {}, updated () {}, offline () {}, error (error) {} }) PWA with PWA - @ianaya89 31
32. ! Show Time PWA with PWA - @ianaya89 32
33. ✅ Checklist • Todos los browsers • Todos los escenarios • Mejores Recursos = Mejor UX • HTTPS • Soporte Offline PWA with PWA - @ianaya89 33
34. ✅ Checklist • Metadata • Carga Inicial Rapida • Fluidez • 1 Página = 1 URL PWA with PWA - @ianaya89 34
35. ! Mas! • Cache • Push Notifications • Responsive Design (100%) • SEO y SEM Friendly PWA with PWA - @ianaya89 35
36. ! Recursos • workbox • serviceworke.rs • Lighthouse • pwastats.com • PWA Workshop PWA with PWA - @ianaya89 36
37. ! Si tiene 4 patas es una PWA PWA with PWA - @ianaya89 37
38. Gracias! @ianaya89 PWA with PWA - @ianaya89 38
39. ⁉ Preguntas? PWA with PWA - @ianaya89 39
40. ! Links bit.ly/pwa-pwf bit.ly/pwa-pwf-demo PWA with PWA - @ianaya89 40