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

Vue.js, PWA & The Subway Dilemma

Vue.js, PWA & The Subway Dilemma

Ignacio Anaya

May 17, 2019
Tweet

More Decks by Ignacio Anaya

Other Decks in Technology

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. ! Tools + Standards + Best Prac1ces Vue.js, PWA &

    The Subway Dilemma - @ianaya89 11
  4. ! " % ⏱ Use Mobile Web Vue.js, PWA &

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

    The Subway Dilemma - @ianaya89 16
  6. ! " % ! 3 Apps Vue.js, PWA & The

    Subway Dilemma - @ianaya89 18
  7. ! " % ! " Reach more audience Vue.js, PWA

    & The Subway Dilemma - @ianaya89 20
  8. ! Na$ve Apps • ! OS Feauteres • " Reach

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

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

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

    " Offline Support • #$ Cross Device • % Code Source • & Bye Stores! Vue.js, PWA & The Subway Dilemma - @ianaya89 26
  12. 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
  13. ! • ! Installable • " Cache App Shell •

    # Dynamic Cache • $ Background Sync & Push No?fica?ons Vue.js, PWA & The Subway Dilemma - @ianaya89 48
  14. ! vue-cli $ npm i -g @vue/cli $ vue create

    [app-name] Vue.js, PWA & The Subway Dilemma - @ianaya89 51
  15. ! Already have a project? $ vue add @vue/pwa Vue.js,

    PWA & The Subway Dilemma - @ianaya89 53
  16. ⚙ 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
  17. ⚙ 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
  18. 㿃 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
  19. ! 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
  20. ! 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
  21. ! 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
  22. ! 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
  23. "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
  24. ! Test Locally $ npm i -g serve $ npm

    run build $ serve -s dist Vue.js, PWA & The Subway Dilemma - @ianaya89 73
  25. ✅ Checklist • Offline Support • All browsers • Any

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

    • Fluid • 1 page = 1 URL Vue.js, PWA & The Subway Dilemma - @ianaya89 77
  27. ! Resources • workbox • serviceworke.rs • lighthouse • pwastats.com

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

    & The Subway Dilemma - @ianaya89 80