Update wasm_demo

wasm_demo/index.html

@@ -44,6 +44,13 @@
              oninput="show_threads.value=threads.value">
     </div>
 
+    <!-- Workaround for cross-origin isolation, see
+      https://developer.chrome.com/blog/enabling-shared-array-buffer/
+      https://dev.to/stefnotch/enabling-coop-coep-without-touching-the-server-2d3n
+     -->
+    <script type='module' src="./main.js">
+    </script>
+
     <!-- Allow the C++ to access the canvas element --> 
     <script type='text/javascript'>
         var Module = {

wasm_demo/main.js

@@ -0,0 +1,19 @@
+// from https://dev.to/stefnotch/enabling-coop-coep-without-touching-the-server-2d3n
+// main.js
+if ("serviceWorker" in navigator) {
+  // Register service worker
+  navigator.serviceWorker.register(new URL("./sw.js", import.meta.url)).then(
+    function (registration) {
+      console.log("COOP/COEP Service Worker registered", registration.scope);
+      // If the registration is active, but it's not controlling the page
+      if (registration.active && !navigator.serviceWorker.controller) {
+          window.location.reload();
+      }
+    },
+    function (err) {
+      console.log("COOP/COEP Service Worker failed to register", err);
+    }
+  );
+} else {
+  console.warn("Cannot register a service worker");
+}

wasm_demo/sw.js

@@ -0,0 +1,39 @@
+// from https://dev.to/stefnotch/enabling-coop-coep-without-touching-the-server-2d3n
+// sw.js
+self.addEventListener("install", function () {
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener("fetch", function (event) {
+  if (event.request.cache === "only-if-cached" && event.request.mode !== "same-origin") {
+    return;
+  }
+
+  event.respondWith(
+    fetch(event.request)
+      .then(function (response) {
+        // It seems like we only need to set the headers for index.html
+        // If you want to be on the safe side, comment this out
+        // if (!response.url.includes("index.html")) return response;
+
+        const newHeaders = new Headers(response.headers);
+        newHeaders.set("Cross-Origin-Embedder-Policy", "require-corp");
+        newHeaders.set("Cross-Origin-Opener-Policy", "same-origin");
+
+        const moddedResponse = new Response(response.body, {
+          status: response.status,
+          statusText: response.statusText,
+          headers: newHeaders,
+        });
+
+        return moddedResponse;
+      })
+      .catch(function (e) {
+        console.error(e);
+      })
+  );
+});