implement cache bursting based on http header version

In 096eea7, we made use of APIs that require special http headers to be
configured on the server. This had a side effect of causing the
documentation iframe to not load because the browser would cache the
headers of the iframe index.html page.

We can work around this by providing a header version to do cache
bursting via a query parameter on this page.

config/webpackDevServer.config.js

@@ -40,6 +40,7 @@ module.exports = function (proxy, allowedHost) {
       'Access-Control-Allow-Origin': '*',
       'Access-Control-Allow-Methods': '*',
       'Access-Control-Allow-Headers': '*',
+      // items below required by Pybricks Code app
       'Cross-Origin-Opener-Policy': 'same-origin',
       'Cross-Origin-Embedder-Policy': 'require-corp',
     },

src/app/App.tsx

@@ -18,6 +18,7 @@ import Terminal from '../terminal/Terminal';
 import Toolbar from '../toolbar/Toolbar';
 import Tour from '../tour/Tour';
 import { isMacOS } from '../utils/os';
+import { httpServerHeadersVersion } from './constants';
 
 const Docs: React.VFC = () => {
     const { setIsSettingShowDocsEnabled } = useSettingIsShowDocsEnabled();
@@ -115,7 +116,7 @@ const Docs: React.VFC = () => {
                     contentWindow.document.documentElement.classList.add(Classes.DARK);
                 }
             }}
-            src={`static/docs/v${docsPackage.version}/index.html`}
+            src={`static/docs/v${docsPackage.version}/index.html?v${httpServerHeadersVersion}`}
             allowFullScreen={true}
             role="documentation"
             width="100%"

src/app/constants.ts

@@ -56,3 +56,14 @@ export const pybricksCopyright = 'Copyright (c) 2020-2022 The Pybricks Authors';
 /** LEGO "fair play" disclaimer */
 export const legoDisclaimer =
     'LEGO® is a trademark of the LEGO Group of companies which does not sponsor, authorize or endorse this site.';
+
+/**
+ * Provides a version for the required headers of this app.
+ *
+ * This is used for cache bursting when the required headers change.
+ *
+ * Currently, the following headers are required:
+ *      Cross-Origin-Opener-Policy: same-origin
+ *      Cross-Origin-Embedder-Policy: require-corp
+ */
+export const httpServerHeadersVersion = 2;