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);
      })
  );
});

Answer 2

I have try netlify but they have a limit on bandwidth.

I use Cloudflare Workers to add such headers. They won't limit you in terms of bandwidth (which is good for hefty WebAssembly files), but they do have a limit for number of requests on the free plan - 10,000,000 requests per month. https://developers.cloudflare.com/workers/platform/pricing

To be fair though, that limit is usually hard to hit on small demos (which is what Github Pages is usually for), and after that the price is not very steep either ($0.50 for each extra 1M requests).