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

Vue.js, PWA & The Subway Dilemma

Vue.js, PWA & The Subway Dilemma

6c3e7ef20801b4b967dc1643f63d6233?s=128

Ignacio Anaya

May 17, 2019
Tweet

Transcript

  1. Vue.js, PWA & The Subway Dilemma ! "# ! @ianaya89

    Vue.js, PWA & The Subway Dilemma - @ianaya89 1
  2. ! Nacho Anaya ! @ianaya89 • JavaScript Engineer @BloqInc •

    Ambassador @Auth0 • Tech Speaker @MozTechSpeakers • Organizer @Vuenos_Aires Vue.js, PWA & The Subway Dilemma - @ianaya89 2
  3. !" Vue.js, PWA & The Subway Dilemma - @ianaya89 3

  4. ! Subway Dilemma Vue.js, PWA & The Subway Dilemma -

    @ianaya89 4
  5. Vue.js, PWA & The Subway Dilemma - @ianaya89 5

  6. Vue.js, PWA & The Subway Dilemma - @ianaya89 6

  7. Vue.js, PWA & The Subway Dilemma - @ianaya89 7

  8. Vue.js, PWA & The Subway Dilemma - @ianaya89 8

  9. ! ✈ # Vue.js, PWA & The Subway Dilemma -

    @ianaya89 9
  10. Vue.js, PWA & The Subway Dilemma - @ianaya89 10

  11. ! Tools + Standards + Best Prac1ces Vue.js, PWA &

    The Subway Dilemma - @ianaya89 11
  12. ! Web based applica,ons Vue.js, PWA & The Subway Dilemma

    - @ianaya89 12
  13. ! Apps with a link... Vue.js, PWA & The Subway

    Dilemma - @ianaya89 13
  14. ! Some Stats Vue.js, PWA & The Subway Dilemma -

    @ianaya89 14
  15. ! " % ⏱ Use Mobile Web Vue.js, PWA &

    The Subway Dilemma - @ianaya89 15
  16. ! " % ⏱ Use Na've Apps Vue.js, PWA &

    The Subway Dilemma - @ianaya89 16
  17. Vue.js, PWA & The Subway Dilemma - @ianaya89 17

  18. ! " % ! 3 Apps Vue.js, PWA & The

    Subway Dilemma - @ianaya89 18
  19. ! ! Installed Apps Vue.js, PWA & The Subway Dilemma

    - @ianaya89 19
  20. ! " % ! " Reach more audience Vue.js, PWA

    & The Subway Dilemma - @ianaya89 20
  21. ! Progressives Vue.js, PWA & The Subway Dilemma - @ianaya89

    21
  22. ! ⚡ Vue.js, PWA & The Subway Dilemma - @ianaya89

    22
  23. ! Na$ve Apps • ! OS Feauteres • " Reach

    • ❌ Vue.js, PWA & The Subway Dilemma - @ianaya89 23
  24. ! Web Apps • ! OS Features • " Reach

    • ❌ Vue.js, PWA & The Subway Dilemma - @ianaya89 24
  25. !" PWA • ! OS Features • ! Reach •

    ✅ Vue.js, PWA & The Subway Dilemma - @ianaya89 25
  26. ! Advantages • ♻ Deploy / Update / Installables •

    " Offline Support • #$ Cross Device • % Code Source • & Bye Stores! Vue.js, PWA & The Subway Dilemma - @ianaya89 26
  27. ! Imagine a world without stores... Vue.js, PWA & The

    Subway Dilemma - @ianaya89 27
  28. Vue.js, PWA & The Subway Dilemma - @ianaya89 28

  29. ! F.I.R.E. Vue.js, PWA & The Subway Dilemma - @ianaya89

    29
  30. ! Fast Vue.js, PWA & The Subway Dilemma - @ianaya89

    30
  31. ! Integrated Vue.js, PWA & The Subway Dilemma - @ianaya89

    31
  32. ! Reliable Vue.js, PWA & The Subway Dilemma - @ianaya89

    32
  33. ! Engaging Vue.js, PWA & The Subway Dilemma - @ianaya89

    33
  34. Vue.js, PWA & The Subway Dilemma - @ianaya89 34

  35. ! Vue.js, PWA & The Subway Dilemma - @ianaya89 35

  36. ! Browsers Vue.js, PWA & The Subway Dilemma - @ianaya89

    36
  37. ! whatwebcando.today Vue.js, PWA & The Subway Dilemma - @ianaya89

    37
  38. Vue.js, PWA & The Subway Dilemma - @ianaya89 38

  39. Vue.js, PWA & The Subway Dilemma - @ianaya89 39

  40. ! Web App Manifest Vue.js, PWA & The Subway Dilemma

    - @ianaya89 40
  41. Vue.js, PWA & The Subway Dilemma - @ianaya89 41

  42. Vue.js, PWA & The Subway Dilemma - @ianaya89 42

  43. ! Service Workers Vue.js, PWA & The Subway Dilemma -

    @ianaya89 43
  44. Vue.js, PWA & The Subway Dilemma - @ianaya89 44

  45. Vue.js, PWA & The Subway Dilemma - @ianaya89 45

  46. sw.js self.addEventListener('install', event => { console.log('Installing Service Worker ...', event)

    }) self.addEventListener('activate', event => { console.log('Activating Service Worker ...', event) }) self.addEventListener('fetch', event => { console.log('Fetching something ....', event) event.respondWith(fetch(event.request)) }) Vue.js, PWA & The Subway Dilemma - @ianaya89 46
  47. main.js if ('serviceWorker' in navigator) { navigator.serviceWorker.register('./sw.js') .then(() => console.log('Service

    worker registered!')) } Vue.js, PWA & The Subway Dilemma - @ianaya89 47
  48. ! • ! Installable • " Cache App Shell •

    # Dynamic Cache • $ Background Sync & Push No?fica?ons Vue.js, PWA & The Subway Dilemma - @ianaya89 48
  49. ! Vue.js, PWA & The Subway Dilemma - @ianaya89 49

  50. ! DX Vue.js, PWA & The Subway Dilemma - @ianaya89

    50
  51. ! vue-cli $ npm i -g @vue/cli $ vue create

    [app-name] Vue.js, PWA & The Subway Dilemma - @ianaya89 51
  52. ! pwa-plugin Vue.js, PWA & The Subway Dilemma - @ianaya89

    52
  53. ! Already have a project? $ vue add @vue/pwa Vue.js,

    PWA & The Subway Dilemma - @ianaya89 53
  54. Vue.js, PWA & The Subway Dilemma - @ianaya89 54

  55. Vue.js, PWA & The Subway Dilemma - @ianaya89 55

  56. ⚙ vue.config.js module.exports = { // ... pwa: { name:

    'My App', themeColor: '#4DBA87', msTileColor: '#000000', appleMobileWebAppCapable: 'yes', appleMobileWebAppStatusBarStyle: 'black' } // ... } Vue.js, PWA & The Subway Dilemma - @ianaya89 56
  57. Vue.js, PWA & The Subway Dilemma - @ianaya89 57

  58. workbox-webpack-plugin Vue.js, PWA & The Subway Dilemma - @ianaya89 58

  59. ! Workbox !" GenerateSW Vue.js, PWA & The Subway Dilemma

    - @ianaya89 59
  60. ! Workbox ! InjectManifest Vue.js, PWA & The Subway Dilemma

    - @ianaya89 60
  61. ⚙ vue.config.js module.exports = { pwa: { name: 'My App',

    themeColor: '#4DBA87', msTileColor: '#000000', appleMobileWebAppCapable: 'yes', appleMobileWebAppStatusBarStyle: 'black', // configure the workbox plugin workboxPluginMode: 'InjectManifest', workboxOptions: { swSrc: 'dev/sw.js', // ...other Workbox options } } } Vue.js, PWA & The Subway Dilemma - @ianaya89 61
  62. sw.js // Cache first workbox.routing.registerRoute( new RegExp('/images/') new workbox.strategies.StaleWhileRevalidate() )

    Vue.js, PWA & The Subway Dilemma - @ianaya89 62
  63. sw.js // Network first workbox.routing.registerRoute( new RegExp('/posts/'), new workbox.strategies.NetworkFirst() )

    Vue.js, PWA & The Subway Dilemma - @ianaya89 63
  64. sw.js // Network only workbox.routing.registerRoute( new RegExp('/auth/'), new workbox.strategies.NetworkOnly() )

    Vue.js, PWA & The Subway Dilemma - @ianaya89 64
  65. 㿃 Background Sync const syncQueue = new workbox.backgroundSync.Plugin('syncQueue', {}) workbox.routing.registerRoute(

    /\/api\/.*\/*.json/, new workbox.strategies.NetworkOnly({ plugins: [syncQueue] }), 'POST' ); Vue.js, PWA & The Subway Dilemma - @ianaya89 65
  66. ! register-service-worker register(`${process.env.BASE_URL}service-worker.js`, { ready () {}, cached () {},

    updated () {}, offline () {}, error (error) {} }) Vue.js, PWA & The Subway Dilemma - @ianaya89 66
  67. Vue.js, PWA & The Subway Dilemma - @ianaya89 67

  68. ! Code Spli*ng Vue.js, PWA & The Subway Dilemma -

    @ianaya89 68
  69. ! Async Components <script> // import Modal from './components/Modal' const

    Modal = () => import( /* webpackChunkName: "modal" */ './components/Modal' ) export default { components: { Modal } } </script> Vue.js, PWA & The Subway Dilemma - @ianaya89 69
  70. ! Async Components import Router from 'vue-router' import Home from

    './views/Home.vue' export default new Router({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ './views/About.vue') } ] }) Vue.js, PWA & The Subway Dilemma - @ianaya89 70
  71. ! Async Components import Router from 'vue-router' import Home from

    './views/Home.vue' export default new Router({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ './views/About.vue') } ] }) Vue.js, PWA & The Subway Dilemma - @ianaya89 71
  72. "There are only two hard things in Computer Science: cache

    invalida:on and naming things." -- Phil Karlton Vue.js, PWA & The Subway Dilemma - @ianaya89 72
  73. ! Test Locally $ npm i -g serve $ npm

    run build $ serve -s dist Vue.js, PWA & The Subway Dilemma - @ianaya89 73
  74. Vue.js, PWA & The Subway Dilemma - @ianaya89 74

  75. ! Lighthouse Vue.js, PWA & The Subway Dilemma - @ianaya89

    75
  76. ✅ Checklist • Offline Support • All browsers • Any

    context • Be7er Resources = Be7er UX • HTTPS Vue.js, PWA & The Subway Dilemma - @ianaya89 76
  77. ✅ Checklist • Installable • Metadata • Fast ini/al load

    • Fluid • 1 page = 1 URL Vue.js, PWA & The Subway Dilemma - @ianaya89 77
  78. ⛰ Vue.js, PWA & The Subway Dilemma - @ianaya89 78

  79. ! Resources • workbox • serviceworke.rs • lighthouse • pwastats.com

    Vue.js, PWA & The Subway Dilemma - @ianaya89 79
  80. ! If it has 4 legs is PWA Vue.js, PWA

    & The Subway Dilemma - @ianaya89 80
  81. ! Thanks! ! Ques&ons? ! @ianaya89 Vue.js, PWA & The

    Subway Dilemma - @ianaya89 81