หน้านี้ได้รับการแปลโดย Cloud Translation API

กลยุทธ์กล่องงาน

เมื่อเริ่มใช้โปรแกรมทำงานของบริการเป็นครั้งแรก ชุดกลยุทธ์การแคชที่พบบ่อยก็เกิดขึ้น กลยุทธ์การแคชเป็นรูปแบบที่กำหนดวิธีที่ 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 จะมาพร้อมกับชุดปลั๊กอินที่สามารถใช้กับกลยุทธ์เหล่านี้

หากต้องการใช้ปลั๊กอินเหล่านี้ (หรือปลั๊กอินที่กำหนดเอง) คุณเพียงแค่ส่งผ่านอินสแตนซ์ไปยังตัวเลือก 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() ที่รอดำเนินการทันที

หมายเหตุ: โปรดดูการใช้งานแหล่งที่มาของ StrategyHandler เพื่อดูพารามิเตอร์ทั้งหมดที่การดำเนินการแต่ละรายการยอมรับ

กลยุทธ์การแข่งขันของเครือข่ายแคชที่กำหนดเอง

ตัวอย่างต่อไปนี้อิงตาม 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
  CacheFirst
cacheName

string
fetchOptions

RequestInit ไม่บังคับ
matchOptions

CacheQueryOptions ไม่บังคับ
ปลั๊กอิน

WorkboxPlugin[]
_awaitComplete

void

ฟังก์ชัน _awaitComplete มีลักษณะดังนี้
```
(responseDone: Promise<Response>,handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}
```
- responseDone
  
  สัญญา<การตอบกลับ>
- ตัวแฮนเดิล
  
  StrategyHandler
- ส่งคำขอ
  
  ส่งคำขอ
- เหตุการณ์
  
  ExtendableEvent
- returns
  Promise<void>
_getResponse

void

ฟังก์ชัน _getResponse มีลักษณะดังนี้
```
(handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}
```
- ตัวแฮนเดิล
  
  StrategyHandler
- ส่งคำขอ
  
  ส่งคำขอ
- เหตุการณ์
  
  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
  CacheOnly
cacheName

string
fetchOptions

RequestInit ไม่บังคับ
matchOptions

CacheQueryOptions ไม่บังคับ
ปลั๊กอิน

WorkboxPlugin[]
_awaitComplete

void

ฟังก์ชัน _awaitComplete มีลักษณะดังนี้
```
(responseDone: Promise<Response>,handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}
```
- responseDone
  
  สัญญา<การตอบกลับ>
- ตัวแฮนเดิล
  
  StrategyHandler
- ส่งคำขอ
  
  ส่งคำขอ
- เหตุการณ์
  
  ExtendableEvent
- returns
  Promise<void>
_getResponse

void

ฟังก์ชัน _getResponse มีลักษณะดังนี้
```
(handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}
```
- ตัวแฮนเดิล
  
  StrategyHandler
- ส่งคำขอ
  
  ส่งคำขอ
- เหตุการณ์
  
  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

พร็อพเพอร์ตี้

เครื่องมือสร้าง

void

ฟังก์ชัน constructor มีลักษณะดังนี้
```
(options?: NetworkFirstOptions)=> {...}
```
- ตัวเลือก
  
  NetworkFirstOptions ไม่บังคับ
- returns
  NetworkFirst
cacheName

string
fetchOptions

RequestInit ไม่บังคับ
matchOptions

CacheQueryOptions ไม่บังคับ
ปลั๊กอิน

WorkboxPlugin[]
_awaitComplete

void

ฟังก์ชัน _awaitComplete มีลักษณะดังนี้
```
(responseDone: Promise<Response>,handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}
```
- responseDone
  
  สัญญา<การตอบกลับ>
- ตัวแฮนเดิล
  
  StrategyHandler
- ส่งคำขอ
  
  ส่งคำขอ
- เหตุการณ์
  
  ExtendableEvent
- returns
  Promise<void>
_getResponse

void

ฟังก์ชัน _getResponse มีลักษณะดังนี้
```
(handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}
```
- ตัวแฮนเดิล
  
  StrategyHandler
