SharedStorageOperation

实验性： 这是一项实验性技术
在生产中使用此技术之前，请仔细检查浏览器兼容性表格。

SharedStorageOperation 接口是 Shared Storage API 的一部分，代表所有输出门操作类型的基类。

输出门类型详见下文

名称	描述	定义者	调用者
URL 选择	用于根据共享存储数据为用户选择要显示的 URL。	`SharedStorageSelectURLOperation`	`selectURL()`
运行	一种处理共享存储数据的通用方法。例如，可被 Private Aggregation API 用于处理共享存储数据并生成聚合报告。	`SharedStorageRunOperation`	`run()`

示例

定义单个操作

许多共享存储 worklet 模块脚本仅定义和注册一个操作；您可以在 SharedStorageSelectURLOperation 和 SharedStorageRunOperation 页面上找到示例。

在更高级的情况下，可以在同一个共享存储 worklet 模块脚本中定义和注册具有不同名称的多个操作。在以下 worklet 模块脚本中，我们定义了一个名为 SelectURLOperation 的 URL 选择操作，用于选择用于 A/B 测试的 URL，以及一个名为 ExperimentGroupReportingOperation 的运行操作，用于基于用户的 A/B 测试分组运行直方图报告。

// ab-testing-worklet.js

class SelectURLOperation {
  async run(urls, data) {
    // Read the user's group from shared storage
    const experimentGroup = await sharedStorage.get("ab-testing-group");

    // Log to console for the demo
    console.log(`urls = ${JSON.stringify(urls)}`);
    console.log(`data = ${JSON.stringify(data)}`);
    console.log(`ab-testing-group in shared storage is ${experimentGroup}`);

    // Return the index of the group
    return data.indexOf(experimentGroup);
  }
}

function getBucketForTestingGroup(testingGroup) {
  switch (testingGroup) {
    case "control":
      return 0;
    case "experiment-a":
      return 1;
    case "experiment-b":
      return 2;
  }
}

class ExperimentGroupReportingOperation {
  async run() {
    const experimentGroup = await sharedStorage.get("ab-testing-group");

    const bucket = BigInt(getBucketForTestingGroup(experimentGroup));
    privateAggregation.contributeToHistogram({ bucket, value: 1 });
  }
}

// Register the operations
register("ab-testing", SelectURLOperation);
register("experiment-group-reporting", ExperimentGroupReportingOperation);

在主浏览上下文中，这些操作分别由 selectURL() 和 run() 调用。通过这些方法调用的操作是根据其注册名称进行选择的，并且它们也必须符合 SharedStorageSelectURLOperation 和 SharedStorageRunOperation 类及其 run() 方法定义的结构。

// For demo purposes. The hostname is used to determine the usage of
// development localhost URL vs production URL
const contentProducerUrl = window.location.host;

// Map the experiment groups to the URLs
const EXPERIMENT_MAP = [
  {
    group: "control",
    url: `https://${contentProducerUrl}/ads/default-ad.html`,
  },
  {
    group: "experiment-a",
    url: `https://${contentProducerUrl}/ads/experiment-ad-a.html`,
  },
  {
    group: "experiment-b",
    url: `https://${contentProducerUrl}/ads/experiment-ad-b.html`,
  },
];

// Choose a random group for the initial experiment
function getRandomExperiment() {
  const randomIndex = Math.floor(Math.random() * EXPERIMENT_MAP.length);
  return EXPERIMENT_MAP[randomIndex].group;
}

async function injectAd() {
  // Load the worklet module
  await window.sharedStorage.worklet.addModule("ab-testing-worklet.js");

  // Set the initial value in the storage to a random experiment group
  window.sharedStorage.set("ab-testing-group", getRandomExperiment(), {
    ignoreIfPresent: true,
  });

  const urls = EXPERIMENT_MAP.map(({ url }) => ({ url }));
  const groups = EXPERIMENT_MAP.map(({ group }) => group);

  // Resolve the selectURL call to a fenced frame config only when it exists on the page
  const resolveToConfig = typeof window.FencedFrameConfig !== "undefined";

  // Run the URL selection operation to select an ad based on the experiment group in shared storage
  const selectedUrl = await window.sharedStorage.selectURL("ab-testing", urls, {
    data: groups,
    resolveToConfig,
    keepAlive: true,
  });

  const adSlot = document.getElementById("ad-slot");

  if (resolveToConfig && selectedUrl instanceof FencedFrameConfig) {
    adSlot.config = selectedUrl;
  } else {
    adSlot.src = selectedUrl;
  }

  // Run the reporting operation
  await window.sharedStorage.run("experiment-group-reporting");
}

injectAd();