无论如何在 Github 页面上使用 SharedArrayBuffer 吗？答案

【问题标题】：Is there anyway to use SharedArrayBuffer on Github Page?无论如何在 Github 页面上使用 SharedArrayBuffer 吗？
【发布时间】：2021-08-01 10:53:01
【问题描述】：

您好，Chrome 已经实现了一些使用 SharedArrayBuffer 的要求，我们必须包含两个标头：

Cross-Origin-Opener-Policy：同源跨域嵌入策略：require-corp

有什么方法可以在 Github 上使用 SharedArrayBuffer 吗？我尝试过 netlify，但他们对带宽有限制。是否有任何类似于 GitHub 的托管静态站点可以允许我们自定义请求标头以便我们可以使用 SharedArrayBuffer？

【问题讨论】：

标签： github github-pages webassembly sharedarraybuffer

【解决方案1】：

您可以通过服务工作者（甚至在 Github Pages 上）设置所需的 COOP 和 COEP 标头来使 SharedArrayBuffer 工作。 This blogpost 将解释基础知识并向您展示如何操作。

基本上，这个想法是

页面第一次加载时，我们注册worker

然后我们重新加载页面

最后，既然工作人员控制着一切，现在每个请求都将设置适当的标头

执行此操作的服务人员必须包含类似于以下内容的内容

// 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。

【讨论】：

这不起作用，crossOriginIsolated 永远不会正确，并且页面会不断重新加载

【解决方案2】：

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

【讨论】：

【解决方案3】：

看起来 Github 没有添加自定义标题的意图，在 2011 年发现了同样的问题，直到现在仍然没有这个 Github pages, HTTP headers

【讨论】：

【解决方案4】：

我尝试过 netlify，但他们的带宽有限制。

我使用 Cloudflare Workers 添加此类标头。它们不会在带宽方面限制您（这对于大量 WebAssembly 文件很有用），但它们确实对免费计划的请求数量有限制 - 每月 10,000,000 个请求。 https://developers.cloudflare.com/workers/platform/pricing

但公平地说，这个限制通常很难在小型演示中达到（这是 Github Pages 通常的用途），之后价格也不是很高（每增加 100 万个请求需要 0.50 美元）。

【讨论】：