Upgrade to Pro — share decks privately, control downloads, hide ads and more …

pwa-with-pwf

 pwa-with-pwf

6c3e7ef20801b4b967dc1643f63d6233?s=128

Ignacio Anaya

May 31, 2018
Tweet

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