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));
ประเภท
NavigationRoute
NavigationRoute ช่วยให้สร้าง workbox-routing.Route
ที่ตรงกับเบราว์เซอร์ [คำขอการนำทาง]https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading#first_what_are_navigation_requests
ได้อย่างง่ายดาย
ซึ่งจะตรงกับคำขอที่เข้ามาใหม่ซึ่งตั้งค่า https://fetch.spec.whatwg.org/#concept-request-mode|mode
เป็น navigate
เท่านั้น
คุณจะเลือกใช้เส้นทางนี้กับคำขอการนำทางบางส่วนเท่านั้นได้โดยใช้พารามิเตอร์ denylist
และ allowlist
อย่างใดอย่างหนึ่งหรือทั้ง 2 พารามิเตอร์
พร็อพเพอร์ตี้
-
void
หากมีการระบุทั้ง
denylist
และallowlist
แล้วdenylist
จะมีความสำคัญเหนือกว่าและคำขอจะไม่ตรงกับเส้นทางนี้นิพจน์ทั่วไปใน
allowlist
และdenylist
จะจับคู่กับส่วนของ [pathname
]https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/pathname
และ [search
]https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search
ที่อยู่ติดกันของ URL ที่ขอหมายเหตุ: ระบบอาจประเมินนิพจน์ทั่วไปเหล่านี้เทียบกับ URL ปลายทางทั้งหมดในระหว่างการนําทาง หลีกเลี่ยงการใช้ นิพจน์ทั่วไปที่ซับซ้อน ไม่เช่นนั้นผู้ใช้อาจเห็นความล่าช้าเมื่อไปยังส่วนต่างๆ ในเว็บไซต์
ฟังก์ชัน
constructor
มีลักษณะดังนี้(handler: RouteHandler, options?: NavigationRouteMatchOptions) => {...}
-
ฟังก์ชันเรียกกลับที่แสดงผล Promise ที่ส่งผลให้เกิดการตอบกลับ
-
NavigationRouteMatchOptions ไม่บังคับ
-
-
RouteHandlerObject ไม่บังคับ
-
HTTPMethod
-
void
ฟังก์ชัน
setCatchHandler
มีลักษณะดังนี้(handler: RouteHandler) => {...}
-
ฟังก์ชันเรียกกลับที่จะแสดงผลการคืนค่า "สัญญาว่า" เป็นการตอบกลับ
-
NavigationRouteMatchOptions
พร็อพเพอร์ตี้
-
RegExp[] ไม่บังคับ
-
RegExp[] ไม่บังคับ
RegExpRoute
RegExpRoute ช่วยให้สร้างนิพจน์ทั่วไปที่อิงตาม workbox-routing.Route
ได้อย่างง่ายดาย
สำหรับคำขอต้นทางเดียวกัน RegExp จะต้องตรงกันเฉพาะบางส่วนของ URL เท่านั้น สำหรับคําขอจากเซิร์ฟเวอร์ของบุคคลที่สาม คุณต้องกำหนด RegExp ที่ตรงกับจุดเริ่มต้นของ URL
พร็อพเพอร์ตี้
-
เครื่องมือสร้าง
void
หากนิพจน์ทั่วไปมี [capture groups]
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#grouping-back-references
ค่าที่บันทึกจะส่งไปยังอาร์กิวเมนต์workbox-routing~handlerCallback
params
ฟังก์ชัน
constructor
มีลักษณะดังนี้(regExp: RegExp, handler: RouteHandler, method?: HTTPMethod) => {...}
-
regExp
RegExp
นิพจน์ทั่วไปที่จะจับคู่กับ URL
-
ตัวแฮนเดิล
ฟังก์ชันเรียกกลับที่แสดงผล Promise ที่ส่งผลให้เกิดการตอบกลับ
-
method
HTTPMethod ไม่บังคับ
-
returns
-
-
catchHandler
RouteHandlerObject ไม่บังคับ
-
ตัวแฮนเดิล
-
ตรงกัน
-
method
HTTPMethod
-
setCatchHandler
void
ฟังก์ชัน
setCatchHandler
มีลักษณะดังนี้(handler: RouteHandler) => {...}
-
ตัวแฮนเดิล
ฟังก์ชันเรียกกลับที่จะแสดงผลการคืนค่า "สัญญาว่า" เป็นการตอบกลับ
-
Route
Route
ประกอบด้วยฟังก์ชันเรียกกลับ 2 คู่ ได้แก่ "match" และ "handler"
โค้ดเรียกกลับ "match" จะกำหนดว่าควรใช้เส้นทางเพื่อ "จัดการ" คำขอหรือไม่ด้วยการส่งคืนค่าที่ไม่ใช่ข้อผิดพลาด (หากทำได้) ระบบจะเรียกใช้โค้ดเรียกกลับ "เครื่องจัดการ" เมื่อมีข้อมูลที่ตรงกันและควรส่งคืนคำสัญญาที่แปลค่าเป็น Response
พร็อพเพอร์ตี้
-
เครื่องมือสร้าง
void
ตัวสร้างสำหรับคลาสเส้นทาง
ฟังก์ชัน
constructor
มีลักษณะดังนี้(match: RouteMatchCallback, handler: RouteHandler, method?: HTTPMethod) => {...}
-
ตรงกัน
ฟังก์ชันเรียกกลับที่กําหนดว่าเส้นทางตรงกับเหตุการณ์
fetch
ที่ระบุหรือไม่โดยแสดงผลค่าที่ไม่ผิดพลาด -
ตัวแฮนเดิล
ฟังก์ชันเรียกกลับที่จะแสดงผลการคืนค่า Promise ให้กับการตอบกลับ
-
method
HTTPMethod ไม่บังคับ
-
returns
-
-
catchHandler
RouteHandlerObject ไม่บังคับ
-
ตัวแฮนเดิล
-
ตรงกัน
-
method
HTTPMethod
-
setCatchHandler
void
ฟังก์ชัน
setCatchHandler
มีลักษณะดังนี้(handler: RouteHandler) => {...}
-
ตัวแฮนเดิล
ฟังก์ชันเรียกกลับที่จะแสดงผลการคืนค่า "สัญญาว่า" เป็นการตอบกลับ
-
Router
เราเตอร์สามารถใช้ในการประมวลผล FetchEvent
โดยใช้ workbox-routing.Route
อย่างน้อย 1 ตัว โดยจะตอบกลับด้วย Response
หากมีเส้นทางที่ตรงกันอยู่
หากไม่มีเส้นทางที่ตรงกับคำขอหนึ่งๆ เราเตอร์จะใช้แฮนเดิล "ค่าเริ่มต้น" หากมีการกำหนดไว้
หากเส้นทางที่ตรงกันแสดงข้อผิดพลาด เราเตอร์จะใช้แฮนเดิลแบบ "ดัก" หากกำหนดไว้เพื่อจัดการปัญหาอย่างมีชั้นเชิงและตอบกลับด้วยคำขอ
หากคำขอตรงกับหลายเส้นทาง ระบบจะใช้เส้นทางที่ลงทะเบียนแรกสุดในการตอบกลับคำขอ
พร็อพเพอร์ตี้
-
เครื่องมือสร้าง
void
เริ่มต้นเราเตอร์ใหม่
ฟังก์ชัน
constructor
มีลักษณะดังนี้() => {...}
-
returns
-
-
เส้นทาง
Map<HTTPMethodRoute[]>
-
addCacheListener
void
เพิ่ม Listener เหตุการณ์ข้อความสำหรับ URL เพื่อแคชจากหน้าต่าง วิธีนี้มีประโยชน์ในการแคชทรัพยากรที่โหลดบนหน้าก่อนที่โปรแกรมทำงานของบริการเริ่มควบคุมทรัพยากรนั้น
รูปแบบของข้อมูลข้อความที่ส่งจากหน้าต่างควรเป็นดังนี้ โดยที่อาร์เรย์
urlsToCache
อาจประกอบด้วยสตริง URL หรืออาร์เรย์ของสตริง URL + ออบเจ็กต์requestInit
(เหมือนกับที่คุณส่งไปยังfetch()
){ type: 'CACHE_URLS', payload: { urlsToCache: [ './script1.js', './script2.js', ['./script3.js', {mode: 'no-cors'}], ], }, }
ฟังก์ชัน
addCacheListener
มีลักษณะดังนี้() => {...}
-
addFetchListener
void
เพิ่ม Listener เหตุการณ์การดึงข้อมูลเพื่อตอบกลับเหตุการณ์เมื่อเส้นทางตรงกับคำขอของเหตุการณ์
ฟังก์ชัน
addFetchListener
มีลักษณะดังนี้() => {...}
-
findMatchingRoute
void
ตรวจสอบคำขอและ URL (และเหตุการณ์ (ไม่บังคับ)) กับรายการเส้นทางที่ลงทะเบียน และหากมีการจับคู่ที่ตรงกัน ระบบจะแสดงผลเส้นทางที่เกี่ยวข้องพร้อมด้วยพารามิเตอร์ที่สร้างขึ้นจากการจับคู่ที่ตรงกัน
ฟังก์ชัน
findMatchingRoute
มีลักษณะดังนี้(options: RouteMatchCallbackOptions) => {...}
-
ตัวเลือก
-
returns
ออบเจ็กต์
ออบเจ็กต์ที่มีพร็อพเพอร์ตี้
route
และparams
ระบบจะป้อนข้อมูลให้โดยอัตโนมัติหากพบเส้นทางที่ตรงกันหรือundefined
ในกรณีอื่นๆ
-
-
handleRequest
void
ใช้กฎการกำหนดเส้นทางกับออบเจ็กต์ FetchEvent เพื่อรับการตอบกลับจากเครื่องจัดการของเส้นทางที่เหมาะสม
ฟังก์ชัน
handleRequest
มีลักษณะดังนี้(options: object) => {...}
-
ตัวเลือก
ออบเจ็กต์
-
event
ExtendableEvent
เหตุการณ์ที่ทริกเกอร์ คำขอ
-
ส่งคำขอ
ส่งคำขอ
คำขอที่จะจัดการ
-
-
returns
สัญญา<การตอบกลับ>
ระบบจะส่งสัญญาคืนหากเส้นทางที่จดทะเบียนรองรับคำขอได้ หากไม่มีเส้นทางที่ตรงกันและไม่มี
defaultHandler
ระบบจะแสดงผลundefined
-
-
registerRoute
void
ลงทะเบียนเส้นทางด้วยเราเตอร์
ฟังก์ชัน
registerRoute
มีลักษณะดังนี้(route: Route) => {...}
-
เส้นทาง
เส้นทางการลงทะเบียน
-
-
setCatchHandler
void
หากเส้นทางมีข้อผิดพลาดขณะจัดการคำขอ ระบบจะเรียกใช้
handler
นี้และให้โอกาสตอบกลับฟังก์ชัน
setCatchHandler
มีลักษณะดังนี้(handler: RouteHandler) => {...}
-
ตัวแฮนเดิล
ฟังก์ชันเรียกกลับที่แสดงผล Promise ที่ส่งผลให้เกิดการตอบกลับ
-
-
setDefaultHandler
void
กำหนด
handler
เริ่มต้นที่จะเรียกใช้เมื่อไม่มีเส้นทางที่ตรงกับคำขอที่เข้ามาใหม่อย่างชัดเจนเมธอด HTTP แต่ละวิธี ("GET", "POST" ฯลฯ) จะมีตัวแฮนเดิลเริ่มต้นของตัวเอง
หากไม่มีตัวแฮนเดิลเริ่มต้น คำขอที่ไม่ตรงกันจะแข่งกับเครือข่ายเสมือนว่าไม่มี Service Worker อยู่
ฟังก์ชัน
setDefaultHandler
มีลักษณะดังนี้(handler: RouteHandler, method?: HTTPMethod) => {...}
-
ตัวแฮนเดิล
ฟังก์ชันเรียกกลับที่แสดงผล Promise ที่ส่งผลให้เกิดการตอบกลับ
-
method
HTTPMethod ไม่บังคับ
-
-
unregisterRoute
void
ยกเลิกการลงทะเบียนเส้นทางกับเราเตอร์
ฟังก์ชัน
unregisterRoute
มีลักษณะดังนี้(route: Route) => {...}
-
เส้นทาง
เส้นทางการยกเลิกการลงทะเบียน
-
วิธีการ
registerRoute()
workbox-routing.registerRoute(
capture: string | RegExp | RouteMatchCallback | Route,
handler?: RouteHandler,
method?: HTTPMethod,
)
ลงทะเบียน RegExp, สตริง หรือฟังก์ชัน ด้วยกลยุทธ์การแคชไปยังอินสแตนซ์เราเตอร์ Singleton ได้อย่างง่ายดาย
วิธีนี้จะสร้างเส้นทางให้คุณหากจำเป็น และเรียกใช้ workbox-routing.Router#registerRoute
พารามิเตอร์
-
จับภาพ
สตริง | RegExp | RouteMatchCallback | เส้นทาง
หากพารามิเตอร์การบันทึกคือ
Route
ระบบจะไม่สนใจอาร์กิวเมนต์อื่นๆ ทั้งหมด -
ตัวแฮนเดิล
RouteHandler ไม่บังคับ
-
method
HTTPMethod ไม่บังคับ
การคืนสินค้า
-
Route
ที่สร้างขึ้น
setCatchHandler()
workbox-routing.setCatchHandler(
handler: RouteHandler,
)
หากเส้นทางมีข้อผิดพลาดขณะจัดการคำขอ ระบบจะเรียกใช้ handler
นี้และให้โอกาสตอบกลับ
พารามิเตอร์
-
ตัวแฮนเดิล
ฟังก์ชันเรียกกลับที่แสดงผล Promise ที่ส่งผลให้เกิดการตอบกลับ
setDefaultHandler()
workbox-routing.setDefaultHandler(
handler: RouteHandler,
)
กำหนด handler
เริ่มต้นที่จะเรียกใช้เมื่อไม่มีเส้นทางที่ตรงกับคำขอที่เข้ามาใหม่อย่างชัดเจน
หากไม่มีตัวแฮนเดิลเริ่มต้น คำขอที่ไม่ตรงกันจะแข่งกับเครือข่ายเสมือนว่าไม่มี Service Worker อยู่
พารามิเตอร์
-
ตัวแฮนเดิล
ฟังก์ชันเรียกกลับที่แสดงผล Promise ที่ส่งผลให้เกิดการตอบกลับ