Cache: phương thức match()

Cú pháp

match(request)
match(request, options)

Tham số

request

Request mà bạn đang cố tìm phản hồi trong Cache. Đây có thể là một đối tượng Request hoặc một chuỗi URL.

options Optional

Một đối tượng đặt các tùy chọn cho thao tác match. Các tùy chọn có sẵn là:

ignoreSearch

Một giá trị boolean chỉ định xem có nên bỏ qua chuỗi truy vấn trong URL hay không. Ví dụ: nếu đặt thành true, phần ?value=bar của https://example.com/?value=bar sẽ bị bỏ qua khi thực hiện so khớp. Giá trị mặc định là false.

ignoreMethod

Một giá trị boolean, khi đặt thành true, ngăn các thao tác so khớp xác thực phương thức Request http (thường chỉ GET và HEAD được cho phép). Giá trị mặc định là false.

ignoreVary

Một giá trị boolean, khi đặt thành true, yêu cầu thao tác so khớp không thực hiện so khớp tiêu đề VARY — tức nếu URL khớp bạn sẽ nhận được kết quả bất kể đối tượng Response có tiêu đề VARY hay không. Giá trị mặc định là false.

Giá trị trả về

Một Promise phân giải thành Response đầu tiên khớp với yêu cầu hoặc thành undefined nếu không tìm thấy kết quả khớp.

Ví dụ

Ví dụ này lấy từ ví dụ trang offline tùy biến (live demo). Nó dùng bộ nhớ đệm để cung cấp dữ liệu đã chọn khi một yêu cầu thất bại. Mệnh đề catch() được kích hoạt khi lời gọi fetch() ném ra một ngoại lệ. Bên trong mệnh đề catch(), match() được dùng để trả về phản hồi đúng.

Trong ví dụ này, chỉ các tài liệu HTML truy xuất bằng động từ HTTP GET mới được lưu đệm. Nếu điều kiện if () sai, thì trình xử lý fetch này sẽ không chặn yêu cầu. Nếu có bất kỳ trình xử lý fetch nào khác được đăng ký, chúng sẽ có cơ hội gọi event.respondWith(). Nếu không có trình xử lý fetch nào gọi event.respondWith(), yêu cầu sẽ được trình duyệt xử lý như thể không có sự tham gia của service worker. Nếu fetch() trả về một phản hồi HTTP hợp lệ với mã phản hồi trong khoảng 4xx hoặc 5xx, thì catch() sẽ KHÔNG được gọi.

self.addEventListener("fetch", (event) => {
  // Ta chỉ muốn gọi event.respondWith() nếu đây là yêu cầu GET cho tài liệu HTML.
  if (
    event.request.method === "GET" &&
    event.request.headers.get("accept").includes("text/html")
  ) {
    console.log("Handling fetch event for", event.request.url);
    event.respondWith(
      fetch(event.request).catch((e) => {
        console.error("Fetch failed; returning offline page instead.", e);
        return caches
          .open(OFFLINE_CACHE)
          .then((cache) => cache.match(OFFLINE_URL));
      }),
    );
  }
});

Thông số kỹ thuật

Khả năng tương thích với trình duyệt

Xem thêm

• Sử dụng Service Workers
• Cache
• Window.caches và WorkerGlobalScope.caches