有没有办法在GitHub Pages上使用SharedArrayBuffer？

Question

要使用 SharedArrayBuffer，我们需要添加两个响应头：

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

是否有办法在GitHub Pages上添加这些标题，以便SharedArrayBuffer可以正常工作？

- Đức Huỳnh

---

请考虑将关于使用服务工作者的答案（https://dev59.com/gVEG5IYBdhLWcg3wSpSz#68675301）标记为被接受的答案。它解决了问题；例如，在 https://validator.github.io/validator 上打开浏览器开发工具并检查响应头。 - sideshowbarker

与我一起，它不起作用，已经测试过，页面一遍又一遍地加载。 - Đức Huỳnh

Answer 1

您可以通过在服务工作者中设置所需的COOP和COEP标头来使SharedArrayBuffer正常工作（即使在GitHub Pages上）。我创建了一个小型库coi-serviceworker，以便更轻松地完成此操作。该库基于指南Enabling COOP/COEP without touching the server，其中概述了以下所需步骤：

1. 当页面第一次加载时，我们注册工作线程。
2. 然后重新加载页面。
3. 最后，现在该工作线程正在控制所有内容，因此每个请求现在都将设置适当的标头。

执行上述操作的服务工作线程必须包含类似以下内容的代码：

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

- gzuidhof

---

这个不起作用，crossOriginIsolated 永远不会为真，并且页面会持续重新加载。 - Pontiacks

@gzuidhof，所以原帖和另一个评论者报告说，当他们使用coi-serviceworker库时，会导致页面一遍又一遍地重新加载。您有没有观察到任何页面出现这种行为？您知道在某些情况下是什么原因引起的，以及如何修复它吗？ - sideshowbarker

@sideshowbarker，我在加载<script src="/static/js/coi-serviceworker.js"></script>时，遇到了和我的网站完全相同的情况。问题出在URI上，需要在相同目录或更高目录中加载。所以将/static/js/coi-serviceworker.js移动到根目录，并将src更改为coi-serviceworker.js即可解决问题。 - nagataaaas

问题是何时重新加载页面。这可能会因各种原因导致无限重载循环。在页面重新加载时，服务工作者应该准备好：navigator.serviceWorker.ready.then(function(reg) { if (!crossOriginIsolated && !navigator.serviceWorker.controller) window.location.reload(); }) - chkas

Answer 2

我尝试过Netlify，但他们对带宽有限制。我使用Cloudflare Workers添加这些头文件。在带宽方面，他们不会对你进行限制（这对于大型WebAssembly文件非常好），但是在免费计划中，他们对请求次数有限制 - 每月1000万个请求。要公正地说，这个限制通常很难在小的演示项目中达到（这通常是Github Pages用途），而且之后的价格也不是很高（每额外100万次请求收费$0.50）。https://developers.cloudflare.com/workers/platform/pricing

- RReverser

Answer 3

截至2021年8月，GitHub页面无法提供COOP/COEP头部。作为替代方案，可以使用带有自定义头部的静态文件服务器，Firebase托管可能是一个选择。我不熟悉其他选项。

- agektmr

Answer 4

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

- Đức Huỳnh