BackgroundFetchUpdateUIEvent

可用性有限

此功能不是基线，因为它在一些最常用的浏览器中无法正常工作。

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

注意： 此功能仅在 服务工作者 中可用。

BackgroundFetchUpdateUIEvent 是 后台获取 API 的一个接口，它是一个用于 backgroundfetchsuccess 和 backgroundfetchfail 事件的事件类型，并提供了一种方法来更新应用程序的标题和图标，以便告知用户后台获取的成功或失败。

Event ExtendableEvent BackgroundFetchEvent BackgroundFetchUpdateUIEvent

构造函数

BackgroundFetchUpdateUIEvent()

创建一个新的 BackgroundFetchUIEvent 对象。通常不会使用此构造函数，因为浏览器会为 backgroundfetchsuccess 和 backgroundfetchfail 事件自行创建这些对象。

实例属性

还继承了其父级 BackgroundFetchEvent 的属性。

实例方法

还继承了其父级 BackgroundFetchEvent 的方法。

BackgroundFetchUpdateUIEvent.updateUI()

更新用户界面中的标题和图标，以显示后台获取的状态。以 Promise 形式解析。

示例

在此示例中，监听 backgroundfetchsuccess 事件，表示获取已成功完成。然后调用 updateUI() 方法，并附带一条消息，告知用户他们下载的剧集已准备好。

js
addEventListener("backgroundfetchsuccess", (event) => {
  const bgFetch = event.registration;

  event.waitUntil(
    (async () => {
      // Create/open a cache.
      const cache = await caches.open("downloads");
      // Get all the records.
      const records = await bgFetch.matchAll();
      // Copy each request/response across.
      const promises = records.map(async (record) => {
        const response = await record.responseReady;
        await cache.put(record.request, response);
      });

      // Wait for the copying to complete.
      await Promise.all(promises);

      // Update the progress notification.
      event.updateUI({ title: "Episode 5 ready to listen!" });
    })(),
  );
});

规范

规范
后台获取
# background-fetch-update-ui-event

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。