Vue.js, PWA & The Subway Dilemma

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