无论如何可以在 Github Page 上使用 SharedArrayBuffer 吗? [英] Is there anyway to use SharedArrayBuffer on Github Page?

问题描述

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

<块引用>

Cross-Origin-Opener-Policy:同源Cross-Origin-Embedder-Policy: require-corp

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

解决方案

您可以通过 service worker(甚至在 Github Pages)设置所需的 COOP 和 COEP 标头，使 SharedArrayBuffer 工作.这篇博文将解释基础知识并展示你怎么样.

本质上，这个想法是

<块引用>

1. 第一次加载页面时，我们注册工作人员
2. 然后我们重新加载页面
3. 最后，既然工作人员正在控制一切，现在每个请求都将设置适当的标头

执行此操作的 Service Worker 必须包含类似于

//sw.jsself.addEventListener("fetch", function (event) {if (event.request.cache === "only-if-cached" && event.request.mode !== "same-origin") {返回;}event.respondWith(获取(事件.请求).then(功能(响应){const newHeaders = new Headers(response.headers);newHeaders.set("Cross-Origin-Embedder-Policy", "require-corp");newHeaders.set(Cross-Origin-Opener-Policy", 同源");const moddedResponse = new Response(response.body, {状态:response.status，statusText: response.statusText,标头:新标头，});返回修改响应；}).catch(函数(e){控制台错误(e)；}));});

我刚刚创建了一个小型库以简化操作:coi-serviceworker.

• Hi, Chrome has implemented some requirements to use SharedArrayBuffer, we have to include two headers:

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

• Is there any way that we can use SharedArrayBuffer on Github? I have try netlify but they have a limit on bandwidth. Is there any hosting static site similar GitHub that can allow us custom request header so we can use SharedArrayBuffer?

解决方案

You can get SharedArrayBuffer to work by setting the required COOP and COEP headers through a service worker (even on Github Pages). This blogpost will explain the basics and show you how.

Essentially, the idea is to

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

The service worker which does that has to contain something along the lines of

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

I created a small library just now to make it easier: coi-serviceworker.

这篇关于无论如何可以在 Github Page 上使用 SharedArrayBuffer 吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！