Progressive Web Apps with Vue.js

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

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

#DevoxxMA @_bruno_b_ GDPR Data Governance Data Fabric

#DevoxxMA @_bruno_b_ Vue.js Component-oriented Dedicated to web interface creation Performant
Very easy to learn Focus on the View layer Flexible

#DevoxxMA @_bruno_b_ Progressive Web Apps ? Reliable Fast Engaging Improving
user experience !

#DevoxxMA @_bruno_b_ Make it installable !

#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

#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

#DevoxxMA @_bruno_b_ Service workers

#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 !

#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”: [...] }

#DevoxxMA @_bruno_b_ Service workers Source: http://caniuse.com/#feat=serviceworkers

#DevoxxMA @_bruno_b_ What about Vue.js ?

#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

#DevoxxMA @_bruno_b_ Let’s go ! Source code: https://github.com/bbonnin/devoxxma2017-pwa

#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

#DevoxxMA @_bruno_b_ Lighthouse Source:https://developers.google.com/web/tools/lighthouse/

#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/

Merci ! https://github.com/bbonnin/devoxxma2017-pwa #DevoxxMA

Progressive Web Apps with Vue.js

Progressive Web Apps with Vue.js

Bruno Bonnin

More Decks by Bruno Bonnin

Other Decks in Technology

Featured

Transcript