การกำหนดเส้นทางกล่องงาน

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

workbox-routing เป็นโมดูลที่ช่วยให้ "กำหนดเส้นทาง" คำขอเหล่านี้ไปยังฟังก์ชันต่างๆ ที่มีการตอบกลับได้ง่ายๆ

วิธีการกำหนดเส้นทาง

เมื่อคำขอเครือข่ายทำให้เกิดเหตุการณ์การดึงข้อมูลของ Service Worker แล้ว workbox-routing จะพยายามตอบกลับคำขอโดยใช้เส้นทางและตัวแฮนเดิลที่ให้ไว้

สิ่งสำคัญที่ควรทราบจากข้อความข้างต้นมีดังนี้

• วิธีการส่งคำขอมีความสำคัญ โดยค่าเริ่มต้น ระบบจะลงทะเบียนเส้นทางสำหรับคำขอ GET รายการ หากต้องการสกัดกั้นคำขอประเภทอื่นๆ คุณจะต้องระบุวิธีการดังกล่าว

• ลำดับของการลงทะเบียนเส้นทางมีความสำคัญ หากมีการลงทะเบียนเส้นทางไว้หลายเส้นทางที่รองรับคำขอได้ ระบบจะใช้เส้นทางที่ลงทะเบียนไว้ก่อนเพื่อตอบสนองคำขอ

คุณสามารถลงทะเบียนเส้นทางได้หลายวิธี เช่น ใช้โค้ดเรียกกลับ นิพจน์ทั่วไป หรืออินสแตนซ์เส้นทาง

การจับคู่และการจัดการในเส้นทาง

"เส้นทาง" ในกล่องทำงานเป็นเพียง 2 ฟังก์ชันเท่านั้น คือ ฟังก์ชัน "จับคู่" เพื่อระบุว่าเส้นทางควรตรงกับคำขอและฟังก์ชัน "การจัดการ" ซึ่งควรจัดการคำขอและตอบกลับด้วยการตอบกลับ

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

ฟังก์ชันเรียกกลับการจับคู่จะส่งผ่าน ExtendableEvent Request และออบเจ็กต์URLที่คุณจับคู่ได้โดยแสดงผลค่าที่แท้จริง ตัวอย่างง่ายๆ นี้ คุณอาจจับคู่ กับ URL ที่เจาะจงได้ดังนี้

const matchCb = ({url, request, event}) => {
  return url.pathname === '/special/url';
};

ครอบคลุมกรณีการใช้งานส่วนใหญ่ด้วยการตรวจสอบ / ทดสอบ url หรือ request

ฟังก์ชันเรียกกลับของแฮนเดิลจะได้รับออบเจ็กต์ ExtendableEvent, Request และURL เดียวกันพร้อมกับค่า params ซึ่งเป็นค่าที่ฟังก์ชัน "match" แสดงผล

const handlerCb = async ({url, request, event, params}) => {
  const response = await fetch(request);
  const responseBody = await response.text();
  return new Response(`${responseBody} <!-- Look Ma. Added Content. -->`, {
    headers: response.headers,
  });
};

ตัวแฮนเดิลต้องส่งคืนค่าสัญญาที่แก้ไขเป็น Response ในตัวอย่างนี้ เราใช้ async และ await ที่ด้านล่าง ระบบจะรวมค่า Response ที่แสดงผลไว้ในสัญญา

คุณสามารถลงทะเบียนโค้ดเรียกกลับเหล่านี้ได้ ดังนี้

import {registerRoute} from 'workbox-routing';

registerRoute(matchCb, handlerCb);

ข้อจำกัดเพียงอย่างเดียวคือโค้ดเรียกกลับ "การจับคู่" จะต้องแสดงผลพร้อมกันค่าที่แท้จริง คุณจะทำงานแบบอะซิงโครนัสไม่ได้ สาเหตุคือ Router ต้องตอบสนองแบบพร้อมกันกับเหตุการณ์การดึงข้อมูล หรืออนุญาตให้ข้ามผ่านเหตุการณ์การดึงข้อมูลอื่นๆ

