feat(gatsby): Add noscript tag to default-html (#10945)

Since Google's lighthouse check complains about not having a `<noscript>` tag outside the app shell (because with service workers it doesn't turn them off...) I added this styleable noscript tag + a little note on service workers. Feedback on the note is welcome. The note should convey the message that Gatsby also works without JavaScript but is better with it enabled + the service worker bug (while having JS disabled) Also fixed the headings of the doc page
gatsbyjs · Jan 9, 2019 · d517ead · d517ead
1 parent 3d7b1c3
commit d517ead
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/docs/docs/custom-html.md b/docs/docs/custom-html.md
@@ -3,7 +3,7 @@ title: Customizing html.js
 ---
 
 Gatsby uses a React component to server render the `<head>` and other parts of
-the HTML outside of the core Gatsby application.
+the HTML outside of the core Gatsby application. Gatsby also sets a default value for the `<noscript>` tag there.
 
 Most sites should use the default `html.js` shipped with Gatsby. But if you need
 to customize your site's html.js, copy the default one into your source
@@ -22,14 +22,14 @@ If you need to insert custom html into the `<head>` or `<footer>` of each page o
 Note: the various props that are rendered into pages _are_ required e.g.
 `headComponents`, `preBodyComponents`, `body`, and `postBodyComponents`.
 
-### Inserting html into the <head>
+### Inserting html into the `<head>`
 
 Anything you render in the `html.js` component will _not_ be made "live" in
 the client like other components. If you want to dynamically update your
 `<head>` we recommend using
 [React Helmet](/packages/gatsby-plugin-react-helmet/)
 
-### Inserting html into the <footer>
+### Inserting html into the `<footer>`
 
 If you want to insert custom html into the footer, html.js is the preferred way of doing this. If you're writing a plugin, consider using the `setPostBodyComponents` prop in the [Gatsby SSR API](/docs/ssr-apis/).
 

diff --git a/packages/gatsby/cache-dir/__tests__/__snapshots__/static-entry.js.snap b/packages/gatsby/cache-dir/__tests__/__snapshots__/static-entry.js.snap
@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`develop-static-entry onPreRenderHTML can be used to replace headComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><style>.style3 </style><style>.style2 </style><style>.style1 </style><script src=\\"/socket.io/socket.io.js\\"></script></head><body><div id=\\"___gatsby\\"></div><script src=\\"/commons.js\\"></script></body></html>"`;
+exports[`develop-static-entry onPreRenderHTML can be used to replace headComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><style>.style3 </style><style>.style2 </style><style>.style1 </style><script src=\\"/socket.io/socket.io.js\\"></script></head><body><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"></div><script src=\\"/commons.js\\"></script></body></html>"`;
 
-exports[`develop-static-entry onPreRenderHTML can be used to replace postBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><script src=\\"/socket.io/socket.io.js\\"></script></head><body><div id=\\"___gatsby\\"></div><div>div3</div><div>div2</div><div>div1</div><script src=\\"/commons.js\\"></script></body></html>"`;
+exports[`develop-static-entry onPreRenderHTML can be used to replace postBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><script src=\\"/socket.io/socket.io.js\\"></script></head><body><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"></div><div>div3</div><div>div2</div><div>div1</div><script src=\\"/commons.js\\"></script></body></html>"`;
 
-exports[`develop-static-entry onPreRenderHTML can be used to replace preBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><script src=\\"/socket.io/socket.io.js\\"></script></head><body><div>div3</div><div>div2</div><div>div1</div><div id=\\"___gatsby\\"></div><script src=\\"/commons.js\\"></script></body></html>"`;
+exports[`develop-static-entry onPreRenderHTML can be used to replace preBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><script src=\\"/socket.io/socket.io.js\\"></script></head><body><div>div3</div><div>div2</div><div>div1</div><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"></div><script src=\\"/commons.js\\"></script></body></html>"`;
 
-exports[`static-entry onPreRenderHTML can be used to replace headComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><style>.style3 </style><style>.style2 </style><style>.style1 </style><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/></head><body><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" role=\\"group\\"></div></div><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.page={\\"path\\":\\"/about/\\",\\"componentChunkName\\":\\"page-component---src-pages-test-js\\",\\"jsonName\\":\\"about.json\\"};/*]]>*/</script><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script></body></html>"`;
+exports[`static-entry onPreRenderHTML can be used to replace headComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><style>.style3 </style><style>.style2 </style><style>.style1 </style><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/></head><body><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" role=\\"group\\"></div></div><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.page={\\"path\\":\\"/about/\\",\\"componentChunkName\\":\\"page-component---src-pages-test-js\\",\\"jsonName\\":\\"about.json\\"};/*]]>*/</script><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script></body></html>"`;
 
-exports[`static-entry onPreRenderHTML can be used to replace postBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/></head><body><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" role=\\"group\\"></div></div><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.page={\\"path\\":\\"/about/\\",\\"componentChunkName\\":\\"page-component---src-pages-test-js\\",\\"jsonName\\":\\"about.json\\"};/*]]>*/</script><div>div3</div><div>div2</div><div>div1</div></body></html>"`;
+exports[`static-entry onPreRenderHTML can be used to replace postBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/></head><body><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" role=\\"group\\"></div></div><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.page={\\"path\\":\\"/about/\\",\\"componentChunkName\\":\\"page-component---src-pages-test-js\\",\\"jsonName\\":\\"about.json\\"};/*]]>*/</script><div>div3</div><div>div2</div><div>div1</div></body></html>"`;
 
-exports[`static-entry onPreRenderHTML can be used to replace preBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/></head><body><div>div3</div><div>div2</div><div>div1</div><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" role=\\"group\\"></div></div><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.page={\\"path\\":\\"/about/\\",\\"componentChunkName\\":\\"page-component---src-pages-test-js\\",\\"jsonName\\":\\"about.json\\"};/*]]>*/</script><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script></body></html>"`;
+exports[`static-entry onPreRenderHTML can be used to replace preBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/></head><body><div>div3</div><div>div2</div><div>div1</div><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" role=\\"group\\"></div></div><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.page={\\"path\\":\\"/about/\\",\\"componentChunkName\\":\\"page-component---src-pages-test-js\\",\\"jsonName\\":\\"about.json\\"};/*]]>*/</script><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script></body></html>"`;
diff --git a/packages/gatsby/cache-dir/default-html.js b/packages/gatsby/cache-dir/default-html.js
@@ -16,6 +16,9 @@ export default class HTML extends React.Component {
         </head>
         <body {...this.props.bodyAttributes}>
           {this.props.preBodyComponents}
+          <noscript key="noscript" id="gatsby-noscript">
+            This app works best with JavaScript enabled.
+          </noscript>
           <div
             key={`body`}
             id="___gatsby"