Fix Lighthouse Audit warning: missing noscript block

[rosenbjerg]

Adds a noscript block to the body of the template, to inform visitors that javascript is required.
Fixes the warning in Lighthouse Audit:
https://web.dev/without-javascript/?utm_source=lighthouse&utm_medium=devtools
Placed in body to support html4 as well as html5

[prateekbh]

Preact CLI prerender it's pages, therefore this warning should not be present in the out of the box setup. Are you using --no-prerender flag?

[rosenbjerg]

No, I am not using --no-prerender flag, and I can also see in the index.html that it contains prerendered components.
Still, I get the above mentioned warning when running a Lighthouse Audit.
I know it is not a real problem, but it is so easy to fix for all users of preact-cli.

If the prerendering process empties the body as part of the rendering, it might be necessary to move the noscript tag to the head of the template document. But then it will "only" benefit HTML5 browsers

[developit]

Body content from the template is preserved during prerendering.

I'm on the fence about this one. It seems like lighthouse is recommending an actively harmful technique here, though checking the audit description I'm not sure it is?

Lighthouse disables JavaScript on the page and then inspects the page's HTML. If the HTML is empty, the audit fails.

One potentially interesting thing to note here is that Preact CLI can be used to produce apps that are entirely reliant on JS, or apps that don't need it at all to function. I think one of the key indicators of this would be whether or not --prerender-urls is passed to preact build. Without that argument it's difficult to build something that works with JS disabled, and the noscript tag is probably warranted.

Just so I'm following along, how were you getting lighthouse to produce this warning? A freshly installed Preact CLI app?

[rosenbjerg]

No, good thing to point out. It is not a freshly installed Preact CLI app, but a Preact CLI app I've been working on for some time.
I find it strange that the check fails, as when I visit the page with Javascript blocked I see the prerendered elements, so body is definitely not empty.
But I completely agree that having a noscript block in the body of webapps, that have a functional prerendered front page, is both unnecessary and would look bad.

[developit]

Just a thought - any chance you noticed this audit failing during development mode? (npm start / preact watch)

During development mode prerendering is disabled, since it breaks caching.

[rosenbjerg]

No, it was built with yarn build / preact build.
It was build using Preact 8.2.1 and some not-latest version of preact-cli.
I have since upgraded the project to Preact X and the newest version of preact-cli, but I've not yet deployed that. Hopefully tomorrow though. I can report back after testing if the warning is gone?

[rosenbjerg]

Just deployed and tested using Preact X.
Best practice score went from 93 to 100, which is nice 👍
But I still receive that warning. I have again confirmed that it is prerendered, and that the body contains this prerendered html.
If I disable javascript and refresh, I can see these elements.
So the page is most definitely not empty. I'm not sure what triggers this warning, but it seems like a false positive in this case.

[ForsakenHarmony]

@prateekbh I'd assume most users of preact-cli don't make completely static sites with it, so not having javascript would probably break stuff

Should probably be configurable or smth