Baseline PWA features about pwa HOT 13 CLOSED

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.

from pwa.

Closing this one up as we've hit baseline.

from pwa.

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)

from pwa.

@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.

from pwa.

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.

from pwa.

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

from pwa.

Nice work ! This will truly be a historic moment.

from pwa.

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

from pwa.

@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.

from pwa.

@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

from pwa.

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.

from pwa.

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

from pwa.

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

from pwa.