เมื่อเริ่มใช้โปรแกรมทำงานของบริการเป็นครั้งแรก ชุดกลยุทธ์การแคชที่พบบ่อยก็เกิดขึ้น กลยุทธ์การแคชเป็นรูปแบบที่กำหนดวิธีที่ Service Worker สร้างการตอบสนองหลังจากได้รับเหตุการณ์การดึงข้อมูล
workbox-strategies
มีกลยุทธ์การแคชที่พบบ่อยที่สุดเพื่อให้คุณนำไปใช้กับ Service Worker ได้ง่ายๆ
เราจะไม่ลงรายละเอียดมากนักนอกเหนือจากกลยุทธ์ที่ Workbox รองรับ แต่คุณดูข้อมูลเพิ่มเติมในตำราอาหารแบบออฟไลน์ได้
การใช้กลยุทธ์
ในตัวอย่างต่อไปนี้ เราจะแสดงวิธีใช้กลยุทธ์การแคช Workbox กับ workbox-routing
มีบางตัวเลือกที่คุณสามารถกำหนดด้วยแต่ละกลยุทธ์ ซึ่งจะกล่าวถึงในส่วนการกำหนดค่ากลยุทธ์ของเอกสารนี้
ในส่วนส่วนการใช้งานขั้นสูง เราจะพูดถึงวิธีใช้กลยุทธ์การแคชโดยตรงโดยไม่ใช้ workbox-routing
ไม่มีอัปเดตขณะตรวจสอบความถูกต้องอีกครั้ง
รูปแบบไม่อัปเดตขณะตรวจสอบใหม่ช่วยให้คุณตอบกลับคำขอได้อย่างรวดเร็วที่สุดด้วยการตอบกลับที่แคชไว้ หากมี และจะกลับไปใช้คำขอเครือข่ายหากไม่ได้แคชไว้ จากนั้นจะมีการใช้คำขอเครือข่ายเพื่ออัปเดตแคช กลยุทธ์นี้ต่างจากการติดตั้งใช้งานบางอย่างที่ไม่มีอัปเดตขณะตรวจสอบอีกครั้ง กลยุทธ์นี้จะส่งคำขอการตรวจสอบอีกครั้งเสมอ โดยไม่คำนึงถึงอายุของการตอบกลับที่แคชไว้
นี่เป็นกลยุทธ์ที่ใช้กันโดยทั่วไปซึ่งการมีแหล่งข้อมูลที่อัปเดตล่าสุดไม่ใช่สิ่งจำเป็นของแอปพลิเคชัน
import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
registerRoute(
({url}) => url.pathname.startsWith('/images/avatars/'),
new StaleWhileRevalidate()
);
แคชก่อน (แคชกลับไปที่เครือข่าย)
เว็บแอปแบบออฟไลน์อาศัยแคชเป็นหลัก แต่สำหรับเนื้อหาที่ไม่สำคัญและค่อยๆ แคชได้ เราแนะนำให้ใช้แคชก่อน
หากมีการตอบกลับในแคช ระบบจะดำเนินการตามคําขอโดยใช้การตอบกลับที่แคชไว้และจะไม่ใช้เครือข่ายเลย หากไม่มีการตอบกลับที่แคชไว้ ระบบจะดำเนินการกับคำขอโดยคำขอของเครือข่ายและระบบจะแคชการตอบกลับเพื่อให้คำขอถัดไปแสดงจากแคชโดยตรง
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
registerRoute(({request}) => request.destination === 'style', new CacheFirst());
เครือข่ายก่อน (เครือข่ายที่กลับสู่แคช)
สำหรับคำขอที่มีการอัปเดตบ่อยๆ กลยุทธ์เน้นเครือข่ายเป็นหลักจะเป็นโซลูชันที่ดีที่สุด โดยค่าเริ่มต้น ระบบจะพยายามดึงข้อมูลการตอบกลับล่าสุดจากเครือข่าย หากคำขอสำเร็จ ระบบจะใส่การตอบกลับไว้ในแคช หากเครือข่ายไม่แสดงผลการตอบกลับ ระบบจะใช้การตอบสนองที่แคชไว้
import {registerRoute} from 'workbox-routing';
import {NetworkFirst} from 'workbox-strategies';
registerRoute(
({url}) => url.pathname.startsWith('/social-timeline/'),
new NetworkFirst()
);
เครือข่ายเท่านั้น
หากต้องการให้มีการตอบสนองคำขอที่เจาะจงจากเครือข่าย กลยุทธ์ที่ใช้ได้คือเครือข่ายเท่านั้น
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';
registerRoute(({url}) => url.pathname.startsWith('/admin/'), new NetworkOnly());
แคชเท่านั้น
กลยุทธ์แคชเท่านั้นจะดูแลให้มีการตอบสนองจากแคช วิธีนี้จะไม่ค่อยพบบ่อยในช่องงาน แต่อาจเป็นประโยชน์หากคุณมีขั้นตอนการแคชล่วงหน้าของคุณเอง
import {registerRoute} from 'workbox-routing';
import {CacheOnly} from 'workbox-strategies';
registerRoute(({url}) => url.pathname.startsWith('/app/v2/'), new CacheOnly());
การกำหนดค่ากลยุทธ์
กลยุทธ์ทั้งหมดช่วยให้คุณกำหนดค่าสิ่งต่อไปนี้ได้
- ชื่อของแคชที่จะใช้ในกลยุทธ์
- ข้อจำกัดการหมดอายุของแคชเพื่อใช้ในกลยุทธ์
- อาร์เรย์ของปลั๊กอินที่จะมีการเรียกใช้วิธีวงจรเมื่อดึงข้อมูลและแคชคำขอ
การเปลี่ยนแคชที่ใช้โดยกลยุทธ์
คุณสามารถเปลี่ยนแคชกลยุทธ์ที่ใช้ได้โดยการระบุชื่อแคช การทำเช่นนี้มีประโยชน์ในกรณีที่ต้องการแยกเนื้อหาออกจากกันเพื่อช่วยในการแก้ไขข้อบกพร่อง
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
cacheName: 'image-cache',
})
);
การใช้ปลั๊กอิน
Workbox จะมาพร้อมกับชุดปลั๊กอินที่สามารถใช้กับกลยุทธ์เหล่านี้
- workbox-background-sync
- workbox-broadcast-update
- Workbox-cacheable-response
- Workbox-expiration
- Workbox-range-requests
หากต้องการใช้ปลั๊กอินเหล่านี้ (หรือปลั๊กอินที่กำหนดเอง) คุณเพียงแค่ส่งผ่านอินสแตนซ์ไปยังตัวเลือก plugins
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
cacheName: 'image-cache',
plugins: [
new ExpirationPlugin({
// Only cache requests for a week
maxAgeSeconds: 7 * 24 * 60 * 60,
// Only cache 10 requests.
maxEntries: 10,
}),
],
})
);
กลยุทธ์ที่กำหนดเอง
นอกจากการกำหนดค่ากลยุทธ์แล้ว Workbox ยังให้คุณสร้างกลยุทธ์ที่กำหนดเองด้วย
ซึ่งทำได้ด้วยการนำเข้าและขยายคลาสฐาน Strategy
จาก workbox-strategies
:
import {Strategy} from 'workbox-strategies';
class NewStrategy extends Strategy {
_handle(request, handler) {
// Define handling logic here
}
}
ในตัวอย่างนี้ handle()
ใช้เป็นกลยุทธ์คำขอในการกำหนดตรรกะการจัดการที่เฉพาะเจาะจง กลยุทธ์คำขอที่ใช้ได้มี 2 แบบ ได้แก่
handle()
: ดำเนินกลยุทธ์คำขอและแสดงผลPromise
ที่จะแปลค่าด้วยResponse
โดยเรียกใช้โค้ดเรียกกลับของปลั๊กอินที่เกี่ยวข้องทั้งหมดhandleAll()
: คล้ายกับhandle()
แต่แสดงผลออบเจ็กต์Promise
2 รายการ รายการแรกเทียบเท่ากับที่handle()
ส่งคืน และรายการที่ 2 จะตายตัวเมื่อสัญญาที่เพิ่มลงในevent.waitUntil()
ในกลยุทธ์เสร็จสมบูรณ์แล้ว
มีการเรียกใช้กลยุทธ์คำขอทั้ง 2 แบบด้วยพารามิเตอร์ 2 ตัว ดังนี้
request
:Request
ที่กลยุทธ์จะแสดงการตอบสนองhandler
: อินสแตนซ์StrategyHandler
ที่สร้างขึ้นโดยอัตโนมัติสำหรับกลยุทธ์ปัจจุบัน
การสร้างกลยุทธ์ใหม่
ต่อไปนี้เป็นตัวอย่างของกลยุทธ์ใหม่ที่นำลักษณะการทำงานของ NetworkOnly
มาใช้ซ้ำ
class NewNetworkOnlyStrategy extends Strategy {
_handle(request, handler) {
return handler.fetch(request);
}
}
โปรดสังเกตวิธีที่ระบบเรียก handler.fetch()
แทนเมธอด fetch
แบบดั้งเดิม คลาส StrategyHandler
มีการดำเนินการดึงข้อมูลและแคชจำนวนหนึ่งที่สามารถใช้เมื่อมีการใช้ handle()
หรือ handleAll()
fetch
: ดึงข้อมูลคำขอที่ระบุ และเรียกใช้เมธอดวงจรปลั๊กอินrequestWillFetch()
,fetchDidSucceed()
และfetchDidFail()
cacheMatch
: จับคู่คำขอจากแคช และเรียกใช้เมธอดวงจรปลั๊กอินcacheKeyWillBeUsed()
และcachedResponseWillBeUsed()
cachePut
: ใส่คู่คำขอ/การตอบกลับในแคช และเรียกใช้เมธอดวงจรปลั๊กอินcacheKeyWillBeUsed()
,cacheWillUpdate()
และcacheDidUpdate()
fetchAndCachePut
: เรียกใช้fetch()
และเรียกใช้cachePut()
อยู่เบื้องหลังในคำตอบที่สร้างโดยfetch()
hasCallback
: ใช้ค่าเรียกกลับเป็นอินพุตและแสดงผลเป็น "จริง" หากกลยุทธ์มีปลั๊กอินอย่างน้อย 1 รายการที่มีโค้ดเรียกกลับดังกล่าวrunCallbacks
: เรียกใช้โค้ดเรียกกลับของปลั๊กอินทั้งหมดที่ตรงกับชื่อหนึ่งๆ ตามลำดับ โดยส่งผ่านออบเจ็กต์พารามิเตอร์ที่กำหนด (รวมกับสถานะปลั๊กอินปัจจุบัน) เป็นอาร์กิวเมนต์เดียวiterateCallbacks
: ยอมรับโค้ดเรียกกลับและแสดงผลโค้ดเรียกกลับของปลั๊กอินที่ตรงกันซึ่งดำเนินการซ้ำได้ โดยจะตัดการเรียกกลับด้วยสถานะตัวแฮนเดิลปัจจุบัน (นั่นคือ เมื่อคุณเรียกโค้ดเรียกกลับแต่ละรายการ พารามิเตอร์ออบเจ็กต์ที่คุณส่งจะนำไปรวมกับสถานะปัจจุบันของปลั๊กอิน)waitUntil
: เพิ่มคำมั่นสัญญายืดระยะเวลาสัญญาเกี่ยวกับเหตุการณ์ที่เชื่อมโยงกับคำขอที่กำลังจัดการ (โดยปกติจะเป็นFetchEvent
)doneWaiting
: แสดงผลสัญญาที่แก้ไขเมื่อสัญญาทั้งหมดที่ส่งไปยังwaitUntil()
ตกลงแล้วdestroy
: หยุดการทำงานของกลยุทธ์และแก้ไขสัญญาwaitUntil()
ที่รอดำเนินการทันที
กลยุทธ์การแข่งขันของเครือข่ายแคชที่กำหนดเอง
ตัวอย่างต่อไปนี้อิงตาม cache-network-race จากออฟไลน์ Cookbook (ซึ่ง Workbox ไม่มี) แต่จะเพิ่มเป็นอีกขั้นตอนหนึ่ง และอัปเดตแคชเสมอหลังจากส่งคำขอเครือข่ายสำเร็จ ในตัวอย่างกลยุทธ์ที่ซับซ้อนขึ้นซึ่งใช้การดำเนินการหลายอย่าง
import {Strategy} from 'workbox-strategies';
class CacheNetworkRace extends Strategy {
_handle(request, handler) {
const fetchAndCachePutDone = handler.fetchAndCachePut(request);
const cacheMatchDone = handler.cacheMatch(request);
return new Promise((resolve, reject) => {
fetchAndCachePutDone.then(resolve);
cacheMatchDone.then(response => response && resolve(response));
// Reject if both network and cache error or find no response.
Promise.allSettled([fetchAndCachePutDone, cacheMatchDone]).then(
results => {
const [fetchAndCachePutResult, cacheMatchResult] = results;
if (
fetchAndCachePutResult.status === 'rejected' &&
!cacheMatchResult.value
) {
reject(fetchAndCachePutResult.reason);
}
}
);
});
}
}
การใช้งานขั้นสูง
หากต้องการใช้กลยุทธ์ในตรรกะเหตุการณ์การดึงข้อมูลของคุณเอง คุณสามารถใช้คลาสกลยุทธ์เพื่อส่งคำขอผ่านกลยุทธ์ที่เฉพาะเจาะจงได้
เช่น หากต้องการใช้กลยุทธ์ "ไม่มีอัปเดตขณะตรวจสอบใหม่" ให้ทำดังนี้
self.addEventListener('fetch', event => {
const {request} = event;
const url = new URL(request.url);
if (url.origin === location.origin && url.pathname === '/') {
event.respondWith(new StaleWhileRevalidate().handle({event, request}));
}
});
ดูรายการชั้นเรียนที่พร้อมให้บริการได้ในเอกสารอ้างอิงสำหรับ Workbox-strategies
ประเภท
CacheFirst
การใช้กลยุทธ์คำขอ Cache-first
กลยุทธ์ "แคชแรก" มีประโยชน์สำหรับเนื้อหาที่แก้ไขแล้ว เช่น URL อย่าง /styles/example.a8f5f1.css
เนื่องจากอาจมีการแคชเป็นระยะเวลานาน
หากคำขอเครือข่ายไม่สำเร็จและไม่มีแคชที่ตรงกัน การดำเนินการนี้จะทำให้ระบบแสดงข้อผิดพลาด WorkboxError
พร็อพเพอร์ตี้
-
เครื่องมือสร้าง
void
สร้างอินสแตนซ์ใหม่ของกลยุทธ์และตั้งค่าพร็อพเพอร์ตี้ตัวเลือกที่บันทึกไว้ทั้งหมดเป็นพร็อพเพอร์ตี้อินสแตนซ์สาธารณะ
หมายเหตุ: หากคลาสกลยุทธ์ที่กำหนดเองขยายคลาสกลยุทธ์พื้นฐาน และไม่จำเป็นต้องใช้พร็อพเพอร์ตี้มากกว่านี้ คุณก็ไม่จำเป็นต้องกำหนดตัวสร้างของตัวเอง
ฟังก์ชัน
constructor
มีลักษณะดังนี้(options?: StrategyOptions) => {...}
-
ตัวเลือก
StrategyOptions ไม่บังคับ
-
returns
-
-
cacheName
string
-
fetchOptions
RequestInit ไม่บังคับ
-
matchOptions
CacheQueryOptions ไม่บังคับ
-
ปลั๊กอิน
-
_awaitComplete
void
ฟังก์ชัน
_awaitComplete
มีลักษณะดังนี้(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
สัญญา<การตอบกลับ>
-
ตัวแฮนเดิล
-
ส่งคำขอ
ส่งคำขอ
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
ฟังก์ชัน
_getResponse
มีลักษณะดังนี้(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
ตัวแฮนเดิล
-
ส่งคำขอ
ส่งคำขอ
-
event
ExtendableEvent
-
returns
สัญญา<การตอบกลับ>
-
-
แฮนเดิล
void
ดำเนินกลยุทธ์คำขอและแสดงผล
Promise
ที่จะแปลค่าด้วยResponse
โดยเรียกใช้โค้ดเรียกกลับของปลั๊กอินที่เกี่ยวข้องทั้งหมดเมื่อลงทะเบียนอินสแตนซ์กลยุทธ์กับ Workbox
workbox-routing.Route
ระบบจะเรียกใช้เมธอดนี้โดยอัตโนมัติเมื่อเส้นทางตรงกันหรือคุณจะใช้วิธีนี้ในตัวฟัง
FetchEvent
แบบสแตนด์อโลนได้โดยส่งผ่านไปยังevent.respondWith()
ฟังก์ชัน
handle
มีลักษณะดังนี้(options: FetchEvent | HandlerCallbackOptions) => {...}
-
ตัวเลือก
FetchEvent | HandlerCallbackOptions
FetchEvent
หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ในรายการด้านล่าง
-
returns
สัญญา<การตอบกลับ>
-
-
handleAll
void
คล้ายกับ
workbox-strategies.Strategy~handle
แต่แทนที่จะแสดงผลPromise
ที่แปลค่าเป็นResponse
ระบบจะแสดงผล Tuple ของ[response, done]
สัญญา โดยรายการแรก (response
) เทียบเท่ากับสิ่งที่handle()
ส่งคืน และคำหลังคือคำสัญญาที่จะแก้ไขปัญหาเมื่อคำสัญญาที่เพิ่มลงในevent.waitUntil()
ซึ่งเป็นส่วนหนึ่งของการทำตามกลยุทธ์เสร็จสมบูรณ์แล้วรอให้กลยุทธ์
done
ทำงานเพิ่มเติมได้สำเร็จ (โดยปกติแล้วการแคชคำตอบ)ฟังก์ชัน
handleAll
มีลักษณะดังนี้(options: FetchEvent | HandlerCallbackOptions) => {...}
-
ตัวเลือก
FetchEvent | HandlerCallbackOptions
FetchEvent
หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ในรายการด้านล่าง
-
returns
[Promise<Response>, Promise<void>]
แพ็กเกจของ [response, Done] คำสัญญาที่สามารถใช้กำหนดได้ว่าการตอบกลับจะได้รับการแก้ไขเมื่อใด เช่นเดียวกับเมื่อตัวแฮนเดิลทำงานทั้งหมดเสร็จสิ้น
-
CacheOnly
การใช้กลยุทธ์คำขอแบบแคชเท่านั้น
คลาสนี้จะเป็นประโยชน์หากคุณต้องการใช้ประโยชน์จากปลั๊กอินของ Workbox
หากไม่มีแคชที่ตรงกัน การดำเนินการนี้จะทำให้เกิดข้อยกเว้น WorkboxError
พร็อพเพอร์ตี้
-
เครื่องมือสร้าง
void
สร้างอินสแตนซ์ใหม่ของกลยุทธ์และตั้งค่าพร็อพเพอร์ตี้ตัวเลือกที่บันทึกไว้ทั้งหมดเป็นพร็อพเพอร์ตี้อินสแตนซ์สาธารณะ
หมายเหตุ: หากคลาสกลยุทธ์ที่กำหนดเองขยายคลาสกลยุทธ์พื้นฐาน และไม่จำเป็นต้องใช้พร็อพเพอร์ตี้มากกว่านี้ คุณก็ไม่จำเป็นต้องกำหนดตัวสร้างของตัวเอง
ฟังก์ชัน
constructor
มีลักษณะดังนี้(options?: StrategyOptions) => {...}
-
ตัวเลือก
StrategyOptions ไม่บังคับ
-
returns
-
-
cacheName
string
-
fetchOptions
RequestInit ไม่บังคับ
-
matchOptions
CacheQueryOptions ไม่บังคับ
-
ปลั๊กอิน
-
_awaitComplete
void
ฟังก์ชัน
_awaitComplete
มีลักษณะดังนี้(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
สัญญา<การตอบกลับ>
-
ตัวแฮนเดิล
-
ส่งคำขอ
ส่งคำขอ
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
ฟังก์ชัน
_getResponse
มีลักษณะดังนี้(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
ตัวแฮนเดิล
-
ส่งคำขอ
ส่งคำขอ
-
event
ExtendableEvent
-
returns
สัญญา<การตอบกลับ>
-
-
แฮนเดิล
void
ดำเนินกลยุทธ์คำขอและแสดงผล
Promise
ที่จะแปลค่าด้วยResponse
โดยเรียกใช้โค้ดเรียกกลับของปลั๊กอินที่เกี่ยวข้องทั้งหมดเมื่อลงทะเบียนอินสแตนซ์กลยุทธ์กับ Workbox
workbox-routing.Route
ระบบจะเรียกใช้เมธอดนี้โดยอัตโนมัติเมื่อเส้นทางตรงกันหรือคุณจะใช้วิธีนี้ในตัวฟัง
FetchEvent
แบบสแตนด์อโลนได้โดยส่งผ่านไปยังevent.respondWith()
ฟังก์ชัน
handle
มีลักษณะดังนี้(options: FetchEvent | HandlerCallbackOptions) => {...}
-
ตัวเลือก
FetchEvent | HandlerCallbackOptions
FetchEvent
หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ในรายการด้านล่าง
-
returns
สัญญา<การตอบกลับ>
-
-
handleAll
void
คล้ายกับ
workbox-strategies.Strategy~handle
แต่แทนที่จะแสดงผลPromise
ที่แปลค่าเป็นResponse
ระบบจะแสดงผล Tuple ของ[response, done]
สัญญา โดยรายการแรก (response
) เทียบเท่ากับสิ่งที่handle()
ส่งคืน และคำหลังคือคำสัญญาที่จะแก้ไขปัญหาเมื่อคำสัญญาที่เพิ่มลงในevent.waitUntil()
ซึ่งเป็นส่วนหนึ่งของการทำตามกลยุทธ์เสร็จสมบูรณ์แล้วรอให้กลยุทธ์
done
ทำงานเพิ่มเติมได้สำเร็จ (โดยปกติแล้วการแคชคำตอบ)ฟังก์ชัน
handleAll
มีลักษณะดังนี้(options: FetchEvent | HandlerCallbackOptions) => {...}
-
ตัวเลือก
FetchEvent | HandlerCallbackOptions
FetchEvent
หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ในรายการด้านล่าง
-
returns
[Promise<Response>, Promise<void>]
แพ็กเกจของ [response, Done] คำสัญญาที่สามารถใช้กำหนดได้ว่าการตอบกลับจะได้รับการแก้ไขเมื่อใด เช่นเดียวกับเมื่อตัวแฮนเดิลทำงานทั้งหมดเสร็จสิ้น
-
NetworkFirst
การใช้กลยุทธ์ คำขอเครือข่ายมาก่อน
โดยค่าเริ่มต้น กลยุทธ์นี้จะแคชการตอบกลับที่มีรหัสสถานะ 200 รวมถึงการตอบกลับที่ไม่ชัดเจน การตอบกลับที่ไม่ชัดเจนคือคำขอแบบข้ามต้นทางที่การตอบกลับไม่รองรับ CORS
หากคำขอเครือข่ายไม่สำเร็จและไม่มีแคชที่ตรงกัน การดำเนินการนี้จะทำให้ระบบแสดงข้อผิดพลาด WorkboxError
พร็อพเพอร์ตี้
-
เครื่องมือสร้าง
void
ฟังก์ชัน
constructor
มีลักษณะดังนี้(options?: NetworkFirstOptions) => {...}
-
ตัวเลือก
NetworkFirstOptions ไม่บังคับ
-
returns
-
-
cacheName
string
-
fetchOptions
RequestInit ไม่บังคับ
-
matchOptions
CacheQueryOptions ไม่บังคับ
-
ปลั๊กอิน
-
_awaitComplete
void
ฟังก์ชัน
_awaitComplete
มีลักษณะดังนี้(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
สัญญา<การตอบกลับ>
-
ตัวแฮนเดิล
-
ส่งคำขอ
ส่งคำขอ
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
ฟังก์ชัน
_getResponse
มีลักษณะดังนี้(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
ตัวแฮนเดิล
-
ส่งคำขอ
ส่งคำขอ
-
event
ExtendableEvent
-
returns
สัญญา<การตอบกลับ>
-
-
แฮนเดิล
void
ดำเนินกลยุทธ์คำขอและแสดงผล
Promise
ที่จะแปลค่าด้วยResponse
โดยเรียกใช้โค้ดเรียกกลับของปลั๊กอินที่เกี่ยวข้องทั้งหมดเมื่อลงทะเบียนอินสแตนซ์กลยุทธ์กับ Workbox
workbox-routing.Route
ระบบจะเรียกใช้เมธอดนี้โดยอัตโนมัติเมื่อเส้นทางตรงกันหรือคุณจะใช้วิธีนี้ในตัวฟัง
FetchEvent
แบบสแตนด์อโลนได้โดยส่งผ่านไปยังevent.respondWith()
ฟังก์ชัน
handle
มีลักษณะดังนี้(options: FetchEvent | HandlerCallbackOptions) => {...}
-
ตัวเลือก
FetchEvent | HandlerCallbackOptions
FetchEvent
หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ในรายการด้านล่าง
-
returns
สัญญา<การตอบกลับ>
-
-
handleAll
void
คล้ายกับ
workbox-strategies.Strategy~handle
แต่แทนที่จะแสดงผลPromise
ที่แปลค่าเป็นResponse
ระบบจะแสดงผล Tuple ของ[response, done]
สัญญา โดยรายการแรก (response
) เทียบเท่ากับสิ่งที่handle()
ส่งคืน และคำหลังคือคำสัญญาที่จะแก้ไขปัญหาเมื่อคำสัญญาที่เพิ่มลงในevent.waitUntil()
ซึ่งเป็นส่วนหนึ่งของการทำตามกลยุทธ์เสร็จสมบูรณ์แล้วรอให้กลยุทธ์
done
ทำงานเพิ่มเติมได้สำเร็จ (โดยปกติแล้วการแคชคำตอบ)ฟังก์ชัน
handleAll
มีลักษณะดังนี้(options: FetchEvent | HandlerCallbackOptions) => {...}
-
ตัวเลือก
FetchEvent | HandlerCallbackOptions
FetchEvent
หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ในรายการด้านล่าง
-
returns
[Promise<Response>, Promise<void>]
แพ็กเกจของ [response, Done] คำสัญญาที่สามารถใช้กำหนดได้ว่าการตอบกลับจะได้รับการแก้ไขเมื่อใด เช่นเดียวกับเมื่อตัวแฮนเดิลทำงานทั้งหมดเสร็จสิ้น
-
NetworkFirstOptions
พร็อพเพอร์ตี้
-
cacheName
string ไม่บังคับ
-
fetchOptions
RequestInit ไม่บังคับ
-
matchOptions
CacheQueryOptions ไม่บังคับ
-
networkTimeoutSeconds
ตัวเลข ไม่บังคับ
-
ปลั๊กอิน
WorkboxPlugin[] ไม่บังคับ
NetworkOnly
การใช้กลยุทธ์คำขอเครือข่ายเท่านั้น
คลาสนี้จะเป็นประโยชน์หากคุณต้องการใช้ประโยชน์จากปลั๊กอินของ Workbox
หากคำขอเครือข่ายไม่สำเร็จ ระบบจะแสดงข้อผิดพลาด WorkboxError
พร็อพเพอร์ตี้
-
เครื่องมือสร้าง
void
ฟังก์ชัน
constructor
มีลักษณะดังนี้(options?: NetworkOnlyOptions) => {...}
-
ตัวเลือก
NetworkOnlyOptions ไม่บังคับ
-
returns
-
-
cacheName
string
-
fetchOptions
RequestInit ไม่บังคับ
-
matchOptions
CacheQueryOptions ไม่บังคับ
-
ปลั๊กอิน
-
_awaitComplete
void
ฟังก์ชัน
_awaitComplete
มีลักษณะดังนี้(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
สัญญา<การตอบกลับ>
-
ตัวแฮนเดิล
-
ส่งคำขอ
ส่งคำขอ
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
ฟังก์ชัน
_getResponse
มีลักษณะดังนี้(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
ตัวแฮนเดิล
-
ส่งคำขอ
ส่งคำขอ
-
event
ExtendableEvent
-
returns
สัญญา<การตอบกลับ>
-
-
แฮนเดิล
void
ดำเนินกลยุทธ์คำขอและแสดงผล
Promise
ที่จะแปลค่าด้วยResponse
โดยเรียกใช้โค้ดเรียกกลับของปลั๊กอินที่เกี่ยวข้องทั้งหมดเมื่อลงทะเบียนอินสแตนซ์กลยุทธ์กับ Workbox
workbox-routing.Route
ระบบจะเรียกใช้เมธอดนี้โดยอัตโนมัติเมื่อเส้นทางตรงกันหรือคุณจะใช้วิธีนี้ในตัวฟัง
FetchEvent
แบบสแตนด์อโลนได้โดยส่งผ่านไปยังevent.respondWith()
ฟังก์ชัน
handle
มีลักษณะดังนี้(options: FetchEvent | HandlerCallbackOptions) => {...}
-
ตัวเลือก
FetchEvent | HandlerCallbackOptions
FetchEvent
หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ในรายการด้านล่าง
-
returns
สัญญา<การตอบกลับ>
-
-
handleAll
void
คล้ายกับ
workbox-strategies.Strategy~handle
แต่แทนที่จะแสดงผลPromise
ที่แปลค่าเป็นResponse
ระบบจะแสดงผล Tuple ของ[response, done]
สัญญา โดยรายการแรก (response
) เทียบเท่ากับสิ่งที่handle()
ส่งคืน และคำหลังคือคำสัญญาที่จะแก้ไขปัญหาเมื่อคำสัญญาที่เพิ่มลงในevent.waitUntil()
ซึ่งเป็นส่วนหนึ่งของการทำตามกลยุทธ์เสร็จสมบูรณ์แล้วรอให้กลยุทธ์
done
ทำงานเพิ่มเติมได้สำเร็จ (โดยปกติแล้วการแคชคำตอบ)ฟังก์ชัน
handleAll
มีลักษณะดังนี้(options: FetchEvent | HandlerCallbackOptions) => {...}
-
ตัวเลือก
FetchEvent | HandlerCallbackOptions
FetchEvent
หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ในรายการด้านล่าง
-
returns
[Promise<Response>, Promise<void>]
แพ็กเกจของ [response, Done] คำสัญญาที่สามารถใช้กำหนดได้ว่าการตอบกลับจะได้รับการแก้ไขเมื่อใด เช่นเดียวกับเมื่อตัวแฮนเดิลทำงานทั้งหมดเสร็จสิ้น
-
NetworkOnlyOptions
พร็อพเพอร์ตี้
-
fetchOptions
RequestInit ไม่บังคับ
-
networkTimeoutSeconds
ตัวเลข ไม่บังคับ
-
ปลั๊กอิน
WorkboxPlugin[] ไม่บังคับ
StaleWhileRevalidate
การใช้กลยุทธ์คำขอไม่มีอัปเดตขณะตรวจสอบใหม่
มีการขอทรัพยากรจากทั้งแคชและเครือข่ายพร้อมๆ กัน กลยุทธ์จะตอบสนองด้วยเวอร์ชันแคช (หากมี) หรือรอการตอบกลับของเครือข่าย แคชจะอัปเดตตามการตอบสนองของเครือข่ายที่มีคำขอที่สำเร็จแต่ละครั้ง
โดยค่าเริ่มต้น กลยุทธ์นี้จะแคชการตอบกลับที่มีรหัสสถานะ 200 รวมถึงการตอบกลับที่ไม่ชัดเจน การตอบกลับที่ไม่ชัดเจนคือคำขอแบบข้ามต้นทางที่การตอบกลับไม่รองรับ CORS
หากคำขอเครือข่ายไม่สำเร็จและไม่มีแคชที่ตรงกัน การดำเนินการนี้จะทำให้ระบบแสดงข้อผิดพลาด WorkboxError
พร็อพเพอร์ตี้
-
เครื่องมือสร้าง
void
ฟังก์ชัน
constructor
มีลักษณะดังนี้(options?: StrategyOptions) => {...}
-
ตัวเลือก
StrategyOptions ไม่บังคับ
-
returns
-
-
cacheName
string
-
fetchOptions
RequestInit ไม่บังคับ
-
matchOptions
CacheQueryOptions ไม่บังคับ
-
ปลั๊กอิน
-
_awaitComplete
void
ฟังก์ชัน
_awaitComplete
มีลักษณะดังนี้(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
สัญญา<การตอบกลับ>
-
ตัวแฮนเดิล
-
ส่งคำขอ
ส่งคำขอ
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
ฟังก์ชัน
_getResponse
มีลักษณะดังนี้(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
ตัวแฮนเดิล
-
ส่งคำขอ
ส่งคำขอ
-
event
ExtendableEvent
-
returns
สัญญา<การตอบกลับ>
-
-
แฮนเดิล
void
ดำเนินกลยุทธ์คำขอและแสดงผล
Promise
ที่จะแปลค่าด้วยResponse
โดยเรียกใช้โค้ดเรียกกลับของปลั๊กอินที่เกี่ยวข้องทั้งหมดเมื่อลงทะเบียนอินสแตนซ์กลยุทธ์กับ Workbox
workbox-routing.Route
ระบบจะเรียกใช้เมธอดนี้โดยอัตโนมัติเมื่อเส้นทางตรงกันหรือคุณจะใช้วิธีนี้ในตัวฟัง
FetchEvent
แบบสแตนด์อโลนได้โดยส่งผ่านไปยังevent.respondWith()
ฟังก์ชัน
handle
มีลักษณะดังนี้(options: FetchEvent | HandlerCallbackOptions) => {...}
-
ตัวเลือก
FetchEvent | HandlerCallbackOptions
FetchEvent
หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ในรายการด้านล่าง
-
returns
สัญญา<การตอบกลับ>
-
-
handleAll
void
คล้ายกับ
workbox-strategies.Strategy~handle
แต่แทนที่จะแสดงผลPromise
ที่แปลค่าเป็นResponse
ระบบจะแสดงผล Tuple ของ[response, done]
สัญญา โดยรายการแรก (response
) เทียบเท่ากับสิ่งที่handle()
ส่งคืน และคำหลังคือคำสัญญาที่จะแก้ไขปัญหาเมื่อคำสัญญาที่เพิ่มลงในevent.waitUntil()
ซึ่งเป็นส่วนหนึ่งของการทำตามกลยุทธ์เสร็จสมบูรณ์แล้วรอให้กลยุทธ์
done
ทำงานเพิ่มเติมได้สำเร็จ (โดยปกติแล้วการแคชคำตอบ)ฟังก์ชัน
handleAll
มีลักษณะดังนี้(options: FetchEvent | HandlerCallbackOptions) => {...}
-
ตัวเลือก
FetchEvent | HandlerCallbackOptions
FetchEvent
หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ในรายการด้านล่าง
-
returns
[Promise<Response>, Promise<void>]
แพ็กเกจของ [response, Done] คำสัญญาที่สามารถใช้กำหนดได้ว่าการตอบกลับจะได้รับการแก้ไขเมื่อใด เช่นเดียวกับเมื่อตัวแฮนเดิลทำงานทั้งหมดเสร็จสิ้น
-
Strategy
คลาสพื้นฐานนามธรรมที่คลาสกลยุทธ์อื่นๆ ทั้งหมดต้องต่อยอดมาจาก
พร็อพเพอร์ตี้
-
เครื่องมือสร้าง
void
สร้างอินสแตนซ์ใหม่ของกลยุทธ์และตั้งค่าพร็อพเพอร์ตี้ตัวเลือกที่บันทึกไว้ทั้งหมดเป็นพร็อพเพอร์ตี้อินสแตนซ์สาธารณะ
หมายเหตุ: หากคลาสกลยุทธ์ที่กำหนดเองขยายคลาสกลยุทธ์พื้นฐาน และไม่จำเป็นต้องใช้พร็อพเพอร์ตี้มากกว่านี้ คุณก็ไม่จำเป็นต้องกำหนดตัวสร้างของตัวเอง
ฟังก์ชัน
constructor
มีลักษณะดังนี้(options?: StrategyOptions) => {...}
-
ตัวเลือก
StrategyOptions ไม่บังคับ
-
returns
-
-
cacheName
string
-
fetchOptions
RequestInit ไม่บังคับ
-
matchOptions
CacheQueryOptions ไม่บังคับ
-
ปลั๊กอิน
-
_awaitComplete
void
ฟังก์ชัน
_awaitComplete
มีลักษณะดังนี้(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
สัญญา<การตอบกลับ>
-
ตัวแฮนเดิล
-
ส่งคำขอ
ส่งคำขอ
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
ฟังก์ชัน
_getResponse
มีลักษณะดังนี้(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
ตัวแฮนเดิล
-
ส่งคำขอ
ส่งคำขอ
-
event
ExtendableEvent
-
returns
สัญญา<การตอบกลับ>
-
-
แฮนเดิล
void
ฟังก์ชัน
_handle
มีลักษณะดังนี้(request: Request, handler: StrategyHandler) => {...}
-
ส่งคำขอ
ส่งคำขอ
-
ตัวแฮนเดิล
-
returns
สัญญา<การตอบกลับ>
-
-
แฮนเดิล
void
ดำเนินกลยุทธ์คำขอและแสดงผล
Promise
ที่จะแปลค่าด้วยResponse
โดยเรียกใช้โค้ดเรียกกลับของปลั๊กอินที่เกี่ยวข้องทั้งหมดเมื่อลงทะเบียนอินสแตนซ์กลยุทธ์กับ Workbox
workbox-routing.Route
ระบบจะเรียกใช้เมธอดนี้โดยอัตโนมัติเมื่อเส้นทางตรงกันหรือคุณจะใช้วิธีนี้ในตัวฟัง
FetchEvent
แบบสแตนด์อโลนได้โดยส่งผ่านไปยังevent.respondWith()
ฟังก์ชัน
handle
มีลักษณะดังนี้(options: FetchEvent | HandlerCallbackOptions) => {...}
-
ตัวเลือก
FetchEvent | HandlerCallbackOptions
FetchEvent
หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ในรายการด้านล่าง
-
returns
สัญญา<การตอบกลับ>
-
-
handleAll
void
คล้ายกับ
workbox-strategies.Strategy~handle
แต่แทนที่จะแสดงผลPromise
ที่แปลค่าเป็นResponse
ระบบจะแสดงผล Tuple ของ[response, done]
สัญญา โดยรายการแรก (response
) เทียบเท่ากับสิ่งที่handle()
ส่งคืน และคำหลังคือคำสัญญาที่จะแก้ไขปัญหาเมื่อคำสัญญาที่เพิ่มลงในevent.waitUntil()
ซึ่งเป็นส่วนหนึ่งของการทำตามกลยุทธ์เสร็จสมบูรณ์แล้วรอให้กลยุทธ์
done
ทำงานเพิ่มเติมได้สำเร็จ (โดยปกติแล้วการแคชคำตอบ)ฟังก์ชัน
handleAll
มีลักษณะดังนี้(options: FetchEvent | HandlerCallbackOptions) => {...}
-
ตัวเลือก
FetchEvent | HandlerCallbackOptions
FetchEvent
หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ในรายการด้านล่าง
-
returns
[Promise<Response>, Promise<void>]
แพ็กเกจของ [response, Done] คำสัญญาที่สามารถใช้กำหนดได้ว่าการตอบกลับจะได้รับการแก้ไขเมื่อใด เช่นเดียวกับเมื่อตัวแฮนเดิลทำงานทั้งหมดเสร็จสิ้น
-
StrategyHandler
คลาสที่สร้างขึ้นทุกครั้งที่อินสแตนซ์ Strategy เรียกใช้ workbox-strategies.Strategy~handle
หรือ workbox-strategies.Strategy~handleAll
ซึ่งรวมการดึงข้อมูลและแคชการดำเนินการทั้งหมดเกี่ยวกับโค้ดเรียกกลับของปลั๊กอิน และคอยติดตามว่ากลยุทธ์ "เสร็จสิ้น" เมื่อใด (นั่นคือ สัญญา event.waitUntil()
ที่เพิ่มเข้ามาทั้งหมดได้รับการแก้ไขแล้ว)
พร็อพเพอร์ตี้
-
เครื่องมือสร้าง
void
สร้างอินสแตนซ์ใหม่ที่เชื่อมโยงกับกลยุทธ์และเหตุการณ์ที่ส่งซึ่งจัดการคำขอ
ตัวสร้างยังเริ่มต้นสถานะที่จะส่งไปยังปลั๊กอินแต่ละรายการที่จัดการคำขอนี้
ฟังก์ชัน
constructor
มีลักษณะดังนี้(strategy: Strategy, options: HandlerCallbackOptions) => {...}
-
กลยุทธ์
-
ตัวเลือก
-
returns
-
-
event
ExtendableEvent
-
params
รายการใดก็ได้ ไม่บังคับ
-
ส่งคำขอ
ส่งคำขอ
-
url
URL ไม่บังคับ
-
cacheMatch
void
จับคู่คำขอจากแคช (และเรียกใช้วิธีการเรียกกลับของปลั๊กอินที่เกี่ยวข้อง) โดยใช้
cacheName
,matchOptions
และplugins
ที่กำหนดไว้ในออบเจ็กต์กลยุทธ์ระบบจะเรียกใช้เมธอดวงจรปลั๊กอินต่อไปนี้เมื่อใช้เมธอดนี้
- cacheKeyWillByUsed()
- cachedResponseWillByUsed()
ฟังก์ชัน
cacheMatch
มีลักษณะดังนี้(key: RequestInfo) => {...}
-
แป้น
RequestInfo
คำขอหรือ URL ที่จะใช้เป็นคีย์แคช
-
returns
สัญญา<การตอบกลับ>
คำตอบที่ตรงกัน หากพบ
-
cachePut
void
ใส่คู่คำขอ/คำตอบในแคช (และเรียกใช้เมธอดโค้ดเรียกกลับของปลั๊กอินที่เกี่ยวข้อง) โดยใช้
cacheName
และplugins
ที่กำหนดไว้ในออบเจ็กต์กลยุทธ์ระบบจะเรียกใช้เมธอดวงจรปลั๊กอินต่อไปนี้เมื่อใช้เมธอดนี้
- cacheKeyWillByUsed()
- cacheWillUpdate()
- cacheDidUpdate()
ฟังก์ชัน
cachePut
มีลักษณะดังนี้(key: RequestInfo, response: Response) => {...}
-
แป้น
RequestInfo
คำขอหรือ URL ที่จะใช้เป็นคีย์แคช
-
การตอบกลับ
คำตอบ
การตอบสนองต่อแคช
-
returns
Promise<boolean>
false
หาก cacheWillUpdate ทำให้ระบบไม่แคชการตอบกลับ หรือtrue
ในกรณีอื่นๆ
-
destroy
void
หยุดการทำงานของกลยุทธ์และแก้ปัญหาสัญญา
waitUntil()
ที่รอดำเนินการทันทีฟังก์ชัน
destroy
มีลักษณะดังนี้() => {...}
-
doneWaiting
void
แสดงผลสัญญาที่แก้ไขเมื่อสัญญาทั้งหมดที่ส่งผ่านไปยัง
workbox-strategies.StrategyHandler~waitUntil
ได้รับการแก้ไขแล้วหมายเหตุ: งานที่ดำเนินการหลังจากการชำระเงิน
doneWaiting()
ควรส่งผ่านด้วยตนเองไปยังเมธอดwaitUntil()
ของเหตุการณ์ (ไม่ใช่เมธอดwaitUntil()
ของเครื่องจัดการนี้) มิฉะนั้นโปรแกรมทำงานของบริการจะถูกหยุดการทำงานก่อนที่งานของคุณจะเสร็จสิ้นฟังก์ชัน
doneWaiting
มีลักษณะดังนี้() => {...}
-
returns
Promise<void>
-
-
fetch
void
ดึงข้อมูลคำขอที่ระบุ (และเรียกใช้วิธีการเรียกกลับของปลั๊กอินที่เกี่ยวข้อง) โดยใช้
fetchOptions
(สำหรับคำขอที่ไม่ใช่การนำทาง) และplugins
ที่กำหนดไว้ในออบเจ็กต์Strategy
ระบบจะเรียกใช้เมธอดวงจรปลั๊กอินต่อไปนี้เมื่อใช้เมธอดนี้
requestWillFetch()
fetchDidSucceed()
fetchDidFail()
ฟังก์ชัน
fetch
มีลักษณะดังนี้(input: RequestInfo) => {...}
-
อินพุต
RequestInfo
URL หรือคำขอที่จะดึงข้อมูล
-
returns
สัญญา<การตอบกลับ>
-
fetchAndCachePut
void
การเรียกใช้
this.fetch()
และ (ในเบื้องหลัง) จะทำงานthis.cachePut()
ในคำตอบที่สร้างโดยthis.fetch()
การเรียก
this.cachePut()
จะเรียกใช้this.waitUntil()
โดยอัตโนมัติ คุณจึงไม่ต้องเรียกwaitUntil()
ในเหตุการณ์ด้วยตนเองฟังก์ชัน
fetchAndCachePut
มีลักษณะดังนี้(input: RequestInfo) => {...}
-
อินพุต
RequestInfo
คำขอหรือ URL ที่จะดึงข้อมูลและแคช
-
returns
สัญญา<การตอบกลับ>
-
-
getCacheKey
void
ตรวจสอบรายการปลั๊กอินสำหรับโค้ดเรียกกลับ
cacheKeyWillBeUsed
และเรียกใช้โค้ดเรียกกลับที่พบตามลำดับ ออบเจ็กต์Request
สุดท้ายที่ปลั๊กอินล่าสุดแสดงผลจะถือเป็นคีย์แคชสำหรับการอ่านและ/หรือการเขียนแคช หากไม่ได้ลงทะเบียนโค้ดเรียกกลับของปลั๊กอินcacheKeyWillBeUsed
ไว้ คำขอที่ส่งผ่านจะถูกส่งคืนโดยไม่มีการแก้ไขฟังก์ชัน
getCacheKey
มีลักษณะดังนี้(request: Request, mode: "read"
| "write"
) => {...}-
ส่งคำขอ
ส่งคำขอ
-
โหมด
-
returns
คำมั่นสัญญา<คำขอ>
-
-
hasCallback
void
แสดงผลเป็น "จริง" หากกลยุทธ์มีปลั๊กอินอย่างน้อย 1 รายการที่มีโค้ดเรียกกลับที่ระบุ
ฟังก์ชัน
hasCallback
มีลักษณะดังนี้(name: C) => {...}
-
ชื่อ
C
ชื่อของโค้ดเรียกกลับที่ต้องการตรวจสอบ
-
returns
boolean
-
-
iterateCallbacks
void
ยอมรับโค้ดเรียกกลับและแสดงผลการเรียกกลับของปลั๊กอินที่ตรงกันซึ่งสามารถทำซ้ำได้ โดยโค้ดเรียกกลับแต่ละรายการจะรวมกันด้วยสถานะตัวแฮนเดิลปัจจุบัน (กล่าวคือ เมื่อคุณเรียกโค้ดเรียกกลับแต่ละครั้ง พารามิเตอร์ออบเจ็กต์ใดก็ตามที่คุณส่งจะนำไปรวมกับสถานะปัจจุบันของปลั๊กอิน)
ฟังก์ชัน
iterateCallbacks
มีลักษณะดังนี้(name: C) => {...}
-
ชื่อ
C
ชื่อสำหรับการเรียกกลับที่จะเรียกใช้
-
returns
ตัวสร้าง<NonNullable<indexedAccess>anyunknown>
-
-
runCallbacks
void
เรียกใช้โค้ดเรียกกลับของปลั๊กอินทั้งหมดที่ตรงกับชื่อที่ระบุตามลำดับ โดยส่งผ่านออบเจ็กต์พารามิเตอร์ที่ระบุ (ผสานรวมสถานะปลั๊กอินปัจจุบัน) เป็นอาร์กิวเมนต์เดียว
หมายเหตุ: เนื่องจากวิธีนี้จะเรียกใช้ปลั๊กอินทั้งหมด จึงไม่เหมาะกับกรณีที่ต้องใช้ค่าการส่งกลับมาก่อนการเรียกกลับถัดไป ดูวิธีจัดการเคสดังกล่าวได้
workbox-strategies.StrategyHandler#iterateCallbacks
ด้านล่างฟังก์ชัน
runCallbacks
มีลักษณะดังนี้(name: C, param: Omit<indexedAccess"state"
>) => {...}-
ชื่อ
C
ชื่อของโค้ดเรียกกลับที่จะเรียกใช้ภายในปลั๊กอินแต่ละรายการ
-
พารามิเตอร์
ละเว้น<indexedAccess"state"
>ออบเจ็กต์ที่จะส่งเป็นพารามิเตอร์แรก (เท่านั้น) เมื่อเรียกใช้โค้ดเรียกกลับแต่ละรายการ ออบเจ็กต์นี้จะผสานกับสถานะปลั๊กอินปัจจุบันก่อนเรียกใช้โค้ดเรียกกลับ
-
returns
Promise<void>
-
-
waitUntil
void
เพิ่มคำมั่นสัญญาใน [extendLifetimeสำหรับการยืนยัน]
https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises
ของเหตุการณ์เหตุการณ์ซึ่งเชื่อมโยงกับคำขอที่กำลังจัดการ (โดยปกติจะเป็นFetchEvent
)หมายเหตุ: คุณสามารถรอให้
workbox-strategies.StrategyHandler~doneWaiting
ทราบว่าสัญญาที่เพิ่มเข้ามาทั้งหมดตกลงได้แล้วฟังก์ชัน
waitUntil
มีลักษณะดังนี้(promise: Promise<T>) => {...}
-
สัญญา
Promise<T>
คำสัญญาว่าจะเพิ่มระยะเวลาการใช้งาน สัญญาเหตุการณ์ที่ทำให้เกิดคำขอ
-
returns
Promise<T>
-
StrategyOptions
พร็อพเพอร์ตี้
-
cacheName
string ไม่บังคับ
-
fetchOptions
RequestInit ไม่บังคับ
-
matchOptions
CacheQueryOptions ไม่บังคับ
-
ปลั๊กอิน
WorkboxPlugin[] ไม่บังคับ