โดยทั่วไปโค้ดเรียกกลับของ "เครื่องจัดการ" จะใช้กลยุทธ์ใดกลยุทธ์หนึ่งที่มีกลยุทธ์พื้นที่ทำงาน ดังนี้

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

registerRoute(matchCb, new StaleWhileRevalidate());

ในหน้านี้ เราจะมุ่งเน้นไปที่ workbox-routing แต่คุณดูข้อมูลเพิ่มเติมเกี่ยวกับกลยุทธ์เหล่านี้เกี่ยวกับกลยุทธ์แบบกล่องงานได้

วิธีลงทะเบียนเส้นทางนิพจน์ทั่วไป

หลักปฏิบัติทั่วไปคือการใช้นิพจน์ทั่วไปแทนการเรียกกลับแบบ "ตรงกัน" Workbox ช่วยให้ติดตั้งใช้งานได้ง่าย ดังนี้

import {registerRoute} from 'workbox-routing';

registerRoute(new RegExp('/styles/.*\\.css'), handlerCb);

สำหรับคำขอจากต้นทางเดียวกัน นิพจน์ทั่วไปนี้จะจับคู่ตราบใดที่ URL ของคำขอตรงกับนิพจน์ทั่วไป

• https://example.com/styles/main.css
• https://example.com/styles/nested/file.css
• https://example.com/nested/styles/directory.css

แต่สำหรับคำขอข้ามต้นทาง นิพจน์ทั่วไปต้องตรงกับส่วนต้นของ URL ด้วยเหตุผลนี้ คุณไม่น่าจะตั้งใจจับคู่ไฟล์ CSS ของบุคคลที่สามเมื่อใช้นิพจน์ทั่วไป new RegExp('/styles/.*\\.css')

• https://cdn.third-party-site.com/styles/main.css
• https://cdn.third-party-site.com/styles/nested/file.css
• https://cdn.third-party-site.com/nested/styles/directory.css

หากเคยต้องการลักษณะการทำงานนี้ คุณต้องตรวจสอบว่านิพจน์ทั่วไปตรงกับส่วนต้นของ URL หากต้องการจับคู่คำขอสำหรับ https://cdn.third-party-site.com เราก็สามารถใช้นิพจน์ทั่วไป new RegExp('https://cdn\\.third-party-site\\.com.*/styles/.*\\.css') ได้

• https://cdn.third-party-site.com/styles/main.css
• https://cdn.third-party-site.com/styles/nested/file.css
• https://cdn.third-party-site.com/nested/styles/directory.css

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

วิธีลงทะเบียนเส้นทางการนำทาง

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

import {createHandlerBoundToURL} from 'workbox-precaching';
import {NavigationRoute, registerRoute} from 'workbox-routing';

// This assumes /app-shell.html has been precached.
const handler = createHandlerBoundToURL('/app-shell.html');
const navigationRoute = new NavigationRoute(handler);
registerRoute(navigationRoute);

เมื่อใดก็ตามที่ผู้ใช้เข้าชมเว็บไซต์ของคุณในเบราว์เซอร์ คำขอหน้าเว็บนั้นจะเป็นคำขอการนำทางและจะแสดงหน้าที่แคชไว้ /app-shell.html (หมายเหตุ: คุณควรแคชหน้าเว็บผ่าน workbox-precaching หรือผ่านขั้นตอนการติดตั้งของคุณเอง)

การดำเนินการนี้จะตอบสนองต่อคำขอการนำทางทั้งหมดโดยค่าเริ่มต้น หากต้องการจํากัดไม่ให้ตอบกลับไปยัง URL ชุดย่อย ให้ใช้ตัวเลือก allowlist และ denylist เพื่อจำกัดหน้าที่จะจับคู่กับเส้นทางนี้

