是否有任何方法在GitHub页面上使用SharedArrayBuffer ?

Question

要使用SharedArrayBuffer，我们必须添加两个响应头:

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

是否有任何方法添加这些标题与GitHub页面，使SharedArrayBuffer将工作?

Answer 1

您可以通过service worker(即使在GitHub Pages上)设置所需的COOP和COEP头来获得SharedArrayBuffer的工作。

我创建了一个小库，使它更容易:coi-serviceworker -基于在不接触服务器的情况下启用COOP/COEP指南，该指南概述了所需的步骤:

1. 当页面第一次加载时，我们注册worker。
2. 最后，现在工作线程控制一切，每个请求现在都有适当的头集。

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

Answer 2

截至2021年8月，GitHub页面无法与COOP/COEP头一起服务。作为具有自定义标头的备选静态文件服务器，Firebase托管可能是一种选择。我不熟悉其他选项。

Answer 3

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

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

公平地说，这个限制通常很难达到小型演示(这是Github Pages通常的目的)，之后的价格也不是很高(每增加100万次请求0.50美元)。

Answer 4

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