I tried to use my Ionic React PWA with Javascript disabled by mistake and I got a blank screen.
This is bad UX because the user may not have any idea what to do, so I opened index.html and added a <noscript> tag:
<body class="has-navbar-fixed-top">
<div id="root"></div>
<noscript>Enable JavaScript in your browser to view this page.</noscript>
<script type="module" src="/src/main.tsx"></script>
</body>
However, this message isn’t displayed when JavaScript is disabled in the browser (or it is displayed, but it’s covered by something else). What’s the right way to display a message that the user needs to enable JavaScript?
who disables their javascript anyway? These days, I find it hard to believe people even do this. Most people who aren’t tech savvy wouldn’t even know about this option in their settings. And if they were, why would you want to disable js? No website would work for them.
Sure, it’s probably not very common. But one of the points of Ionic is that there is pretty good support for web standards.
So I thought this would be easy (drop in a <noscript> tag and call it a day). Unfortunately that doesn’t work, and I don’t understand enough about how Ionic is put together to identify the problem. Actually it occurs to me it could be due to Vite, which I’m using as a build tool, as well.
Any insight into how to get a message “you need to enable JS” would be much appreciated.
I think it’s because Ionic hides the body until it’s “hydrated” and uses javascript to do so, but since there is no javascript, the body is always hidden, so your message doesn’t get displayed.
You can workaround it by adding hydrated class to your html element, i.e. <html lang="en" class="hydrated">, but not sure which issues it might cause to the users with javascript enabled.
1 Like
Thanks, adding hydrated makes the <noscript> message appear!
Initial testing shows no effects on the app with JS enabled, but I’ll report back if I find this somehow breaks my app.