การตอบกลับที่แคชได้สำหรับเวิร์กบ็อกซ์

เมื่อแคชเนื้อหาขณะรันไทม์ จะไม่มีกฎตายตัวว่าคำตอบที่ระบุคือ "ถูกต้อง" และมีสิทธิ์ได้รับการบันทึกและนำมาใช้ซ้ำหรือไม่

โมดูล workbox-cacheable-response เป็นวิธีมาตรฐานในการพิจารณาว่าควรแคชการตอบกลับตามรหัสสถานะตัวเลขหรือไม่ มีส่วนหัวที่มีค่าหนึ่งๆ หรือทั้ง 2 ค่ารวมกัน

การแคชตามรหัสสถานะ

คุณกำหนดค่ากลยุทธ์กล่องจดหมายเพื่อให้ชุดรหัสสถานะมีสิทธิ์แคชได้โดยการเพิ่มอินสแตนซ์ CacheableResponsePlugin ลงในพารามิเตอร์ plugins ของกลยุทธ์ ดังนี้

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],
      }),
    ],
  })
);

การกำหนดค่านี้จะบอกให้ Workbox ทราบว่าเมื่อประมวลผลการตอบกลับคำขอกับ https://third-party.example.com/images/ ให้แคชคำขอที่มีรหัสสถานะ 0 หรือ 200

การแคชตามส่วนหัว

คุณกำหนดค่ากลยุทธ์กล่องจดหมายเพื่อตรวจสอบว่ามีค่าส่วนหัวที่เจาะจงเป็นเกณฑ์ในการเพิ่มไปยังแคชได้โดยการตั้งค่าออบเจ็กต์ headers เมื่อสร้างปลั๊กอิน ดังนี้

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',
        },
      }),
    ],
  })
);

เมื่อประมวลผลการตอบกลับสำหรับ URL คำขอที่มี /path/to/api/ โปรดดูส่วนหัวชื่อ X-Is-Cacheable (ซึ่งเซิร์ฟเวอร์จะเพิ่มลงในการตอบกลับ) หากมีส่วนหัวอยู่และมีการตั้งค่าเป็นค่า "จริง" การตอบกลับก็จะแคชได้

หากมีการระบุส่วนหัวไว้หลายรายการ ส่วนหัวเพียง 1 รายการจะต้องตรงกับค่าที่เกี่ยวข้อง

การแคชตามส่วนหัวและรหัสสถานะ

คุณสามารถใช้ทั้งการกำหนดค่าสถานะและส่วนหัวร่วมกันได้ คำตอบนั้นจะต้องเป็นไปตามเงื่อนไขทั้ง 2 ข้อจึงจะถือว่าเป็นการตอบกลับที่แคชได้ กล่าวคือ การตอบกลับต้องมีรหัสสถานะที่กำหนดค่าอย่างใดอย่างหนึ่งและต้องมีส่วนหัวที่ระบุอย่างน้อย 1 รายการ

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',
        },
      }),
    ],
  })
);

ค่าเริ่มต้นคืออะไร

หากคุณใช้กลยุทธ์ในตัวของ Workbox โดยไม่ได้กำหนดค่า cacheableResponse.CacheableResponsePlugin อย่างชัดแจ้ง ระบบจะใช้เกณฑ์เริ่มต้นต่อไปนี้เพื่อพิจารณาว่าควรแคชการตอบกลับที่ได้รับจากเครือข่ายหรือไม่

• staleปรับการตั้งค่าและ networkFirst: การตอบกลับที่มีสถานะ 0 (เช่น การตอบกลับที่ไม่ชัดเจน) หรือ 200 จะถือว่าเป็นการแคชได้
• cacheFirst: การตอบกลับที่มีสถานะ 200 จะถือว่าเป็นแคชได้

โดยค่าเริ่มต้น ส่วนหัวการตอบกลับจะไม่ใช้เพื่อระบุความสามารถในการแคช

เพราะเหตุใดค่าเริ่มต้นจึงแตกต่างกัน

ค่าเริ่มต้นจะแตกต่างกันไปขึ้นอยู่กับว่าระบบจะแคชคำตอบที่มีสถานะ 0 (เช่น คำตอบที่ไม่ชัดเจน) หรือไม่ เนื่องจากลักษณะของการตอบกลับที่ทึบแสงเป็น "กล่องดำ" ทำให้โปรแกรมทำงานของบริการไม่สามารถรู้ว่าการตอบสนองถูกต้อง หรือว่าเป็นการตอบกลับข้อผิดพลาดที่แสดงผลจากเซิร์ฟเวอร์ข้ามต้นทางหรือไม่

สำหรับกลยุทธ์ที่มีวิธีการบางอย่างในการอัปเดตการตอบกลับที่แคชไว้ เช่น staleปรับการตั้งค่าและ networkFirst ความเสี่ยงของการแคชการตอบกลับข้อผิดพลาดชั่วคราวจะลดลงเนื่องจากการอัปเดตแคชในครั้งถัดไป หวังว่าจะใช้การตอบสนองที่เหมาะสมและประสบความสำเร็จ

สำหรับกลยุทธ์ที่เกี่ยวข้องกับการแคชคำตอบแรกที่ได้รับ และนำการตอบกลับที่แคชไว้มาใช้ซ้ำอย่างไม่มีกำหนด ผลกระทบจากข้อผิดพลาดชั่วคราวที่ถูกแคชและนำกลับมาใช้ซ้ำจะรุนแรงกว่า หากต้องการให้ผิดพลาดโดยค่าเริ่มต้น cacheFirst จะปฏิเสธการบันทึกการตอบกลับ เว้นแต่จะมีรหัสสถานะ 200

การใช้งานขั้นสูง

หากต้องการใช้ตรรกะการแคชแบบเดียวกันนอกกลยุทธ์ Workbox คุณจะใช้คลาส 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.
}