Vue-cli: Progressive Web App template

[addyosmani]

@yyx990803 and I have talked about working on an official PWA template for Vue 📱

There are a few different options for what this could include:

• Web Application Manifest
• Default favicons (minimalist setup from realfavicongenerator.net)
• Service Worker precaching + runtime caching via sw-precache-webpack-plugin
• Application Shell architecture
• Code-splitting by default with vue-router

If we wanted to go even more ambitious we could cover:

• PRPL pattern support (using something like preload-webpack-plugin)
• Simple server-side rendering + pre-fetching
• CSS extraction for production

Requirements

• Aim to score as close to 100/100 on Lighthouse
• Must be straight-forward to use. If we make it inherently complex, it will lose value to end users.

Prior-art - PWA templates and boilerplates 🎨

• https://github.com/Narkoleptika/webpack-everything
• https://github.com/electricjesus/vue-pwa-template
• https://github.com/BosNaufal/vue-simple-pwa

Vue.js PWAs (open-source) 👐

• https://github.com/vuejs/vue-hackernews-2.0
• https://github.com/GoogleChrome/jscost.org (not yet fully released)
• https://github.com/mrgodhani/feedbox
• https://github.com/bstavroulakis/vue-wordpress-pwa

Other references 📚

• PRPL pattern with Webpack and React

Initially, I would love to get a feel for what would considered palatable for an MVP. There's technically nothing stopping us baking in everything in the above list, but let's talk and figure out a path forward 🚀

[yyx990803]

Thanks Addy! The list looks good and totally feasible. The only thing I'd consider is whether we want to include SSR for now, since SSR comes with some tradeoffs in increased dev and deployment complexity which may not be a net win for all apps. We can start with a version without SSR and then work on a separate one that uses SSR.

[addyosmani]

The only thing I'd consider is whether we want to include SSR for now, since SSR comes with some tradeoffs in increased dev and deployment complexity which may not be a net win for all apps. We can start with a version without SSR and then work on a separate one that uses SSR.

This plan of action sgtm 👍

What's the best way to get started? Worth us creating a new empty repo on the vuejs org to start on a PR?

[yyx990803]

I've created https://github.com/vuejs/pwa and sent an invite for collaboration. We'll move it to vuejs-templates once it's ready.

[addyosmani]

Awesome. Thanks, @yyx990803!

[rwatts3]

This is great news. Just curious if there is a posted timeline and roadmap for this ?
I'd be interested in assisting if possible.

[posva]

Closing this now that the template exists at https://github.com/vuejs-templates/pwa and it's ready
👏 @addyosmani