ใช้ Service Worker Static Routing API เพื่อข้าม Service Worker สำหรับเส้นทางที่ระบุ

Rachel Andrew

ตั้งแต่ Chrome 123 เป็นต้นไป API การกำหนดเส้นทางแบบคงที่ของ Service Worker จะพร้อมใช้งาน API นี้ช่วยให้คุณประกาศวิธีดึงข้อมูลเส้นทางทรัพยากรบางอย่างได้ ซึ่งหมายความว่าเบราว์เซอร์ไม่จำเป็นต้องเรียกใช้ Service Worker เพื่อดึงข้อมูลการตอบกลับจากแคชหรือจากเครือข่ายโดยตรง API นี้อยู่ในช่วงทดลองใช้จากต้นทางตั้งแต่ Chrome 116 และโพสต์นี้จะให้รายละเอียดเกี่ยวกับการเปิดตัว API ใน Chrome 123

ใช้ API

หากต้องการใช้ ให้เรียก API event.addRoutes ในเหตุการณ์ของ Service Worker install ส่งรายการเส้นทางที่มีพร็อพเพอร์ตี้ต่อไปนี้ไปยังเมธอดนี้

condition

ระบุเวลาที่กฎจะมีผล ยอมรับพร็อพเพอร์ตี้ต่อไปนี้

urlPattern: อินสแตนซ์ URLPattern หรือสตริงที่แสดง URLPattern ที่ถูกต้อง ซึ่งส่งไปยังตัวสร้าง 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 หากกำลังทำงานอยู่ หากมีหลายเงื่อนไข เช่น 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"
    }
  });
});

การเปลี่ยนแปลงจากช่วงทดลองใช้จากต้นทาง

Origin Trial เดิมใช้ InstallEvent.registerRouter() แทน InstallEvent.addRoutes() และเรียกใช้เมธอด registerRouter() ได้เพียงครั้งเดียว การเปลี่ยนแปลงนี้อิงตามความคิดเห็นของชุมชนเกี่ยวกับช่วงทดลองใช้เดิม

นอกจากนี้ API ใหม่ยังใช้ประโยชน์จากการเปลี่ยนแปลงใน URLPattern ที่เปิดตัวใน Chrome 121, เพิ่มความสามารถในการระบุวิธีการคำขอ โหมด และปลายทาง รวมถึงเพิ่มตัวเลือกแหล่งที่มาเพิ่มเติม

การรองรับในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

กฎของ Router ที่ลงทะเบียนจะแสดงในแท็บ Service Worker ของแผงแอปพลิเคชัน

กฎของ Router ที่ไฮไลต์ในแผงแอปพลิเคชัน

ในแผงเครือข่าย หากคำขอตรงกับกฎที่ลงทะเบียนไว้ ระบบจะระบุไว้ในคอลัมน์ขนาด เมื่อวางเคอร์เซอร์เหนือคอลัมน์ขนาด ระบบจะแสดงรหัสเราเตอร์ที่ลงทะเบียนไว้ กฎที่เกี่ยวข้องจะแสดงในแท็บแอปพลิเคชัน

รหัสเราเตอร์ตามที่แสดงในแผงเครือข่าย