Is there any way to use SharedArrayBuffer on GitHub Pages?

Question

To use SharedArrayBuffer, we have to add two response headers:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Is there any way to add those headers with GitHub Pages so SharedArrayBuffer will work?

Answer 1

You can get SharedArrayBuffer to work by setting the required COOP and COEP headers through a service worker (even on GitHub Pages).

I created a small library to make it easier: coi-serviceworker — based on the guide Enabling COOP/COEP without touching the server, which outlines the required steps:

1. When the page gets loaded for the first time, we register the worker.
2. Then we reload the page.
3. And finally, now that the worker is controlling everything, every request will now have the appropriate headers set.

The service worker which does that has to contain something along the lines of the following:

// sw.js
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) {
        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);
      })
  );
});