Cache: phương thức put()
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.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
Phương thức put() của giao diện
Cache cho phép thêm các cặp khóa/giá trị vào đối tượng
Cache hiện tại.
Thông thường, bạn chỉ muốn fetch()
một hoặc nhiều yêu cầu, sau đó thêm kết quả trực tiếp vào bộ nhớ đệm. Trong những trường hợp
như vậy, bạn nên dùng
Cache.add()/Cache.addAll(), vì
đây là các hàm viết tắt cho một hoặc nhiều thao tác này.
fetch(url).then((response) => {
if (!response.ok) {
throw new TypeError("Bad response status");
}
return cache.put(url, response);
});
Note:
put() sẽ ghi đè bất kỳ cặp khóa/giá trị nào trước đó đã lưu trong bộ nhớ đệm mà khớp với yêu cầu.
Note:
Cache.add/Cache.addAll không
lưu đệm các phản hồi có giá trị Response.status không nằm trong khoảng 200,
trong khi Cache.put cho phép bạn lưu bất kỳ cặp yêu cầu/phản hồi nào. Do đó,
Cache.add/Cache.addAll không thể dùng để lưu
các phản hồi opaque, trong khi Cache.put có thể.
Cú pháp
put(request, response)
Tham số
Giá trị trả về
Một Promise phân giải thành undefined.
Ngoại lệ
TypeError-
Được trả về nếu lược đồ URL không phải là
httphoặchttps.
Ví dụ
Ví dụ này lấy từ ví dụ simple-service-worker của MDN (xem simple-service-worker chạy trực tiếp).
Ở đây chúng ta chờ một FetchEvent xảy ra. Chúng ta tạo một phản hồi tùy biến
như sau:
- Kiểm tra xem có tìm thấy mục khớp với yêu cầu trong
CacheStoragebằngCacheStorage.match()hay không. Nếu có, phục vụ mục đó. - Nếu không, mở bộ nhớ đệm
v1bằngopen(), đặt yêu cầu mạng mặc định vào bộ nhớ đệm bằngCache.put()và trả về một bản sao của yêu cầu mạng mặc định bằngreturn response.clone(). Clone là cần thiết vìput()tiêu thụ phần thân phản hồi. - Nếu việc này thất bại (ví dụ do mạng bị ngắt), trả về một phản hồi dự phòng.
let response;
const cachedResponse = caches
.match(event.request)
.then((r) => (r !== undefined ? r : fetch(event.request)))
.then((r) => {
response = r;
caches.open("v1").then((cache) => cache.put(event.request, response));
return response.clone();
})
.catch(() => caches.match("/gallery/myLittleVader.jpg"));
Thông số kỹ thuật
| Specification |
|---|
| Service Workers Nightly # cache-put |