BackgroundFetchUpdateUIEvent
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Note: This feature is only available in Service Workers.
Giao diện BackgroundFetchUpdateUIEvent của Background Fetch API là kiểu sự kiện cho các sự kiện backgroundfetchsuccess và backgroundfetchfail, đồng thời cung cấp một phương thức để cập nhật tiêu đề và biểu tượng của ứng dụng nhằm thông báo cho người dùng về việc một thao tác tìm nạp nền thành công hay thất bại.
Constructor
BackgroundFetchUpdateUIEvent()Experimental-
Tạo một đối tượng
BackgroundFetchUIEventmới. Hàm tạo này thường không được dùng trực tiếp, vì trình duyệt tự tạo các đối tượng này cho các sự kiệnbackgroundfetchsuccessvàbackgroundfetchfail.
Thuộc tính thể hiện
Cũng kế thừa các thuộc tính từ cha của nó, BackgroundFetchEvent.
Phương thức thể hiện
Cũng kế thừa các phương thức từ cha của nó, BackgroundFetchEvent.
BackgroundFetchUpdateUIEvent.updateUI()Experimental-
Cập nhật tiêu đề và biểu tượng trong giao diện người dùng để hiển thị trạng thái của một thao tác tìm nạp nền. Được giải quyết bằng một
Promise.
Ví dụ
Trong ví dụ này, sự kiện backgroundfetchsuccess được lắng nghe, cho biết một thao tác tìm nạp đã hoàn tất thành công. Sau đó, phương thức updateUI() được gọi với một thông báo để cho người dùng biết tập mà họ tải xuống đã sẵn sàng.
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!" });
})(),
);
});
Thông số kỹ thuật
| Specification |
|---|
| Background Fetch # background-fetch-update-ui-event |