Baseline PWA features

[addyosmani]

Cross-posting from our original discussion at vuejs/vue-cli#381. Will make a start on this shortly.

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 🚀

[addyosmani]

We're now up to this point with Lighthouse:

Real score is probably +10-20 when serving over HTTPS.

Major parts left:

• Contains some content when JavaScript is not available - need to decide whether to inline "shell CSS" or critical CSS or SSR
• Background and foreground colors have a sufficient contrast ratio
• Every image element has an alt attribute (logo)

[addyosmani]

And bumped up with some fallback content:

For now, I'll probably encourage the user to decide if they want to specify fallback content or go for Vue's SSR support themselves.

Last two items there will be looked at next.

[Naramsim]

Could be really nice to have an option to opt-in to AMP. https://developers.google.com/web/shows/google-io/2016/amp-progressive-web-apps-start-fast-stay-engaged-google-io-2016

[rwatts3]

Nice work ! This will truly be a historic moment.

[zyzski]

After doing some work on a vue PWA, the biggest challenge i've faced (besides some crazy webpack configging) is handling the app shell. It's simple enough to inline critical CSS and style a basic app shell in the index.html template, but there's no way to avoid the long frame/FPS hit when vue writes the entire app to the dom. The current solution right now seems to be SSR.

I'm curious if anyone has been able to solve this on the client side, but might be better to discuss in a different thread?

@addyosmani I would also look in to adding evan's code from vue-hackernews2 to generate preload/prefetch tags from chunks:
https://github.com/vuejs/vue-hackernews-2.0/blob/master/src/index.template.html#L11

[addyosmani]

@zyzski I'd definitely be open to discussing those challenges in a separate thread. The interesting decision for us to make with Vue's PWA story is balancing how much we bake into the template vs deferring out to docs (and I do think we should have Vue docs that talk about some of these trade-offs you do run into production). Want to file an issue?

On preloading: I initially thought about using https://github.com/googlechrome/preload-webpack-plugin for this purpose, but I'll definitely take a look at Evan's code for this. If we're fine with prescribing a simpler pattern I'm also down for that.

[zyzski]

@addyosmani makes sense. i'm not really comfortable creating an issue about it just yet, because I am new-ish to vue and detailed performance testing. to be fair, the framework is already hitting goal perf metrics, I was just wondering about pushing it a bit further.

on preloading: I didn't know that plugin existed and was using vue-hn2 as my reference while building so I just used his method, looks like they do the same thing

[addyosmani]

Performance

faster 3G + Moto G4:
https://www.webpagetest.org/lighthouse.php?test=170407_W7_5QQB&run=3

We're interactive in about 2.5s leaving 2.5s of budget (out of 5) for users to get their application code interactive too. I'm pretty happy with that. We can of course trim it down further.

As the output of this is an SPA using templating/data via JS, there's little extra work to be done to get the AppShell pattern in place. Based on my convos with Evan I think keeping this fairly light and flexible increases the chances folks will actually use this.

Emerging market 3G + G4

https://www.webpagetest.org/lighthouse.php?test=170407_FD_5Q4F&run=3 (original run is https://www.webpagetest.org/result/170407_FD_5Q4F/).

Time to interactive is under 5s (4.4s), but is still a little close to give folks some good legroom.

Scaffold uses ~45KB. App's about 7.7KB and vendor is 35KB.

https://test-vue-pwa.firebaseapp.com/

With CPU throttling on, we're seeing 1.3-1.4s spent in JavaScript startup:

Going to see how much of that we can trim back.

[yyx990803]

FYI if we use the runtime only build we can shave off another ~7kb

[addyosmani]

Oh wow. I had no idea runtime only builds were a thing. I'll give that a try too.

[addyosmani]

Putting together the final MVP list of things to tackle.

I've got #6 (runtime build) and was then going to look at whether there's more work to be done for the Application Shell architecture.

@yyx990803 Do you have any opinions on default UI? Right now I'm using the same type of HTML output the Webpack template uses (Vue logo with text). Could implement a simple application header nav to highlight the "shell" concept. If we do this, might be worth just adding in via HTML + CSS rather than pulling in a whole Vue CSS library.

[yyx990803]

@addyosmani yeah, I think a simple Material-style app shell with Vue theme colors could be nice :) And just some raw HTML + CSS should suffice.

[addyosmani]

Closing this one up as we've hit baseline.