ServiceWorkerGlobalScope：backgroundfetchsuccess 事件

可用性有限

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

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

安全上下文：此功能仅在安全上下文（HTTPS）中可用，在某些或所有支持的浏览器中。

注意：此功能仅在Service Workers中可用。

backgroundfetchsuccess 事件是 ServiceWorkerGlobalScope 接口的一个事件，当后台获取操作成功完成时触发：也就是说，当获取中的所有网络请求都成功完成时。

此事件不可取消，也不会冒泡。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

addEventListener("backgroundfetchsuccess", (event) => {});

onbackgroundfetchsuccess = (event) => {};

事件类型

一个BackgroundFetchUpdateUIEvent。

事件属性

继承自其父级 BackgroundFetchEvent 的属性。

BackgroundFetchUpdateUIEvent.updateUI(): 更新浏览器显示以显示获取操作进度的元素的 UI。

描述

当后台获取操作成功完成（意味着所有单个网络请求都已成功完成）时，浏览器会根据需要启动 Service Worker，并在 Service Worker 的全局范围内触发 backgroundfetchsuccess 事件。

在此事件的处理程序中，Service Worker 可以检索并存储响应（例如，使用 Cache API）。要访问响应数据，Service Worker 使用事件的 registration 属性。

在后台获取 API 中，浏览器会向用户显示一个 UI 元素以指示操作的进度。在 backgroundfetchsuccess 处理程序中，Service Worker 可以更新该 UI 以显示操作已成功完成。为此，处理程序调用事件的 updateUI() 方法，并传入新的标题和/或图标。

示例

存储响应和更新 UI

此事件处理程序将所有响应存储在缓存中，并更新 UI。

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

  event.waitUntil(async () => {
    // Open a cache
    const cache = await caches.open("movies");
    // Get all the records
    const records = await registration.matchAll();
    // Cache all responses
    const cachePromises = records.map(async (record) => {
      const response = await record.responseReady;
      await cache.put(record.request, response);
    });

    // Wait for caching to finish
    await Promise.all(cachePromises);

    // Update the browser's UI
    event.updateUI({ title: "Move download complete" });
  });
});

规范

规范
后台获取 # dom-serviceworkerglobalscope-onbackgroundfetchsuccess

浏览器兼容性

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

另请参阅

后台获取 API