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();