CacheQueryOptions đã được đưa vào Chrome 54

Jeff Posnick

Nếu bạn sử dụng Cache Storage API (API bộ nhớ đệm) trong một worker dịch vụ hoặc trực tiếp từ các ứng dụng web thông qua window.caches, thì có một số tin vui: kể từ Chrome 54, bộ CacheQueryOptions đầy đủ sẽ được hỗ trợ, giúp bạn dễ dàng tìm thấy các phản hồi được lưu vào bộ nhớ đệm mà bạn đang tìm kiếm.

Có những lựa chọn nào?

Bạn có thể thiết lập các tuỳ chọn sau trong bất kỳ lệnh gọi nào đến CacheStorage.match() hoặc Cache.match(). Khi bạn không đặt chính sách này, tất cả các giá trị này đều được đặt mặc định thành false (hoặc undefined đối với cacheName) và 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 URL, còn gọi là tham số truy vấn URL. Điều này có thể hữu ích khi bạn có một URL nguồn chứa các tham số truy vấn được dùng cho mục đích theo dõi số liệu phân tích, nhưng không quan trọng về mặt 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 cho "gotcha" của trình chạy dịch vụ 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 chuyển thẳng đến index.html. Tuy nhiên, nếu ứng dụng web của bạn sử dụng một nhà cung cấp dịch vụ phân tích để theo dõi các đườ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 đợi bất kể tham số truy vấn nào được đặt:

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 phản hồi được lưu trữ trong một bộ nhớ đệm cụ thể. Việc sử dụng bộ nhớ đệm 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ả bộ nhớ đệm) và cho phép bạn truy xuất một phản hồi cụ thể cho một URL nhất định khi nhiều bộ nhớ đệm có thể có URL đó làm khoá. cacheName chỉ có hiệu quả khi được sử dụng với CacheStorage.match(), chứ không phải Cache.match(), vì Cache.match() đã hoạt động trên một bộ nhớ đệm có tên duy nhất.

// 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ó phần chuyên biệt hơn ignoreSearch và cacheName, 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 nào (POST, PUT, v.v.) làm tham số đầu tiên cho match(). Thông thường, chỉ cho phép các 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 được đặt thành true, ignoreVary có nghĩa là các lượt tra cứu bộ nhớ đệm sẽ được thực hiện mà không quan tâm đến bất kỳ tiêu đề Vary nào được đặt trong các phản hồi được lưu vào bộ nhớ đệm. Nếu biết rằng bạ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 thiết lập tuỳ chọn này.

Hỗ trợ trình duyệt

CacheQueryOptions chỉ phù hợp trong các trình duyệt hỗ trợ API Lưu trữ bộ nhớ đệm. Ngoài Chrome và các trình duyệt dựa trên Chromium, tính năng này hiện chỉ giới hạn ở Firefox, vốn đã hỗ trợ sẵn CacheQueryOptions.

Những 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 một polyfill, do Arthur Stolyar cung cấp.