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

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

โมดูล 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.
}

ประเภท

CacheableResponse

คลาสนี้ช่วยให้คุณตั้งค่ากฎที่กำหนดรหัสสถานะและ/หรือส่วนหัวที่ต้องแสดงเพื่อให้ Response มีสถานะแคชได้

พร็อพเพอร์ตี้

  • เครื่องมือสร้าง

    void

    หากต้องการสร้างอินสแตนซ์ CacheableResponse ใหม่ คุณต้องระบุพร็อพเพอร์ตี้ config อย่างน้อย 1 รายการ

    หากระบุทั้ง statuses และ headers แล้ว เงื่อนไขทั้ง 2 รายการจะต้องเป็นไปตาม Response จึงจะถือว่าแคชได้

    ฟังก์ชัน constructor มีลักษณะดังนี้ 

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

  • isResponseCacheable

    void

    ตรวจสอบการตอบกลับเพื่อดูว่าระบบแคชได้ไหม ขึ้นอยู่กับการกำหนดค่าของออบเจ็กต์นี้

    ฟังก์ชัน isResponseCacheable มีลักษณะดังนี้ 

    (response: Response) => {...}

    • การตอบกลับ

      คำตอบ

      การตอบกลับที่กำลังตรวจสอบ ความสามารถในการแคช

    • returns

      boolean

      true หาก Response สามารถแคชได้ และ false ในกรณีอื่นๆ

CacheableResponseOptions

พร็อพเพอร์ตี้

  • headers

    ออบเจ็กต์ ไม่บังคับ

  • สถานะ

    number[] ไม่บังคับ

CacheableResponsePlugin

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

พร็อพเพอร์ตี้

  • เครื่องมือสร้าง

    void

    หากต้องการสร้างอินสแตนซ์ CacheableResponsePlugin ใหม่ คุณต้องระบุพร็อพเพอร์ตี้ config อย่างน้อย 1 พร็อพเพอร์ตี้

    หากระบุทั้ง statuses และ headers แล้ว เงื่อนไขทั้ง 2 รายการจะต้องเป็นไปตาม Response จึงจะถือว่าแคชได้

    ฟังก์ชัน constructor มีลักษณะดังนี้ 

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