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

Bc34f46fdfa199da05a78f26584ecec3?s=128

Bruno Bonnin

November 14, 2017
Tweet

Transcript

  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