FetchEvent: thuộc tính preloadResponse
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2022.
Note: This feature is only available in Service Workers.
Thuộc tính chỉ đọc preloadResponse của giao diện FetchEvent trả về một Promise giải quyết thành Response tải trước điều hướng nếu tải trước điều hướng được kích hoạt, hoặc undefined nếu không.
Tải trước điều hướng được kích hoạt nếu tải trước điều hướng được bật, yêu cầu là yêu cầu GET, và yêu cầu là yêu cầu điều hướng (được trình duyệt tạo khi tải trang và iframe).
Một service worker có thể chờ promise này trong trình xử lý sự kiện fetch để theo dõi việc hoàn thành yêu cầu tìm nạp được thực hiện trong quá trình khởi động service worker.
Giá trị
Ví dụ
Đoạn mã này từ Tăng tốc Service Worker với Navigation Preloads.
Trình xử lý sự kiện onfetch lắng nghe sự kiện fetch.
Khi được kích hoạt, trình xử lý gọi FetchEvent.respondWith() để truyền promise trở lại trang được kiểm soát.
Promise này sẽ giải quyết với tài nguyên được yêu cầu.
Nếu có yêu cầu URL khớp trong đối tượng Cache, mã trả về promise để tìm nạp phản hồi từ bộ nhớ đệm.
Nếu không tìm thấy kết quả khớp trong bộ nhớ đệm, mã trả về promise trong preloadResponse.
Nếu không có phản hồi từ bộ nhớ đệm hoặc tải trước khớp, mã tìm nạp phản hồi từ mạng và trả về promise liên quan.
addEventListener("fetch", (event) => {
event.respondWith(
(async () => {
// Phản hồi từ bộ nhớ đệm nếu có thể
const cachedResponse = await caches.match(event.request);
if (cachedResponse) return cachedResponse;
// Dùng phản hồi tải trước nếu có
const response = await event.preloadResponse;
if (response) return response;
// Thử mạng nếu không có.
return fetch(event.request);
})(),
);
});
Thông số kỹ thuật
| Specification |
|---|
| Service Workers Nightly # fetch-event-preloadresponse |