在 Github 页面上是否可以使用 SharedArrayBuffer?
Is there anyway to use SharedArrayBuffer on Github Page?
- 嗨,Chrome 已经实现了一些使用 SharedArrayBuffer 的要求,我们必须包括两个 headers:
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
- 有什么方法可以在 Github 上使用 SharedArrayBuffer?我尝试过 netlify,但它们对带宽有限制。是否有任何类似 GitHub 的托管静态站点可以允许我们自定义请求 header 以便我们可以使用 SharedArrayBuffer?
截至 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 将解释基础知识并向您展示操作方法。
本质上,这个想法是为了
- 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
执行此操作的服务工作者必须包含类似于
的内容
// 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 万个请求)。
- 嗨,Chrome 已经实现了一些使用 SharedArrayBuffer 的要求,我们必须包括两个 headers:
Cross-Origin-Opener-Policy: same-origin Cross-Origin-Embedder-Policy: require-corp
- 有什么方法可以在 Github 上使用 SharedArrayBuffer?我尝试过 netlify,但它们对带宽有限制。是否有任何类似 GitHub 的托管静态站点可以允许我们自定义请求 header 以便我们可以使用 SharedArrayBuffer?
截至 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 将解释基础知识并向您展示操作方法。
本质上,这个想法是为了
- 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
执行此操作的服务工作者必须包含类似于
的内容// 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 万个请求)。