Is there anyway to use SharedArrayBuffer on Github Page?

Question

Hi, Chrome has implemented some requirements to use SharedArrayBuffer, we have to include two headers:

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

Is there any way that we can use SharedArrayBuffer on Github? I have try netlify but they have a limit on bandwidth. Is there any hosting static site similar GitHub that can allow us custom request header so we can use SharedArrayBuffer?

score 2 · Answer 1 · edited Aug 06 '21 at 13:50

You can get SharedArrayBuffer to work by setting the required COOP and COEP headers through a service worker (even on Github Pages). This blogpost will explain the basics and show you how.

Essentially, the idea is to

when the page gets loaded for the first time, we register the worker

then we reload the page

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

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

I created a small library just now to make it easier: coi-serviceworker.

This does not work, the `crossOriginIsolated` is never true, and the page reloads continuosly — Pontiacks, Nov 05 '21 at 16:47

score 1 · Answer 2 · answered Aug 03 '21 at 05:12

1

As of August 2021 there's no way for GitHub pages to serve with COOP/COEP headers. As an alternative static file server with custom headers, Firebase hosting might be an option. I'm not familiar with other options.

answered Aug 03 '21 at 05:12

agektmr

1,929
13
13

score 0 · Accepted Answer · answered Aug 04 '21 at 01:15

0

Look likes Github don't have the intent to add custom headers, found the same question in 2011 and until now still don't have this Github pages, HTTP headers

answered Aug 04 '21 at 01:15

Đức Huỳnh

97
2
12

score 0 · Answer 4 · answered Aug 06 '21 at 02:08

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).

Is there anyway to use SharedArrayBuffer on Github Page?

4 Answers4

Linked