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

Vue.js, PWA & The Subway Dilemma

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Ignacio Anaya Ignacio Anaya
May 17, 2019
Technology
230
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
540
Rompiendo Paradigmas Otra Vuez! 🔨📜3️⃣
Avatar for Ignacio Anaya ianaya89
0
170
Security is not a feature!
Avatar for Ignacio Anaya ianaya89
1
400
What's next in Vue 3? 🖖 3️⃣
Avatar for Ignacio Anaya ianaya89
0
150
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
640

Other Decks in Technology

See All in Technology
Baseline対応のDOMの型定義を作った
Avatar for uhyo uhyo
3
720
Keeping applications secure by evolving OAuth 2.0 and OpenID Connect
Avatar for Alexander Schwartz ahus1
PRO
1
150
AI Driven AI Governance
Avatar for Yutaka Hiroyama pict3
0
300
ヘルスケア領域における AI 活用と その安全性担保のための取り組み (Leveraging AI in Healthcare and Our Efforts to Ensure Its Safety) - Google I/O Extended Tokyo 2026, July 11, 2026
Avatar for Akira Tameoka zettaittenani
0
230
プロダクトだけじゃない、社内プロセスにおける自動化・省力化ノススメ
Avatar for KAKEHASHI kakehashi
PRO
1
3.2k
ポストモーテム！ DDoSからサイトは守れた。 でもビジネスは守れなかった。
Avatar for 弁護士ドットコム bengo4com
0
2.3k
AIで政治は変わるのか？ — 中高生と考えたAI時代の民主主義（東海高校サタデープログラム）
Avatar for 須田英太郎 eitarosuda
0
410
プロンプト_きのこカンファレンス2026_LT
Avatar for ゆるふわヒーラー yurufuwahealer
0
150
しぶいSRE: サーバから見えない障害にどう向き合うか。ラストワンマイルのデバッグ実践 / Shibui SRE
Avatar for Hokuto Hoshi kanny
12
5.5k
Amazon EVS で VCF 9.0 / 9.1 のサポート開始まとめ
Avatar for mtoyoda mtoyoda
0
280
Zoom2Youtube.Claude
Avatar for Yasunobu Kawaguchi kawaguti
PRO
3
480
“全部コピーしない”ファイルデータの活用 ： — FSx for ONTAP × S3 Tables × Icebergで作るメタデータカタログ
Avatar for Yoshiki Fujiwara yoshiki0705
0
630

Featured

See All Featured
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
800
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
490
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.3k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
10k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.3k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
440
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.7k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
550
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k

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