在 Github 页面上是否可以使用 SharedArrayBuffer?

Is there anyway to use SharedArrayBuffer on Github Page?

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

截至 2021 年 8 月,GitHub 页面无法通过 COOP/COEP headers 提供。作为具有自定义 headers、Firebase hosting might be an option 的替代静态文件服务器。我不熟悉其他选项。

看起来很喜欢Github没有添加自定义的意图headers,2011年发现同样的问题,到现在还没有这个Github pages, HTTP headers

您可以通过 service worker 设置所需的 COOP 和 COEP headers 来让 SharedArrayBuffer 工作(即使在 Github 页面上)。 This blogpost 将解释基础知识并向您展示操作方法。

本质上,这个想法是为了

  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

执行此操作的服务工作者必须包含类似于

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

我刚刚创建了一个小库来简化它:coi-serviceworker

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

我使用 Cloudflare Workers 添加这样的headers。他们不会在带宽方面限制你(这对大量的 WebAssembly 文件很有用),但他们对免费计划的请求数量有限制——每月 10,000,000 个请求。 https://developers.cloudflare.com/workers/platform/pricing

不过,公平地说,这个限制通常很难在小型演示上达到(这是 Github Pages 通常用于的目的),而且之后价格也不是很高(每个额外 0.50 美元) 100 万个请求)。