Khi lưu các nội dung vào bộ nhớ đệm trong thời gian chạy, không có một quy tắc nào là phù hợp cho mọi trường hợp phản hồi đã cho là "hợp lệ" và đủ điều kiện để lưu cũng như sử dụng lại.
Mô-đun workbox-cacheable-response
cung cấp cách thức tiêu chuẩn để xác định
liệu phản hồi có được lưu vào bộ nhớ đệm dựa trên
mã trạng thái dạng số,
có sự hiện diện của
tiêu đề
với một giá trị cụ thể hoặc kết hợp cả hai.
Lưu vào bộ nhớ đệm dựa trên mã trạng thái
Bạn có thể thiết lập một chiến lược Hộp công việc để cân nhắc
một tập hợp các mã trạng thái đủ điều kiện để lưu vào bộ nhớ đệm bằng cách thêm
Thực thể CacheableResponsePlugin
cho tham số plugins
của một chiến lược:
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
registerRoute(
({url}) =>
url.origin === 'https://third-party.example.com' &&
url.pathname.startsWith('/images/'),
new CacheFirst({
cacheName: 'image-cache',
plugins: [
new CacheableResponsePlugin({
statuses: [0, 200],
}),
],
})
);
Cấu hình này cho Workbox biết rằng khi xử lý các phản hồi cho các yêu cầu đối với https://third-party.example.com/images/
, hãy lưu vào bộ nhớ đệm mọi yêu cầu có mã trạng thái là 0
hoặc 200
.
Lưu vào bộ nhớ đệm dựa trên tiêu đề
Bạn có thể định cấu hình chiến lược Workbox để kiểm tra xem có các giá trị tiêu đề cụ thể làm tiêu chí để thêm vào bộ nhớ đệm hay không bằng cách đặt đối tượng headers
khi tạo trình bổ trợ:
import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
registerRoute(
({url}) => url.pathname.startsWith('/path/to/api/'),
new StaleWhileRevalidate({
cacheName: 'api-cache',
plugins: [
new CacheableResponsePlugin({
headers: {
'X-Is-Cacheable': 'true',
},
}),
],
})
);
Khi xử lý phản hồi cho các URL yêu cầu chứa /path/to/api/
, hãy xem tiêu đề có tên X-Is-Cacheable
(mà máy chủ sẽ thêm vào phản hồi). Nếu tiêu đề đó có và được đặt thành giá trị "true", thì phản hồi có thể được lưu vào bộ nhớ đệm.
Nếu chỉ định nhiều tiêu đề, thì chỉ một trong các tiêu đề cần được chỉ định khớp với các giá trị được liên kết.
Lưu vào bộ nhớ đệm dựa trên tiêu đề và mã trạng thái
Bạn có thể kết hợp cả cấu hình trạng thái và tiêu đề. Cả hai điều kiện này đều phải được đáp ứng để một phản hồi được coi là có thể lưu vào bộ nhớ đệm; nói cách khác, phản hồi phải có một trong các mã trạng thái đã định cấu hình, và phản hồi phải có ít nhất một trong các tiêu đề được cung cấp.
import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
registerRoute(
({url}) => url.pathname.startsWith('/path/to/api/'),
new StaleWhileRevalidate({
cacheName: 'api-cache',
plugins: [
new CacheableResponsePlugin({
statuses: [200, 404],
headers: {
'X-Is-Cacheable': 'true',
},
}),
],
})
);
Giá trị mặc định là gì?
Nếu bạn sử dụng một trong các chiến lược tích hợp sẵn của Workbox mà không
định cấu hình cacheableResponse.CacheableResponsePlugin
, thì tiêu chí mặc định sau đây là
được dùng để xác định xem một phản hồi nhận được từ mạng có cần
được lưu vào bộ nhớ đệm:
- cũTrong khiXác thực lại và mạngFirst: Các câu trả lời có trạng thái là
0
(tức là phản hồi mờ) hoặc200
đều được coi là có thể lưu vào bộ nhớ đệm. - cacheFirst: Các phản hồi có trạng thái
200
được coi là có thể lưu vào bộ nhớ đệm.
Theo mặc định, tiêu đề phản hồi không được dùng để xác định khả năng lưu vào bộ nhớ đệm.
Tại sao có nhiều giá trị mặc định?
Các giá trị mặc định thay đổi tuỳ thuộc vào việc các phản hồi có trạng thái là 0
(tức là phản hồi mờ) có được lưu vào bộ nhớ đệm hay không. Do bản chất "hộp đen" của các phản hồi mờ, worker không thể biết liệu phản hồi có hợp lệ hay không hoặc liệu phản hồi có phản ánh phản hồi lỗi được trả về từ máy chủ nhiều nguồn gốc hay không.
Đối với các chiến lược bao gồm một số phương thức cập nhật phản hồi được lưu vào bộ nhớ đệm, như staleWhileRevalidate và networkFirst, nguy cơ lưu phản hồi lỗi tạm thời vào bộ nhớ đệm sẽ được giảm thiểu do lần tiếp theo cập nhật bộ nhớ đệm, hy vọng sẽ sử dụng được phản hồi thích hợp và thành công.
Đối với các chiến lược liên quan đến việc lưu phản hồi đầu tiên nhận được vào bộ nhớ đệm và sử dụng lại phản hồi đã lưu vào bộ nhớ đệm đó vô thời hạn, hậu quả của lỗi tạm thời được lưu vào bộ nhớ đệm và sử dụng lại sẽ nghiêm trọng hơn. Để đảm bảo an toàn theo mặc định, cacheFirst sẽ từ chối lưu phản hồi trừ phi phản hồi đó có mã trạng thái là 200
.
Cách sử dụng nâng cao
Nếu muốn sử dụng cùng một logic lưu vào bộ nhớ đệm bên ngoài chiến lược Hộp làm việc, bạn
có thể trực tiếp sử dụng lớp CacheableResponse
.
import {CacheableResponse} from 'workbox-cacheable-response';
const cacheable = new CacheableResponse({
statuses: [0, 200],
headers: {
'X-Is-Cacheable': 'true',
},
});
const response = await fetch('/path/to/api');
if (cacheable.isResponseCacheable(response)) {
const cache = await caches.open('api-cache');
cache.put(response.url, response);
} else {
// Do something when the response can't be cached.
}
Loại
CacheableResponse
Lớp này cho phép bạn thiết lập các quy tắc xác định mã trạng thái và/hoặc tiêu đề cần có để Response
được coi là có thể lưu vào bộ nhớ đệm.
Thuộc tính
-
hàm khởi tạo
void
Để tạo một thực thể CacheableResponse mới, bạn phải cung cấp ít nhất một trong các thuộc tính
config
.Nếu bạn chỉ định cả
statuses
vàheaders
, thì cả hai điều kiện đều phải được đáp ứng đểResponse
được coi là có thể lưu vào bộ nhớ đệm.Hàm
constructor
có dạng như sau:(config?: CacheableResponseOptions) => {...}
-
cấu hình
CacheableResponseOptions không bắt buộc
-
returns
-
-
isResponseCacheable
void
Kiểm tra phản hồi để xem phản hồi đó có thể lưu vào bộ nhớ đệm hay không, dựa vào phản hồi này cấu hình của đối tượng.
Hàm
isResponseCacheable
có dạng như sau:(response: Response) => {...}
-
phản hồi
Phản hồi
Phản hồi có khả năng lưu vào bộ nhớ đệm đang được kiểm tra.
-
returns
boolean
true
nếuResponse
có thể lưu vào bộ nhớ đệm vàfalse
nếu không.
-
CacheableResponseOptions
Thuộc tính
-
tiêu đề
đối tượng không bắt buộc
-
trạng thái
number[] không bắt buộc
CacheableResponsePlugin
Một lớp triển khai phương thức gọi lại trong vòng đời cacheWillUpdate
. Điều này giúp bạn dễ dàng thêm các bước kiểm tra khả năng lưu vào bộ nhớ đệm vào các yêu cầu được thực hiện thông qua các chiến lược tích hợp sẵn của Workbox.
Thuộc tính
-
hàm khởi tạo
void
Để tạo một phiên bản CacheableResponsePlugin mới, bạn phải cung cấp tại ít nhất một trong các thuộc tính
config
.Nếu bạn chỉ định cả
statuses
vàheaders
thì cả hai điều kiện đều phải được đáp ứng đểResponse
được xem là có thể lưu vào bộ nhớ đệm.Hàm
constructor
có dạng như sau:(config: CacheableResponseOptions) => {...}
-
config
-
returns
-