This is a small piece of Rack middleware that will append a message to your HTML warning a user that they need to enable JavaScript in order to properly view your site.
The Rack middleware will append a <div> right after the opening body tag, but hide it via a CSS directive that is written by JavaScript in the <head> section. This prevents any flashing that can happen by merely hiding the element via JS directly. We don’t use the <noscript> tag since it has spotty support and doesn’t work when a user is using a browser plugin to whitelist JS on certain sites.
The div that is created can be referenced in CSS the the id, rack-unscripted-no-javascript-warning, so you can style this warning (when it does get displayed) to your heart’s content.
Original HTML:
<html>
<head>
<title>The Bucket of Truth</title>
</head>
<body>
...stuff!...
</body>
</html>
HTML with Rack::Unscripted enabled:
<html>
<head>
<title>The Bucket of Truth</title>
<script type="text/javascript">
document.write('<style>#rack-unscripted-no-javascript-warning { display:none }</style>');
</script>
</head>
<body>
<div id='rack-unscripted-no-javascript-warning'>
Warning, this site requires JavaScript to function properly. Please enable it.
</div>
...stuff!...
</body>
</html>
Make sure to install this gem:
gem install rack-unscripted
or, add the following to your Gemfile:
gem 'rack-unscripted'
Then you need to configure your middleware stack to use this library.
use Rack::Unscripted
or
use Rack::Unscripted, "Custom warning message to users without JavaScript enabled."
In config/initializers/rack_unscripted.rb
MyApplicationName::Application.config.middleware use "Rack::Unscripted"
In config/environment.rb
config.middleware.use "Rack::Unscripted"
require 'rack/unscripted' use Rack::Unscripted
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent