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

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

โมดูล workbox-cacheable-response มอบวิธีมาตรฐานในการกำหนด ควรแคชการตอบกลับตาม รหัสสถานะตัวเลข การมีอยู่ของ ส่วนหัว ด้วยค่าเฉพาะ หรือทั้ง 2 อย่างรวมกัน

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

คุณสามารถกําหนดค่ากลยุทธ์ Workbox ให้พิจารณาชุดรหัสสถานะที่มีสิทธิ์แคชได้โดยเพิ่มอินสแตนซ์ 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

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

คุณสามารถกำหนดค่ากลยุทธ์ Workbox เพื่อเลือก เพื่อหาค่าส่วนหัวที่ระบุเป็นเกณฑ์ในการเพิ่มข้อมูล ลงในแคชโดยการตั้งค่าออบเจ็กต์ 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 (ซึ่งเซิร์ฟเวอร์จะเพิ่มลงในคำตอบ) หากมีส่วนหัวนั้นและมีการตั้งค่าเป็นค่า "true" ระบบจะแคชคำตอบได้

ถ้ามีการระบุส่วนหัวหลายรายการ จะต้องมีส่วนหัวเพียงรายการเดียวเท่านั้น ตรงกับค่าที่เชื่อมโยง

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

คุณสามารถใช้ทั้งสถานะและการกำหนดค่าส่วนหัวร่วมกันได้ เงื่อนไขทั้ง 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 เกณฑ์เริ่มต้นต่อไปนี้คือ ใช้เพื่อกำหนดว่าการตอบสนองที่ได้รับจากเครือข่ายควร ถูกแคช:

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

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

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

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

สำหรับกลยุทธ์ที่มีวิธีอัปเดตการตอบกลับที่แคชไว้ เช่น staleAtAtRecheckate และ 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ได้รับการพิจารณาว่าแคชได้

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

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

    เป็นโมฆะ

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

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

    ฟังก์ชัน constructor มีรูปแบบดังนี้ 

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

  • isResponseCacheable

    โมฆะ

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

    ฟังก์ชัน isResponseCacheable มีรูปแบบดังนี้ 

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

    • การตอบกลับ

      คำตอบ

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

    • returns

      บูลีน

      true หาก Response สามารถแคชได้ และ false หรือไม่เช่นนั้น

CacheableResponseOptions

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

  • ส่วนหัว

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

  • สถานะ

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

CacheableResponsePlugin

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

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

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

    โมฆะ

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

    หากระบุทั้ง statuses และ headers ไว้ ทั้ง 2 เงื่อนไขจะต้อง ตรงกันเพื่อให้ Response พิจารณาว่าสามารถแคชได้

    ฟังก์ชัน constructor มีรูปแบบดังนี้ 

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