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

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

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