Nếu sử dụng Cache Storage API (API Bộ nhớ bộ nhớ đệm) trong trình chạy dịch vụ hoặc ngay trong các ứng dụng web thông qua window.caches, thì xin chia sẻ với bạn một tin vui: kể từ Chrome 54, toàn bộ CacheQueryOptions sẽ được hỗ trợ, giúp bạn dễ dàng tìm thấy các phản hồi đã lưu vào bộ nhớ đệm mà mình cần.
Có những lựa chọn nào?
Bạn có thể đặt các tuỳ chọn sau trong bất kỳ lệnh gọi nào đến CacheStorage.match() hoặc Cache.match(). Khi không được đặt, tất cả các tuỳ chọn mặc định sẽ là false (hoặc undefined đối với cacheName). Bạn có thể sử dụng nhiều tuỳ chọn trong một lệnh gọi đến match().
ignoreSearch
Thao tác này sẽ hướng dẫn thuật toán so khớp bỏ qua phần tìm kiếm của một URL, còn được gọi là tham số truy vấn URL. Điều này có thể hữu ích khi bạn có URL nguồn chứa tham số truy vấn được sử dụng, chẳng hạn như theo dõi phân tích, nhưng không quan trọng trong việc xác định duy nhất một tài nguyên trong bộ nhớ đệm. Ví dụ: nhiều người đã trở thành con mồi của dịch vụ "gotcha" sau đây:
self.addEventListener('install', event => {
event.waitUntil(
caches.open('my-cache')
.then(cache => cache.add('index.html'))
);
});
self.addEventListener('fetch', event => {
// Make sure this is a navigation request before responding.
if (event.request.mode === 'navigation') {
event.respondWith(
caches.match(event.request) || fetch(event.request)
);
}
});
Loại mã này hoạt động như dự kiến khi người dùng truy cập trực tiếp vào index.html. Tuy nhiên, nếu ứng dụng web của bạn sử dụng nhà cung cấp phân tích để theo dõi đường liên kết đến và người dùng chuyển đến index.html?utm_source=some-referral thì sao? Theo mặc định, việc truyền index.html?utm_source=some-referral đến caches.match() sẽ không trả về mục nhập cho index.html. Tuy nhiên, nếu đặt ignoreSearch thành true, bạn có thể truy xuất phản hồi đã lưu vào bộ nhớ đệm mà bạn mong muốn, bất kể bạn đặt tham số truy vấn nào:
caches.match(event.request, {ignoreSearch: true})
cacheName
cacheName rất hữu ích khi bạn có nhiều bộ nhớ đệm và muốn một phản hồi được lưu trữ trong một bộ nhớ đệm cụ thể. Việc sử dụng công cụ này có thể giúp truy vấn của bạn hiệu quả hơn (vì trình duyệt chỉ phải kiểm tra bên trong một bộ nhớ đệm, thay vì tất cả các bộ nhớ đệm) và cho phép bạn truy xuất phản hồi cụ thể cho một URL nhất định khi nhiều bộ nhớ đệm có thể lấy URL đó làm khoá. cacheName chỉ có hiệu lực khi được dùng với CacheStorage.match(), chứ không phải Cache.match(), vì Cache.match() vốn đã hoạt động trên một dữ liệu duy nhất, có tên là đã lưu vào bộ nhớ đệm.
// The following are functionally equivalent:
caches.open('my-cache')
.then(cache => cache.match('index.html'));
// or...
caches.match('index.html', {cacheName: 'my-cache'});
ignoreMethod và ignoreVary
ignoreMethod và ignoreVary có ít đặc điểm hơn ignoreSearch và cacheName một chút, nhưng chúng phục vụ các mục đích cụ thể.
ignoreMethod cho phép bạn truyền vào một đối tượng Request có bất kỳ method (POST, PUT, v.v.) nào đó làm tham số đầu tiên đến match(). Thông thường, chỉ cho phép yêu cầu GET hoặc HEAD.
// In a more realistic scenario, postRequest might come from
// the request property of a FetchEvent.
const postRequest = new Request('index.html', {method: 'post'});
// This will never match anything.
caches.match(postRequest);
// This will match index.html in any cache.
caches.match(postRequest, {ignoreMethod: true});
Nếu bạn đặt thành true, ignoreVary có nghĩa là quá trình tra cứu bộ nhớ đệm sẽ được thực hiện mà không liên quan đến tiêu đề Vary nào được đặt trong các phản hồi đã lưu vào bộ nhớ đệm. Nếu biết rằng mình hiện không xử lý các phản hồi được lưu vào bộ nhớ đệm sử dụng tiêu đề Vary, thì bạn không cần phải lo lắng về việc đặt tuỳ chọn này.
Hỗ trợ trình duyệt
CacheQueryOptions chỉ liên quan trong các trình duyệt hỗ trợ API Bộ nhớ đệm. Ngoài các trình duyệt dựa trên Chrome và Chromium, trình duyệt này hiện chỉ giới hạn ở Firefox, vốn đã hỗ trợ CacheQueryOptions.
Các nhà phát triển muốn sử dụng CacheQueryOptions trong các phiên bản Chrome trước phiên bản 54 có thể sử dụng polyfill (một tệp polyfill) được cung cấp bởi Arthur Stolyar.