BackgroundFetchRegistration

它还继承了其父级 EventTarget 的属性。

BackgroundFetchRegistration.id 只读 实验性

包含后台获取 ID 的字符串。

BackgroundFetchRegistration.uploadTotal 只读 实验性

包含要上传的总字节数的 number。

BackgroundFetchRegistration.uploaded 只读 实验性

包含已成功发送的字节数的 number，初始值为 0。

BackgroundFetchRegistration.downloadTotal 只读 实验性

包含此下载的总字节数的 number。这是注册后台获取时设置的值，或者为 0。

BackgroundFetchRegistration.downloaded 只读 实验性

包含已下载的字节数的 number，初始值为 0。

BackgroundFetchRegistration.result 只读 实验性

最初返回空字符串，完成后返回字符串 "success" 或 "failure"。

BackgroundFetchRegistration.failureReason 只读 实验性

包含指示后台获取失败原因的值的字符串。可以是以下值之一：""、"aborted"、"bad-status"、"fetch-error"、"quota-exceeded"、"download-total-exceeded"。

BackgroundFetchRegistration.recordsAvailable 只读 实验性

一个 boolean，指示 recordsAvailable 标志是否已设置。

它还继承了其父级 EventTarget 的方法。

BackgroundFetchRegistration.abort() 实验性

中止后台获取。返回一个 Promise，如果获取成功中止，则解析为 true。

BackgroundFetchRegistration.match() 实验性

返回单个 BackgroundFetchRecord 对象，它是参数的第一个匹配项。

BackgroundFetchRegistration.matchAll() 实验性

返回一个 Promise，解析为包含请求和响应的 BackgroundFetchRecord 对象数组。

它还继承了其父级 EventTarget 的事件。

使用 addEventListener() 监听这些事件，或者将事件监听器分配给此接口的 oneventname 属性。

progress 实验性

当以下任何属性发生变化时触发：uploaded、downloaded、result 或 failureReason。

以下代码创建了一个名为 bgFetch 的 BackGroundFetchRegistration，其 id 为 "my-fetch"。

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch(
    "my-fetch",
    ["/ep-5.mp3", "ep-5-artwork.jpg"],
    {
      title: "Episode 5: Interesting things.",
      icons: [
        {
          sizes: "300x300",
          src: "/ep-5-icon.png",
          type: "image/png",
        },
      ],
      downloadTotal: 60 * 1024 * 1024,
    },
  );
});

将 id 记录到控制台中返回 "my-fetch"。

console.log(bgFetch.id); // "my-fetch"

可以使用 match() 方法从注册中找到特定的 BackgroundFetchRecord。

bgFetch.match("/ep-5.mp3").then(async (record) => {
  if (!record) {
    console.log("No record found");
    return;
  }

  console.log(`Here's the request`, record.request);
  const response = await record.responseReady;
  console.log(`And here's the response`, response);
});