ตั้งแต่ Chrome 123 เป็นต้นไป Service Worker Static Routing API พร้อมให้ใช้งาน API นี้ให้คุณระบุอย่างชัดเจนว่าควรดึงข้อมูลเส้นทางทรัพยากรบางเส้นทางอย่างไร ซึ่งหมายความว่าเบราว์เซอร์ไม่จำเป็นต้องเรียกใช้ Service Worker เพื่อดึงข้อมูลการตอบกลับจากแคชเท่านั้น หรือจากเครือข่ายโดยตรงก็ได้ API นี้อยู่ในช่วงทดลองใช้จากต้นทางมาตั้งแต่ Chrome 116 และในโพสต์นี้จะอธิบายรายละเอียดเกี่ยวกับการเปิดตัว API ใน Chrome 123
ใช้ API
วิธีใช้การเรียก API event.addRoutes ในเหตุการณ์ install ของ Service Worker ส่งรายการเส้นทางของวิธีนี้โดยมีพร็อพเพอร์ตี้ดังต่อไปนี้
condition- ระบุว่ากฎมีผลเมื่อใด ยอมรับพร็อพเพอร์ตี้ต่อไปนี้
urlPattern: อินสแตนซ์ URLPattern หรือสตริงที่แสดงถึงรูปแบบ URL ที่ถูกต้อง ซึ่งสามารถส่งผ่านลงในตัวสร้างURLPatternได้requestMethod: สตริงที่มีเมธอดคำขอrequestMode: สตริงที่มีโหมดคำขอrequestDestination: สตริงที่มีปลายทางคำขอrunningStatus: สตริง ซึ่งอาจเป็น"running"หรือ"not-running"ข้อมูลนี้ระบุสถานะการทำงานของ Service Worker
source- ระบุวิธีโหลดทรัพยากรที่ตรงกับ
conditionสตริงใดสตริงหนึ่งต่อไปนี้"network""cache""fetch-event""race-network-and-fetch-handler"
ในตัวอย่างต่อไปนี้ ระบบจะกำหนดเส้นทาง URL ที่ขึ้นต้นด้วย "/articles" ไปยัง Service Worker หาก URL ดังกล่าวกำลังทำงานอยู่ ในกรณีที่มีหลายเงื่อนไข เช่น urlPattern และ runningStatus เส้นทางนั้นจะต้องเป็นไปตามเงื่อนไขทั้งหมด
addEventListener('install', (event) => {
event.addRoutes({
condition: {
urlPattern: "/articles/*",
runningStatus: "running"
},
source: "fetch-event"
});
});
ในตัวอย่างต่อไปนี้ โพสต์ในแบบฟอร์มจะส่งไปยังเครือข่ายโดยตรงและข้าม Service Worker
addEventListener('install', (event) => {
event.addRoutes({
condition: {
urlPattern: "/form/*",
requestMethod: "post"
},
source: "network"
});
});
ในตัวอย่างต่อไปนี้ มีการใช้พื้นที่เก็บข้อมูลแคชชื่อ "pictures" สำหรับดึงข้อมูลไฟล์ที่มีนามสกุลไฟล์เป็น .png หรือ .jpg
addEventListener('install', (event) => {
event.addRoutes({
condition: {
or: [
{urlPattern: "*.png"},
{urlPattern: "*.jpg"}
]
},
source: {
cacheName: "pictures"
}
});
});
การเปลี่ยนแปลงจากช่วงทดลองใช้จากต้นทาง
ช่วงทดลองใช้จากต้นทางเดิมใช้ InstallEvent.registerRouter() แทน InstallEvent.addRoutes() โดยมีการเรียกใช้เมธอด registerRouter() ได้เพียงครั้งเดียว การเปลี่ยนแปลงนี้เป็นไปตามความคิดเห็นของชุมชนที่มีต่อช่วงทดลองใช้จากต้นทาง
นอกจากนี้ API ใหม่นี้ยังใช้ประโยชน์จากการเปลี่ยนแปลงของ URLPattern ที่เปิดตัวใน Chrome 121 เพิ่มความสามารถในการระบุเมธอดคำขอ โหมด และปลายทาง ตลอดจนเพิ่มตัวเลือกต้นทางเพิ่มเติม
การสนับสนุนในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
กฎของเราเตอร์ที่ลงทะเบียนแล้วจะแสดงในแท็บ Service Worker ของแผงแอปพลิเคชัน
ในแผงเครือข่าย หากคำขอตรงกับกฎที่ลงทะเบียนไว้ จะมีการระบุไว้ในคอลัมน์ขนาด เมื่อวางเมาส์ไว้เหนือคอลัมน์ขนาด รหัสเราเตอร์ที่ลงทะเบียนจะปรากฏขึ้น กฎที่เกี่ยวข้องจะแสดงในแท็บแอปพลิเคชัน
