ServiceWorkerGlobalScope: sự kiện backgroundfetchclick
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.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is only available in Service Workers.
Sự kiện backgroundfetchclick của giao diện ServiceWorkerGlobalScope được kích hoạt khi người dùng nhấp vào UI mà trình duyệt cung cấp để hiển thị cho người dùng tiến trình của thao tác background fetch.
Sự kiện này không thể hủy và không nổi bọt.
Cú pháp
Sử dụng tên sự kiện trong các phương thức như addEventListener(), hoặc thiết lập một thuộc tính trình xử lý sự kiện.
addEventListener("backgroundfetchclick", (event) => { })
onbackgroundfetchclick = (event) => { }
Loại sự kiện
Một BackgroundFetchEvent.
Thuộc tính sự kiện
Kế thừa các thuộc tính từ giao diện cha, ExtendableEvent.
BackgroundFetchEvent.registration-
Trả về
BackgroundFetchRegistrationcó hộp thoại tiến trình mà người dùng đã nhấp vào.
Mô tả
Khi một thao tác background fetch bắt đầu, trình duyệt hiển thị một phần tử UI cho người dùng để cho biết tiến trình của thao tác. Nếu người dùng nhấp vào phần tử này, trình duyệt khởi động service worker nếu cần thiết, và kích hoạt sự kiện backgroundfetchclick trong phạm vi toàn cục của service worker.
Một tác vụ phổ biến cho trình xử lý trong tình huống này là mở một cửa sổ cung cấp cho người dùng thêm chi tiết về thao tác fetch.
Ví dụ
Mở cửa sổ với thêm chi tiết
Trình xử lý sự kiện này sử dụng thuộc tính toàn cục clients để mở một cửa sổ cung cấp cho người dùng thêm chi tiết về fetch. Nó mở một cửa sổ khác tùy thuộc vào việc fetch đã hoàn thành hay chưa.
addEventListener("backgroundfetchclick", (event) => {
const registration = event.registration;
if (registration.result === "success") {
clients.openWindow("/play-movie");
} else {
clients.openWindow("/movie-download-progress");
}
});
Đặc tả kỹ thuật
| Specification |
|---|
| Background Fetch # dom-serviceworkerglobalscope-onbackgroundfetchclick |