ServiceWorkerGlobalScope: backgroundfetchsuccess 事件
注意：此功能僅在 Service Workers 中可用。
ServiceWorkerGlobalScope 介面的 backgroundfetchsuccess 事件，在 後臺獲取 操作成功完成後觸發：也就是說，當獲取中的所有網路請求都成功完成後觸發。
此事件不可取消，也不會冒泡。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("backgroundfetchsuccess", (event) => { })
onbackgroundfetchsuccess = (event) => { }
事件型別
事件屬性
繼承其父級 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。
js
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" });
});
});
規範
| 規範 |
|---|
| Background Fetch # dom-serviceworkerglobalscope-onbackgroundfetchsuccess |
瀏覽器相容性
載入中…