- ส่งคำขอ
  
  ส่งคำขอ
- เหตุการณ์
  
  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
  NetworkOnly
cacheName

string
fetchOptions

RequestInit ไม่บังคับ
matchOptions

CacheQueryOptions ไม่บังคับ
ปลั๊กอิน

WorkboxPlugin[]
_awaitComplete

void

ฟังก์ชัน _awaitComplete มีลักษณะดังนี้
```
(responseDone: Promise<Response>,handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}
```
- responseDone
  
  สัญญา<การตอบกลับ>
- ตัวแฮนเดิล
  
  StrategyHandler
- ส่งคำขอ
  
  ส่งคำขอ
- เหตุการณ์
  
  ExtendableEvent
- returns
  Promise<void>
_getResponse

void

ฟังก์ชัน _getResponse มีลักษณะดังนี้
```
(handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}
```
- ตัวแฮนเดิล
  
  StrategyHandler
- ส่งคำขอ
  
  ส่งคำขอ
- เหตุการณ์
  
  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

การใช้กลยุทธ์คำขอไม่มีอัปเดตขณะตรวจสอบใหม่

มีการขอทรัพยากรจากทั้งแคชและเครือข่ายพร้อมๆ กัน กลยุทธ์จะตอบสนองด้วยเวอร์ชันแคช (หากมี) หรือรอการตอบกลับของเครือข่าย แคชจะอัปเดตตามการตอบสนองของเครือข่ายที่มีคำขอที่สำเร็จแต่ละครั้ง

พร็อพเพอร์ตี้

เครื่องมือสร้าง

void

ฟังก์ชัน constructor มีลักษณะดังนี้
```
(options?: StrategyOptions)=> {...}
```
- ตัวเลือก
  
  StrategyOptions ไม่บังคับ
- returns
  StaleWhileRevalidate
cacheName

string
fetchOptions

RequestInit ไม่บังคับ
matchOptions

CacheQueryOptions ไม่บังคับ
ปลั๊กอิน

WorkboxPlugin[]
_awaitComplete

void

ฟังก์ชัน _awaitComplete มีลักษณะดังนี้
```
(responseDone: Promise<Response>,handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}
```
- responseDone
  
  สัญญา<การตอบกลับ>
- ตัวแฮนเดิล
  
  StrategyHandler
- ส่งคำขอ
  
  ส่งคำขอ
- เหตุการณ์
  
  ExtendableEvent
- returns
  Promise<void>
_getResponse

void

ฟังก์ชัน _getResponse มีลักษณะดังนี้
```
(handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}
```
- ตัวแฮนเดิล
  
  StrategyHandler
- ส่งคำขอ
  
  ส่งคำขอ
- เหตุการณ์
  
  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 ไม่บังคับ
ปลั๊กอิน

WorkboxPlugin[]
_awaitComplete

void

ฟังก์ชัน _awaitComplete มีลักษณะดังนี้
```
(responseDone: Promise<Response>,handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}
```
- responseDone
  
  สัญญา<การตอบกลับ>
- ตัวแฮนเดิล
  
  StrategyHandler
- ส่งคำขอ
  
  ส่งคำขอ
- เหตุการณ์
  
  ExtendableEvent
- returns
  Promise<void>
_getResponse

void

ฟังก์ชัน _getResponse มีลักษณะดังนี้
```
(handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}
```
- ตัวแฮนเดิล
  
  StrategyHandler
- ส่งคำขอ
  
  ส่งคำขอ
- เหตุการณ์
  
  ExtendableEvent
- returns
  สัญญา<การตอบกลับ>
แฮนเดิล

void

ฟังก์ชัน _handle มีลักษณะดังนี้
```
(request: Request,handler: StrategyHandler)=> {...}
```
- ส่งคำขอ
  
  ส่งคำขอ
- ตัวแฮนเดิล
  
  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)=> {...}
```
- ยุทธศาสตร์
  
  กลยุทธ์
- ตัวเลือก
  
  HandlerCallbackOptions
- returns
  StrategyHandler
เหตุการณ์

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[] ไม่บังคับ