From f24db4a89b34855be41652f3996706a4192121f0 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Fri, 9 Sep 2022 11:33:20 -0500
Subject: [PATCH] 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 |  1 +
 src/app/App.tsx                   |  3 ++-
 src/app/constants.ts              | 11 +++++++++++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/config/webpackDevServer.config.js b/config/webpackDevServer.config.js
index 9e1e779d..954e48fb 100644
--- a/config/webpackDevServer.config.js
+++ b/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',
     },
diff --git a/src/app/App.tsx b/src/app/App.tsx
index 434af466..a340327e 100644
--- a/src/app/App.tsx
+++ b/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%"
diff --git a/src/app/constants.ts b/src/app/constants.ts
index d66af0d3..b30abc89 100644
--- a/src/app/constants.ts
+++ b/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;