เมื่อแคชเนื้อหาระหว่างรันไทม์ ไม่มีกฎใดที่ใช้ได้กับทั้งหมด คำตอบที่ได้รับคือ "ถูกต้อง" และมีสิทธิ์ที่จะบันทึกและนำมาใช้ใหม่
โมดูล 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) => {...}
-
การกำหนดค่า
CacheableResponseOptions ไม่บังคับ
-
returns
-
-
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) => {...}
-
การกำหนดค่า
-
returns
-