Gatsby: Access static site when javascript is disabled in the browser.

[treb0r]

Summary

Currently, Gatsby generated static sites require Javascript to be enabled in the browser. When I disable Javascript, only the index page of the site is shown. Clicked links return white screens. Is it possible to configure Gatsby to build a static site that can be accessed when Javascript is disabled in the browser?

Basic example

Install the Gatsby Default Starter. Build and serve it.

Disable Javascript in the browser and click the (Go to page 2) link.

Motivation

It's better for accessibility to provide graceful degradation. Only basic access to the content is required in this situation.

[treb0r]

After further testing I've discovered that the links work in Google Chrome with Javascript switched off.

This only affects Firefox.

Currently running Firefox 63.0 on Ubuntu 18.10.

[treb0r]

I have deployed the Gatsby Default Starter to Netlify here:

https://kind-franklin-b7dfd2.netlify.com/

Neither Firefox nor Chrome can load the link to page two with Javascript disabled.

To disable Javascript:

Firefox -> Developer Tools -> Settings -> Advanced Settings -> Disable Javascript

Chrome -> Developer Tools -> Settings -> Debugger -> Disable Javascript

[ascorbic]

If you disable Javascript in preferences etc then this does work. The reason this is failing is because when you disable JS in the developer tools it doesn't disable the service worker cache, so Gatsby loads the app shell fallback, which is empty without JS. If you disable JavaScript in your normal (non developer) settings, then the browser will bypass the service worker cache and load the rendered page as expected. To reproduce, go to chrome://settings/content/javascript and disable JS, and your link works.

I think this is fine. The only person likely to disable JavaScript using the developer tools is the site developer themselves. If someone is disabling it for security (or any other non-testing) reason they will use chrome://settings or about:preferences. It works as expected then.

[treb0r]

Thanks for the answer!
I tried as you suggest and it works in Chrome (this explains how I got mixed results when I was testing before). I can't load the pages at all in Firefox when Javascript is disabled from about:config.

[KyleAMathews]

Thanks @ascorbic for the great explanation! Also it's good to test stuff like this in an incognito/private window to avoid problems with things like sw caches, etc.

[treb0r]

It would be great if we could load static site pages in Firefox with Javascript disabled.

[ascorbic]

It works for me in Firefox. Have you tried it in a private window? It might be getting confused with the sw cache.

[treb0r]

Boom. I cleared the cache and it works. Thanks so much. I can now adopt Gatsby. I know this stuff is annoying but I also know a usability / accessibility tester who always turns off Javascript.