ExtendableEvent
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.
Note: This feature is only available in Service Workers.
Giao diện ExtendableEvent mở rộng vòng đời của các sự kiện install và activate được phát ra trên phạm vi toàn cục như một phần của vòng đời service worker. Điều này đảm bảo rằng các sự kiện chức năng (như FetchEvent) không được phát ra cho đến khi nó nâng cấp lược đồ cơ sở dữ liệu và xóa các mục nhập bộ nhớ đệm lỗi thời.
Nếu waitUntil() được gọi bên ngoài trình xử lý ExtendableEvent, trình duyệt sẽ ném ra InvalidStateError; lưu ý rằng nhiều lần gọi sẽ xếp chồng lên nhau và các promise kết quả sẽ được thêm vào danh sách extend lifetime promises.
Giao diện này kế thừa từ giao diện Event.
Note:
Giao diện này chỉ khả dụng khi phạm vi toàn cục là ServiceWorkerGlobalScope. Nó không khả dụng khi là Window, hoặc phạm vi của một loại worker khác.
Hàm khởi tạo
ExtendableEvent()-
Tạo một đối tượng
ExtendableEventmới.
Thuộc tính phiên bản
Không thực hiện bất kỳ thuộc tính cụ thể nào, nhưng kế thừa các thuộc tính từ đối tượng cha, Event.
Phương thức phiên bản
Kế thừa các phương thức từ đối tượng cha, Event.
ExtendableEvent.waitUntil()-
Mở rộng vòng đời của sự kiện. Nó được thiết kế để được gọi trong trình xử lý sự kiện
installcho worker đang cài đặt và trên trình xử lý sự kiệnactivatecho worker đang hoạt động.
Ví dụ
Đoạn code này lấy từ service worker prefetch sample. Code gọi ExtendableEvent.waitUntil() trong oninstall, trì hoãn việc coi worker đang cài đặt là đã cài đặt cho đến khi promise được truyền vào giải quyết thành công.
const CACHE_VERSION = 1;
const CURRENT_CACHES = {
prefetch: `prefetch-cache-v${CACHE_VERSION}`,
};
self.addEventListener("install", (event) => {
const urlsToPrefetch = [
"./static/pre_fetched.txt",
"./static/pre_fetched.html",
"https://www.chromium.org/_/rsrc/1302286216006/config/customLogo.gif",
];
console.log(
"Handling install event. Resources to pre-fetch:",
urlsToPrefetch,
);
event.waitUntil(
caches
.open(CURRENT_CACHES["prefetch"])
.then((cache) =>
cache.addAll(
urlsToPrefetch.map(
(urlToPrefetch) => new Request(urlToPrefetch, { mode: "no-cors" }),
),
),
)
.then(() => {
console.log("All resources have been fetched and cached.");
})
.catch((error) => {
console.error("Pre-fetching failed:", error);
}),
);
});
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Service Workers Nightly # extendableevent-interface |