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

Khi lưu tài sản vào bộ nhớ đệm trong thời gian chạy, không có quy tắc chung nào về việc liệu một phản hồi nhất định có "hợp lệ" và đủ điều kiện để được lưu và sử dụng lại hay không.

Mô-đun workbox-cacheable-response cung cấp cách thức tiêu chuẩn để xác định xem một phản hồi nên được lưu vào bộ nhớ đệm dựa trên mã trạng thái dạng số, sự hiện diện của tiêu đề với một giá trị cụ thể hay 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ể định cấu hình chiến lược Hộp công việc để coi một nhóm mã trạng thái là đủ điều kiện để lưu vào bộ nhớ đệm bằng cách thêm thực thể CacheableResponsePlugin vào tham số plugins của 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ý phản hồi cho các yêu cầu dựa trên https://third-party.example.com/images/, hãy lưu mọi yêu cầu có mã trạng thái là 0 hoặc 200 vào bộ nhớ đệm.

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 Hộp công việc để kiểm tra sự hiện diện của các giá trị tiêu đề cụ thể làm tiêu chí để thêm vào bộ nhớ đệm 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 URL yêu cầu chứa /path/to/api/, hãy xem tiêu đề có tên X-Is-Cacheable (sẽ được máy chủ thêm vào phản hồi). Nếu tiêu đề đó xuất hiện và nếu tiêu đề được đặt thành giá trị "true", thì phản hồi có thể được lưu vào bộ nhớ đệm.

Nếu bạn chỉ định nhiều tiêu đề, thì chỉ cần một trong số tiêu đề khớp với các giá trị 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ả trạng thái và cấu hình tiêu đề. Cả hai điều kiện này đều phải được đáp ứng để đượ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ải có ít nhất một trong các tiêu đề đã 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',
        },
      }),
    ],
  })
);

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 của Workbox mà không định cấu hình rõ ràng cho cacheableResponse.CacheableResponsePlugin, thì các tiêu chí mặc định sau đây sẽ được dùng để xác định xem phản hồi nhận được từ mạng có được lưu vào bộ nhớ đệm hay không:

  • cũ whileRevalidate và networkFirst: Phản hồi có trạng thái 0 (tức là phản hồi mờ) hoặc 200 được coi là có thể lưu vào bộ nhớ đệm.
  • cacheFirst: Những 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, các 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ó các chế độ mặc định khác nhau?

Các giá trị mặc định khác nhau tuỳ thuộc vào việc phản hồi có trạng thái 0 (tức là phản hồi mờ) có được lưu vào bộ nhớ đệm hay không. Do tính chất "hộp đen" của phản hồi mờ, trình chạy dịch vụ 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 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 tiện để cập nhật phản hồi đã lưu vào bộ nhớ đệm, chẳng hạn như lỗi thời gian Trong

Đối với các chiến lược liên quan đến việc lưu phản hồi đầu tiên vào bộ nhớ đệm và sử dụng lại vô thời hạn phản hồi đã lưu vào bộ nhớ đệm, hậu quả của một lỗi tạm thời khi được lưu vào bộ nhớ đệm và sử dụng lại sẽ nghiêm trọng hơn. Để báo cáo lỗi an toàn theo mặc định, cacheFirst sẽ từ chối lưu phản hồi trừ khi 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 Workbox, bạn có thể sử dụng trực tiếp 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 đề nào cần phải 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 này phải được đáp ứng để Response được coi là có thể lưu vào bộ nhớ đệm.

    Hàm constructor sẽ có dạng như sau: 

    (config?: CacheableResponseOptions) => {...}

  • isResponseCacheable

    void

    Kiểm tra một phản hồi để xem liệu nó có thể lưu vào bộ nhớ đệm hay không, dựa trên cấu hình của đối tượng này.

    Hàm isResponseCacheable sẽ 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 bộ nhớ đệm đang được kiểm tra.

    • giá trị trả về

      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

  • headers

    đố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. Nhờ vậy, bạn có thể dễ dàng thêm các bước kiểm tra khả năng lưu vào bộ nhớ đệm cho các yêu cầu được đưa ra thông qua các chiến lược tích hợp của Workbox.

Thuộc tính

  • hàm khởi tạo

    void

    Để tạo một thực thể CacheableResponsePlugin 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 này phải được đáp ứng để Response được coi là có thể lưu vào bộ nhớ đệm.

    Hàm constructor sẽ có dạng như sau: 

    (config: CacheableResponseOptions) => {...}