Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Vue.js, PWA & The Subway Dilemma

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Ignacio Anaya Ignacio Anaya
May 17, 2019
Technology
250
0

Vue.js, PWA & The Subway Dilemma

Avatar for Ignacio Anaya

Ignacio Anaya

May 17, 2019

More Decks by Ignacio Anaya

See All by Ignacio Anaya
Security is not a feature‼️
Avatar for Ignacio Anaya ianaya89
2
560
Rompiendo Paradigmas Otra Vuez! 🔨📜3️⃣
Avatar for Ignacio Anaya ianaya89
0
180
Security is not a feature!
Avatar for Ignacio Anaya ianaya89
1
410
What's next in Vue 3? 🖖 3️⃣
Avatar for Ignacio Anaya ianaya89
0
170
What's next in Vue 3? 🖖 3️⃣
Avatar for Ignacio Anaya ianaya89
0
310
PWA with PWF
Avatar for Ignacio Anaya ianaya89
0
69
Decentralizing the Web with JavaScript
Avatar for Ignacio Anaya ianaya89
0
170
hey-devs-time-to-care-about-web-apps-security.pdf
Avatar for Ignacio Anaya ianaya89
0
140
A Token Walks into SPA
Avatar for Ignacio Anaya ianaya89
0
670

Other Decks in Technology

See All in Technology
クラウドエージェントの先駆け Devin。今も最先端を走る、他との違い
Avatar for kinopee kinopeee
1
520
自律的なチームを作るためにTechPMがやらないこと
Avatar for Naoki Yoshitake ny7760
0
270
これだけは抑えておきたい！後悔しない re:Invent の過ごし方 / AWS re:Invent 2026 prestudy
Avatar for Masanori Yamaguchi kinunori
2
590
Flutter Widget Previewerで始めるUIプレビューとVRTの自動化
Avatar for Aokiti sakusaku3939
0
180
AIに任せられるFlutterコードベースを作る 〜仕様をコードで表し、ハーネスで守る〜
Avatar for Yohei Maeda myohei
1
580
AIコーディングエージェント開発_全体像
Avatar for コロッケそば happysamurai294
0
140
AI時代のエンジニアの情報発信〜個人の発信を組織の力に変える〜
Avatar for かわまた ryo_kawamata
0
4.6k
スマートロックを支えるFlutter × ネイティブ連携の実践 / Flutter and Native Integration in Practice: Powering Smart Locks
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
110
あなたのDartコードは丸見えかもしれない ～reFlutterで暴くFlutterアプリの中身と多層防御～
Avatar for ZOZO Developers zozotech
PRO
0
710
書き手が人でもAIでも正しくなる道、 SREを埋め込んだDeveloper Platform / tech drivers day8
Avatar for mekka chmikata
4
850
国際カードブランドルール変更に伴うクレジットカード決済取引仕様変更について
Avatar for Keiichi Nomura k1style
0
270
[General] 개발자로 해외 기업에서 일하기
Avatar for Jaewoong skydoves
1
110

Featured

See All Featured
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
620
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
4
4k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
143
7.8k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
780
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
750
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
1.3k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
300
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
590
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
590
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
35
2.9k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
390

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