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

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

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

การกำหนดเส้นทางดำเนินการอย่างไร

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

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

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

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

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

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

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

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

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

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

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

ต ฟังก์ชัน Callback ของแฮนเดิล จะได้รับส่วนแบ่ง 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 สำหรับการส่งกลับไว้ในสัญญา

คุณลงทะเบียน Callback ต่อไปนี้ได้

import {registerRoute} from 'workbox-routing';

registerRoute(matchCb, handlerCb);

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

โดยปกติจะเป็น "แฮนเดิล" Callback จะใช้หนึ่งในกลยุทธ์ที่มีให้ ตามกลยุทธ์กล่องทำงาน เช่น

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

registerRoute(matchCb, new StaleWhileRevalidate());

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

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

แนวทางปฏิบัติทั่วไปคือการใช้นิพจน์ทั่วไปแทน "การจับคู่" Callback โดย 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 เนื่องจาก มีแนวโน้มว่าจะใช้นิพจน์ทั่วไป new RegExp('/styles/.*\\.css') ที่คุณต้องการจับคู่ไฟล์ 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 อยู่ในทั้ง 2 แบบ allowlist และ denylist

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

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

import {setDefaultHandler} from 'workbox-routing';

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

ตั้งค่า Catch Handler

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

import {setCatchHandler} from 'workbox-routing';

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

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

เส้นทางทั้งหมดโดยค่าเริ่มต้นจะถือว่าเป็นสำหรับคำขอ 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,
)