เมื่อส่งคำขอ คุณจะตั้งค่าส่วนหัว range
ได้เพื่อให้เซิร์ฟเวอร์แสดงผลคำขอแบบเต็มเพียงบางส่วน วิธีนี้เป็นประโยชน์สำหรับไฟล์บางประเภท เช่น ไฟล์วิดีโอ ซึ่งผู้ใช้อาจเปลี่ยนตำแหน่งวิดีโอ
โมดูลนี้ทำหน้าที่อะไร
อาจมีสถานการณ์ที่คุณต้องการแสดงไฟล์ที่แคชไว้ แต่เบราว์เซอร์ได้ตั้งค่าส่วนหัว range
ไว้ ปกติแล้ว ส่วนหัว
จะถูกละเว้น
โมดูลนี้จะอ่านการตอบกลับที่แคชไว้และแสดงผลช่วงข้อมูลที่ระบุ
การใช้งานพื้นฐาน
คุณสามารถใช้คำขอช่วงของ Workbox ได้โดยการเพิ่มปลั๊กอินลงในกลยุทธ์ที่ต้องการตรวจสอบคำขอช่วง
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {RangeRequestsPlugin} from 'workbox-range-requests';
registerRoute(
({url}) => url.pathname.endsWith('.mp4'),
new CacheFirst({
plugins: [
new RangeRequestsPlugin(),
],
});
);
การใช้งานขั้นสูง
หากต้องการใช้ตรรกะนี้นอกปลั๊กอิน คุณสามารถใช้ฟังก์ชัน createPartialResponse()
ได้
import {createPartialResponse} from 'workbox-range-requests';
createPartialResponse(request, cachedResponse);
ดูข้อมูลเพิ่มเติมได้ในเอกสารอ้างอิง
ประเภท
RangeRequestsPlugin
ปลั๊กอินคำขอช่วงช่วยให้คำขอที่มีส่วนหัว "ช่วง" ตอบสนองโดยการตอบกลับที่แคชไว้ได้อย่างง่ายดาย
ซึ่งทำได้โดยการสกัดกั้นโค้ดเรียกกลับของปลั๊กอิน cachedResponseWillBeUsed
และส่งเนื้อหาการตอบกลับที่แคชไว้ชุดย่อยที่เหมาะสม
พร็อพเพอร์ตี้
-
เครื่องมือสร้าง
void
ฟังก์ชัน
constructor
มีลักษณะดังนี้() => {...}
-
returns
-
วิธีการ
createPartialResponse()
workbox-range-requests.createPartialResponse(
request: Request,
originalResponse: Response,
)
เมื่อพิจารณาออบเจ็กต์ Request
และ Response
เป็นอินพุต การดำเนินการนี้จะส่งกลับคำสัญญาสำหรับ Response
ใหม่
หาก Response
เดิมมีเนื้อหาบางส่วนอยู่แล้ว (เช่น มีสถานะ 206) ระบบจะถือว่าเนื้อหาเป็นไปตามข้อกำหนดของ Range:
อยู่แล้วและจะแสดงผลเนื้อหาตามที่เป็นอยู่
พารามิเตอร์
-
ส่งคำขอ
ส่งคำขอ
คำขอ ซึ่งควรมีส่วนหัว "ช่วง:"
-
originalResponse
คำตอบ
คำตอบ
การคืนสินค้า
-
สัญญา<การตอบกลับ>
การตอบกลับด้วย
206 Partial Content
ที่ตั้งค่าเนื้อหาการตอบกลับเป็นส่วนของเนื้อหาที่ระบุโดยส่วนหัวของRange:
ของคำขอ หรือการตอบกลับ416 Range Not Satisfiable
ในกรณีที่ไม่สามารถปฏิบัติตามเงื่อนไขของส่วนหัวRange: