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

Progressive Web Apps with Vue.js

Bc34f46fdfa199da05a78f26584ecec3?s=47 Bruno Bonnin
November 14, 2017

Progressive Web Apps with Vue.js

Presentation done at Devoxx Morocco 2017 about how to build progressive web apps with Vue.js


Bruno Bonnin

November 14, 2017


  1. Progressive Web Apps with Vue.js Bruno Bonnin @_bruno_b_ #DevoxxMA

  2. #DevoxxMA @_bruno_b_ About me https://github.com/bbonnin

  3. #DevoxxMA @_bruno_b_ GDPR Data Governance Data Fabric

  4. #DevoxxMA @_bruno_b_ Vue.js Component-oriented Dedicated to web interface creation Performant

    Very easy to learn Focus on the View layer Flexible
  5. #DevoxxMA @_bruno_b_ Progressive Web Apps ? Reliable Fast Engaging Improving

    user experience !
  6. #DevoxxMA @_bruno_b_ Make it installable !

  7. #DevoxxMA @_bruno_b_ Manifest: metadata of your web app { "name":

    "Vue.js PWA", "short_name": "Vue.js PWA", "icons": [{ "icons": "icon-mid.png", "sizes": "96x96" }, { "icons": "icon-large.png", "sizes": "192x192" }], "theme_color": "#4DBA87", "background_color": "#000000", "display": "standalone", "orientation": "portrait", "start_url": "/demo" } manifest.json <html> <header> <link rel="manifest" href="/manifest.json"> </header> </html> index.html
  8. #DevoxxMA @_bruno_b_ Manifest: metadata of your web app { "name":

    "Vue.js PWA", "short_name": "Vue.js PWA", "icons": [{ "icons": "icon-mid.png", "sizes": "96x96" }, { "icons": "icon-large.png", "sizes": "192x192" }], "theme_color": "#4DBA87", "background_color": "#000000", "display": "standalone", "orientation": "portrait", "start_url": "/demo" } manifest.json
  9. #DevoxxMA @_bruno_b_ Service workers

  10. #DevoxxMA @_bruno_b_ Service workers Web app Cache Server Service Worker

    GET /api/stats GET /api/stats { “data”: [...] } { “data”: [...] } { “data”: [...] } Discussion on-going to cache POST requests https://github.com/w3c/ServiceWorker/issues/693 !
  11. #DevoxxMA @_bruno_b_ Service workers Web app Cache Server Service Worker

    GET /api/stats { “data”: [...] } Caching strategies - caching falling back to the network - network falling back to the cache - cache first, then network - displays cache data until network response is returned - intercepts the network request and caches the response { “data”: [...] }
  12. #DevoxxMA @_bruno_b_ Service workers Source: http://caniuse.com/#feat=serviceworkers

  13. #DevoxxMA @_bruno_b_ What about Vue.js ?

  14. #DevoxxMA @_bruno_b_ And with Vue.js ? Vue.js provides a PWA

    template! See: https://github.com/vuejs-templates/pwa $ npm install -g vue-cli $ vue init pwa $ npm install $ npm run dev
  15. #DevoxxMA @_bruno_b_ Let’s go ! Source code: https://github.com/bbonnin/devoxxma2017-pwa

  16. #DevoxxMA @_bruno_b_ In summary, PWA template includes... • Manifest.json ◦

    makes the web app installable • Service worker ◦ By default, caches the application shell ◦ Usable for any other resources: connectivity independence • Preload/prefetch of app chunks for better performance ◦ Preload : for resources that will be used in the page ◦ Prefetch : for resources that might be needed
  17. #DevoxxMA @_bruno_b_ Lighthouse Source:https://developers.google.com/web/tools/lighthouse/

  18. #DevoxxMA @_bruno_b_ Conclusion Still a lot to see: • More

    technologies, such as Push notifications, Performance improvement, Server-side rendering • Other boilerplates, such as nuxtjs/pwa ◦ https://github.com/nuxt-community/pwa-template • Good source to compare frameworks: HNPWA ◦ https://hnpwa.com/ • Case studies: ◦ https://developers.google.com/web/showcase/
  19. Merci ! https://github.com/bbonnin/devoxxma2017-pwa #DevoxxMA