import {createHandlerBoundToURL} from 'workbox-precaching';
import {NavigationRoute, registerRoute} from 'workbox-routing';

// This assumes /app-shell.html has been precached.
const handler = createHandlerBoundToURL('/app-shell.html');
const navigationRoute = new NavigationRoute(handler, {
  allowlist: [new RegExp('/blog/')],
  denylist: [new RegExp('/blog/restricted/')],
});
registerRoute(navigationRoute);

สิ่งเดียวที่ควรทราบคือ denylist จะชนะหาก URL อยู่ในทั้ง allowlist และ denylist

ตั้งค่าเครื่องจัดการเริ่มต้น

หากต้องการระบุ "เครื่องจัดการ" สำหรับคำขอที่ไม่ตรงกับเส้นทาง คุณตั้งค่าตัวแฮนเดิลเริ่มต้นได้

import {setDefaultHandler} from 'workbox-routing';

setDefaultHandler(({url, event, params}) => {
  // ...
});

ตั้งค่าตัวจัดการ Catch

ในกรณีที่เส้นทางใดเกิดข้อผิดพลาด คุณสามารถจับภาพและลดระดับอย่างมีชั้นเชิงโดยการตั้งค่าตัวแฮนเดิลตัวจับ

import {setCatchHandler} from 'workbox-routing';

setCatchHandler(({url, event, params}) => {
  ...
});

การกําหนดเส้นทางสําหรับคําขอที่ไม่รับ

โดยค่าเริ่มต้น ระบบจะถือว่าเส้นทางทั้งหมดเป็นเส้นทางสำหรับคำขอ GET

หากต้องการกำหนดเส้นทางคำขออื่นๆ เช่น คำขอ POST คุณจะต้องกำหนดวิธีการเมื่อลงทะเบียนเส้นทาง เช่น

import {registerRoute} from 'workbox-routing';

registerRoute(matchCb, handlerCb, 'POST');
registerRoute(new RegExp('/api/.*\\.json'), handlerCb, 'POST');

การบันทึกเราเตอร์

คุณควรสามารถกำหนดโฟลว์คำขอโดยใช้บันทึกจาก workbox-routing ซึ่งจะไฮไลต์ URL ที่กำลังมีการประมวลผลผ่าน Workbox

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

การใช้งานขั้นสูง

หากต้องการควบคุมเวลาที่จะให้เราเตอร์ Workbox ได้รับคำขอมากยิ่งขึ้น คุณสามารถสร้างอินสแตนซ์ Router ของคุณเองและเรียกใช้เมธอด handleRequest() เมื่อใดก็ตามที่ต้องการใช้เราเตอร์เพื่อตอบกลับคำขอ

import {Router} from 'workbox-routing';

const router = new Router();

self.addEventListener('fetch', event => {
  const {request} = event;
  const responsePromise = router.handleRequest({
    event,
    request,
  });
  if (responsePromise) {
    // Router found a route to handle the request.
    event.respondWith(responsePromise);
  } else {
    // No route was found to handle the request.
  }
});

เมื่อใช้ Router โดยตรง คุณจะต้องใช้คลาส Route หรือคลาสอื่นๆ ที่ขยายได้เพื่อลงทะเบียนเส้นทาง

import {Route, RegExpRoute, NavigationRoute, Router} from 'workbox-routing';

const router = new Router();
router.registerRoute(new Route(matchCb, handlerCb));
router.registerRoute(new RegExpRoute(new RegExp(...), handlerCb));
router.registerRoute(new NavigationRoute(handlerCb));

workbox-routing.registerRoute(
  capture: string|RegExp|RouteMatchCallback|Route,
  handler?: RouteHandler,
  method?: HTTPMethod,
)

workbox-routing.setCatchHandler(
  handler: RouteHandler,
)

workbox-routing.setDefaultHandler(
  handler: RouteHandler,
)