phản hồi-có thể lưu vào bộ nhớ đệm

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ặc 200 đề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) => {...}

  • 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ếu Response 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) => {...}