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

เมื่อมีการเปิดตัว Service Worker เป็นครั้งแรก ก็เกิดกลยุทธ์การแคชทั่วไปขึ้น กลยุทธ์การแคชคือรูปแบบที่กําหนดวิธีให้บริการของ Service Worker สร้างการตอบกลับหลังจากได้รับเหตุการณ์การดึงข้อมูล

workbox-strategies มีกลยุทธ์การแคชที่ใช้กันมากที่สุดเพื่อให้คุณนำไปใช้ใน Service Worker ได้โดยง่าย

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

การใช้กลยุทธ์

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

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

Stale-While-Revalidate

ล้าสมัยขณะตรวจสอบแผนภาพอีกครั้ง

รูปแบบ stale-while-revalidate ช่วยให้คุณตอบกลับคำขอได้เร็วที่สุดด้วยคำตอบที่แคชไว้หากมี และกลับไปใช้คำขอเครือข่ายหากคำตอบไม่ได้แคชไว้ จากนั้นระบบจะใช้คําขอเครือข่ายเพื่ออัปเดตแคช ซึ่งต่างจากการใช้งานบางอย่างของ "ใช้ข้อมูลเก่าขณะตรวจสอบอีกครั้ง" เนื่องจากกลยุทธ์นี้จะส่งคำขอตรวจสอบอีกครั้งเสมอ ไม่ว่าคำตอบที่แคชไว้จะเก่าแค่ไหนก็ตาม

นี่เป็นกลยุทธ์ที่พบได้ทั่วไปซึ่งการมีทรัพยากรล่าสุดไม่สำคัญต่อแอปพลิเคชัน

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());

แคชเท่านั้น

แผนภาพแคชเท่านั้น

กลยุทธ์แคชเท่านั้นจะดึงข้อมูลการตอบกลับจากแคช ตัวเลือกนี้มีการใช้งานน้อยใน Workbox แต่อาจมีประโยชน์หากคุณมีขั้นตอนการแคชล่วงหน้าของคุณเอง

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: ใช้ Callback เป็นอินพุตและแสดงผลเป็น "จริง" หากกลยุทธ์มีพลูกินอย่างน้อย 1 รายการที่มี Callback ที่ระบุ
  • runCallbacks: เรียกใช้การเรียกกลับของปลั๊กอินทั้งหมดที่ตรงกับชื่อที่ระบุตามลําดับ โดยส่งออบเจ็กต์พารามิเตอร์ที่ระบุ (ผสานกับสถานะปลั๊กอินปัจจุบัน) เป็นอาร์กิวเมนต์เดียว
  • iterateCallbacks: ยอมรับการเรียกกลับและแสดงผลรายการที่วนซ้ำได้ของการเรียกกลับของปลั๊กอินที่ตรงกัน โดยที่การเรียกกลับแต่ละรายการจะรวมอยู่ในสถานะตัวแฮนเดิลปัจจุบัน (กล่าวคือ เมื่อคุณเรียกใช้การเรียกกลับแต่ละรายการ ระบบจะผสานพารามิเตอร์ออบเจ็กต์ที่คุณส่งกับสถานะปัจจุบันของปลั๊กอิน)
  • waitUntil: เพิ่มการสัญญาไปยังสัญญาตลอดอายุที่ขยายเวลาของเหตุการณ์ที่เชื่อมโยงกับคำขอที่จัดการอยู่ (โดยปกติจะเป็น FetchEvent)
  • doneWaiting: แสดงผลพรอมต์ที่แก้ไขเมื่อพรอมต์ทั้งหมดที่ส่งไปยัง waitUntil() ได้รับการแก้ไขแล้ว
  • destroy: หยุดใช้กลยุทธ์และแก้ไขwaitUntil()สัญญาที่รอดําเนินการอยู่ทันที

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

ตัวอย่างต่อไปนี้อิงตาม cache-network-race จากตำราอาหารแบบออฟไลน์ (ซึ่ง 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 Strategy

ประเภท

CacheFirst

การใช้กลยุทธ์คำขอใช้แคชก่อน

กลยุทธ์แคชก่อนมีประโยชน์สําหรับชิ้นงานที่แก้ไขแล้ว เช่น URL อย่างเช่น /styles/example.a8f5f1.css เนื่องจากสามารถแคชได้เป็นเวลานาน

หากคําขอเครือข่ายไม่สําเร็จและไม่มีรายการที่ตรงกันในแคช ระบบจะแสดงข้อยกเว้น WorkboxError

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

  • constructor

    โมฆะ

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

    หมายเหตุ: หากคลาสกลยุทธ์ที่กําหนดเองขยายคลาส Strategy พื้นฐานและไม่จำเป็นต้องใช้พร็อพเพอร์ตี้เพิ่มเติมจากเหล่านี้ ก็ไม่จำเป็นต้องกำหนดคอนสตรัคเตอร์ของตัวเอง

    ฟังก์ชัน constructor มีรูปแบบดังนี้ 

    (options?: StrategyOptions) => {...}

  • cacheName

    สตริง

  • fetchOptions

    RequestInit ไม่บังคับ

  • matchOptions

    CacheQueryOptions ไม่บังคับ

  • ปลั๊กอิน

    WorkboxPlugin[]

  • _awaitComplete

    โมฆะ

    ฟังก์ชัน _awaitComplete มีรูปแบบดังนี้ 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • แฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • เหตุการณ์

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    โมฆะ

    ฟังก์ชัน _getResponse มีรูปแบบดังนี้ 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • แฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • เหตุการณ์

      ExtendableEvent

    • returns

      Promise<Response>

  • แฮนเดิล

    โมฆะ

    ดำเนินการตามกลยุทธ์คำขอและแสดงผล Promise ที่จะแก้ไขด้วย Response ซึ่งจะเรียกใช้การเรียกกลับของปลั๊กอินที่เกี่ยวข้องทั้งหมด

    เมื่ออินสแตนซ์กลยุทธ์ลงทะเบียนกับ Workbox workbox-routing.Route ระบบจะเรียกใช้เมธอดนี้โดยอัตโนมัติเมื่อเส้นทางตรงกัน

    หรือจะใช้เมธอดนี้ใน FetchEvent listener แบบสแตนด์อโลนโดยส่งไปยัง event.respondWith() ก็ได้

    ฟังก์ชัน handle มีรูปแบบดังนี้ 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • ตัวเลือก

      FetchEvent | HandlerCallbackOptions

      FetchEvent หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ที่ระบุไว้ด้านล่าง

    • returns

      Promise<Response>

  • handleAll

    โมฆะ

    คล้ายกับ workbox-strategies.Strategy~handle แต่แทนที่จะแสดงผลเพียง Promise ที่แก้ไขเป็น Response แต่จะแสดงผลเป็นทูเปิลของ Promise [response, done] โดยที่รายการแรก (response) เทียบเท่ากับสิ่งที่ handle() แสดงผล และรายการที่ 2 คือ Promise ที่จะแก้ไขเมื่อ Promise ที่เพิ่มลงใน event.waitUntil() เสร็จสมบูรณ์แล้ว ซึ่งเป็นส่วนหนึ่งของการดำเนินการตามกลยุทธ์

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

    ฟังก์ชัน handleAll มีรูปแบบดังนี้ 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • ตัวเลือก

      FetchEvent | HandlerCallbackOptions

      FetchEvent หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ที่ระบุไว้ด้านล่าง

    • returns

      [Promise<Response>, Promise<void>]

      มัดข้อมูลของ [response, done] promise ที่ใช้ระบุได้ว่าเมื่อใดที่การตอบสนองจะได้รับการแก้ไข และเมื่อใดที่ตัวแฮนเดิลทํางานเสร็จสิ้นแล้ว

CacheOnly

การใช้กลยุทธ์คำขอแคชเท่านั้น

คลาสนี้จะมีประโยชน์หากคุณต้องการใช้ประโยชน์จากปลั๊กอิน Workbox

หากไม่มีรายการที่ตรงกันในแคช ระบบจะแสดงข้อยกเว้น WorkboxError

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

  • constructor

    โมฆะ

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

    หมายเหตุ: หากคลาสกลยุทธ์ที่กําหนดเองขยายคลาส Strategy พื้นฐานและไม่จำเป็นต้องใช้พร็อพเพอร์ตี้เพิ่มเติมจากเหล่านี้ ก็ไม่จำเป็นต้องกำหนดคอนสตรัคเตอร์ของตัวเอง

    ฟังก์ชัน constructor มีรูปแบบดังนี้ 

    (options?: StrategyOptions) => {...}

  • cacheName

    สตริง

  • fetchOptions

    RequestInit ไม่บังคับ

  • matchOptions

    CacheQueryOptions ไม่บังคับ

  • ปลั๊กอิน

    WorkboxPlugin[]

  • _awaitComplete

    โมฆะ

    ฟังก์ชัน _awaitComplete มีรูปแบบดังนี้ 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • แฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • เหตุการณ์

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    โมฆะ

    ฟังก์ชัน _getResponse มีรูปแบบดังนี้ 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • แฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • เหตุการณ์

      ExtendableEvent

    • returns

      Promise<Response>

  • แฮนเดิล

    โมฆะ

    ดำเนินการตามกลยุทธ์คำขอและแสดงผล Promise ที่จะแก้ไขด้วย Response ซึ่งจะเรียกใช้การเรียกกลับของปลั๊กอินที่เกี่ยวข้องทั้งหมด

    เมื่ออินสแตนซ์กลยุทธ์ลงทะเบียนกับ Workbox workbox-routing.Route ระบบจะเรียกใช้เมธอดนี้โดยอัตโนมัติเมื่อเส้นทางตรงกัน

    หรือจะใช้เมธอดนี้ใน FetchEvent listener แบบสแตนด์อโลนโดยส่งไปยัง event.respondWith() ก็ได้

    ฟังก์ชัน handle มีรูปแบบดังนี้ 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • ตัวเลือก

      FetchEvent | HandlerCallbackOptions

      FetchEvent หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ที่ระบุไว้ด้านล่าง

    • returns

      Promise<Response>

  • handleAll

    โมฆะ

    คล้ายกับ workbox-strategies.Strategy~handle แต่แทนที่จะแสดงผลเพียง Promise ที่แก้ไขเป็น Response แต่จะแสดงผลเป็นทูเปิลของ Promise [response, done] โดยที่รายการแรก (response) เทียบเท่ากับสิ่งที่ handle() แสดงผล และรายการที่ 2 คือ Promise ที่จะแก้ไขเมื่อ Promise ที่เพิ่มลงใน event.waitUntil() เสร็จสมบูรณ์แล้ว ซึ่งเป็นส่วนหนึ่งของการดำเนินการตามกลยุทธ์

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

    ฟังก์ชัน handleAll มีรูปแบบดังนี้ 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • ตัวเลือก

      FetchEvent | HandlerCallbackOptions

      FetchEvent หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ที่ระบุไว้ด้านล่าง

    • returns

      [Promise<Response>, Promise<void>]

      มัดข้อมูล [response, done] ที่ใช้เป็นสัญญาซึ่งใช้ระบุได้ว่าเมื่อใดที่การตอบสนองจะได้รับการแก้ไข และเมื่อใดที่ตัวแฮนเดิลทํางานเสร็จสิ้นแล้ว

NetworkFirst

การใช้กลยุทธ์คำขอเครือข่ายก่อน

โดยค่าเริ่มต้น กลยุทธ์นี้จะแคชการตอบกลับที่มีรหัสสถานะ 200 รวมถึงการตอบกลับแบบทึบ การตอบกลับแบบทึบคือคำขอข้ามโดเมนที่การตอบกลับไม่รองรับ CORS

หากคําขอเครือข่ายไม่สําเร็จและไม่มีรายการที่ตรงกันในแคช ระบบจะแสดงข้อยกเว้น WorkboxError

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

  • constructor

    โมฆะ

    ฟังก์ชัน constructor มีรูปแบบดังนี้ 

    (options?: NetworkFirstOptions) => {...}

  • cacheName

    สตริง

  • fetchOptions

    RequestInit ไม่บังคับ

  • matchOptions

    CacheQueryOptions ไม่บังคับ

  • ปลั๊กอิน

    WorkboxPlugin[]

  • _awaitComplete

    โมฆะ

    ฟังก์ชัน _awaitComplete มีรูปแบบดังนี้ 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • แฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • เหตุการณ์

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    โมฆะ

    ฟังก์ชัน _getResponse มีรูปแบบดังนี้ 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • แฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • เหตุการณ์

      ExtendableEvent

    • returns

      Promise<Response>

  • แฮนเดิล

    โมฆะ

    ดำเนินการตามกลยุทธ์คำขอและแสดงผล Promise ที่แก้ไขด้วย Response ซึ่งจะเรียกใช้การเรียกกลับของปลั๊กอินที่เกี่ยวข้องทั้งหมด

    เมื่ออินสแตนซ์กลยุทธ์ลงทะเบียนกับ Workbox workbox-routing.Route ระบบจะเรียกใช้เมธอดนี้โดยอัตโนมัติเมื่อเส้นทางตรงกัน

    หรือจะใช้เมธอดนี้ใน FetchEvent listener แบบสแตนด์อโลนโดยส่งไปยัง event.respondWith() ก็ได้

    ฟังก์ชัน handle มีรูปแบบดังนี้ 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • ตัวเลือก

      FetchEvent | HandlerCallbackOptions

      FetchEvent หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ที่ระบุไว้ด้านล่าง

    • returns

      Promise<Response>

  • handleAll

    โมฆะ

    คล้ายกับ workbox-strategies.Strategy~handle แต่แทนที่จะแสดงผลเพียง Promise ที่แก้ไขเป็น Response แต่จะแสดงผลเป็นทูเปิลของ Promise [response, done] โดยที่รายการแรก (response) เทียบเท่ากับสิ่งที่ handle() แสดงผล และรายการที่ 2 คือ Promise ที่จะแก้ไขเมื่อ Promise ที่เพิ่มลงใน event.waitUntil() เสร็จสมบูรณ์แล้ว ซึ่งเป็นส่วนหนึ่งของการดำเนินการตามกลยุทธ์

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

    ฟังก์ชัน handleAll มีรูปแบบดังนี้ 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • ตัวเลือก

      FetchEvent | HandlerCallbackOptions

      FetchEvent หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ที่ระบุไว้ด้านล่าง

    • returns

      [Promise<Response>, Promise<void>]

      มัดข้อมูลของ [response, done] promise ที่ใช้ระบุได้ว่าเมื่อใดที่การตอบสนองจะได้รับการแก้ไข และเมื่อใดที่ตัวแฮนเดิลทํางานเสร็จสิ้นแล้ว

NetworkFirstOptions

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

  • cacheName

    สตริง ไม่บังคับ

  • fetchOptions

    RequestInit ไม่บังคับ

  • matchOptions

    CacheQueryOptions ไม่บังคับ

  • networkTimeoutSeconds

    ตัวเลข ไม่บังคับ

  • ปลั๊กอิน

    WorkboxPlugin[] ไม่บังคับ

NetworkOnly

การใช้กลยุทธ์คำขอเครือข่ายเท่านั้น

คลาสนี้จะมีประโยชน์หากคุณต้องการใช้ประโยชน์จากปลั๊กอิน Workbox

หากคำขอเครือข่ายไม่สำเร็จ ระบบจะแสดงข้อยกเว้น WorkboxError

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

  • constructor

    โมฆะ

    ฟังก์ชัน constructor มีรูปแบบดังนี้ 

    (options?: NetworkOnlyOptions) => {...}

  • cacheName

    สตริง

  • fetchOptions

    RequestInit ไม่บังคับ

  • matchOptions

    CacheQueryOptions ไม่บังคับ

  • ปลั๊กอิน

    WorkboxPlugin[]

  • _awaitComplete

    โมฆะ

    ฟังก์ชัน _awaitComplete มีรูปแบบดังนี้ 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • แฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • เหตุการณ์

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    โมฆะ

    ฟังก์ชัน _getResponse มีรูปแบบดังนี้ 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • แฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • เหตุการณ์

      ExtendableEvent

    • returns

      Promise<Response>

  • แฮนเดิล

    โมฆะ

    ดำเนินการตามกลยุทธ์คำขอและแสดงผล Promise ที่แก้ไขด้วย Response ซึ่งจะเรียกใช้การเรียกกลับของปลั๊กอินที่เกี่ยวข้องทั้งหมด

    เมื่ออินสแตนซ์กลยุทธ์ลงทะเบียนกับ Workbox workbox-routing.Route ระบบจะเรียกใช้เมธอดนี้โดยอัตโนมัติเมื่อเส้นทางตรงกัน

    หรือจะใช้เมธอดนี้ใน FetchEvent listener แบบสแตนด์อโลนโดยส่งไปยัง event.respondWith() ก็ได้

    ฟังก์ชัน handle มีรูปแบบดังนี้ 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • ตัวเลือก

      FetchEvent | HandlerCallbackOptions

      FetchEvent หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ที่ระบุไว้ด้านล่าง

    • returns

      Promise<Response>

  • handleAll

    โมฆะ

    คล้ายกับ workbox-strategies.Strategy~handle แต่แทนที่จะแสดงผลเพียง Promise ที่แก้ไขเป็น Response แต่จะแสดงผลเป็นทูเปิลของ Promise [response, done] โดยที่รายการแรก (response) เทียบเท่ากับสิ่งที่ handle() แสดงผล และรายการที่ 2 คือ Promise ที่จะแก้ไขเมื่อ Promise ที่เพิ่มลงใน event.waitUntil() เสร็จสมบูรณ์แล้ว ซึ่งเป็นส่วนหนึ่งของการดำเนินการตามกลยุทธ์

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

    ฟังก์ชัน handleAll มีรูปแบบดังนี้ 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • ตัวเลือก

      FetchEvent | HandlerCallbackOptions

      FetchEvent หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ที่ระบุไว้ด้านล่าง

    • returns

      [Promise<Response>, Promise<void>]

      มัดข้อมูลของ [response, done] promise ที่ใช้ระบุได้ว่าเมื่อใดที่การตอบสนองจะได้รับการแก้ไข และเมื่อใดที่ตัวแฮนเดิลทํางานเสร็จสิ้นแล้ว

NetworkOnlyOptions

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

  • fetchOptions

    RequestInit ไม่บังคับ

  • networkTimeoutSeconds

    ตัวเลข ไม่บังคับ

  • ปลั๊กอิน

    WorkboxPlugin[] ไม่บังคับ

StaleWhileRevalidate

การใช้กลยุทธ์คำขอstale-while-revalidate

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

โดยค่าเริ่มต้น กลยุทธ์นี้จะแคชการตอบกลับที่มีรหัสสถานะ 200 รวมถึงการตอบกลับแบบทึบ การตอบกลับแบบทึบคือคำขอข้ามโดเมนที่การตอบกลับไม่รองรับ CORS

หากคําขอเครือข่ายไม่สําเร็จและไม่มีแคชที่ตรงกัน ระบบจะแสดงข้อยกเว้น WorkboxError

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

  • constructor

    โมฆะ

    ฟังก์ชัน constructor มีรูปแบบดังนี้ 

    (options?: StrategyOptions) => {...}

  • cacheName

    สตริง

  • fetchOptions

    RequestInit ไม่บังคับ

  • matchOptions

    CacheQueryOptions ไม่บังคับ

  • ปลั๊กอิน

    WorkboxPlugin[]

  • _awaitComplete

    โมฆะ

    ฟังก์ชัน _awaitComplete มีรูปแบบดังนี้ 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • แฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • เหตุการณ์

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    โมฆะ

    ฟังก์ชัน _getResponse มีรูปแบบดังนี้ 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • แฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • เหตุการณ์

      ExtendableEvent

    • returns

      Promise<Response>

  • แฮนเดิล

    โมฆะ

    ดำเนินการตามกลยุทธ์คำขอและแสดงผล Promise ที่แก้ไขด้วย Response ซึ่งจะเรียกใช้การเรียกกลับของปลั๊กอินที่เกี่ยวข้องทั้งหมด

    เมื่ออินสแตนซ์กลยุทธ์ลงทะเบียนกับ Workbox workbox-routing.Route ระบบจะเรียกใช้เมธอดนี้โดยอัตโนมัติเมื่อเส้นทางตรงกัน

    หรือจะใช้เมธอดนี้ใน FetchEvent listener แบบสแตนด์อโลนโดยส่งไปยัง event.respondWith() ก็ได้

    ฟังก์ชัน handle มีรูปแบบดังนี้ 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • ตัวเลือก

      FetchEvent | HandlerCallbackOptions

      FetchEvent หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ที่ระบุไว้ด้านล่าง

    • returns

      Promise<Response>

  • handleAll

    โมฆะ

    คล้ายกับ workbox-strategies.Strategy~handle แต่แทนที่จะแสดงผลเพียง Promise ที่แก้ไขเป็น Response แต่จะแสดงผลเป็นทูเปิลของ Promise [response, done] โดยที่รายการแรก (response) เทียบเท่ากับสิ่งที่ handle() แสดงผล และรายการที่ 2 คือ Promise ที่จะแก้ไขเมื่อ Promise ที่เพิ่มลงใน event.waitUntil() เสร็จสมบูรณ์แล้ว ซึ่งเป็นส่วนหนึ่งของการดำเนินการตามกลยุทธ์

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

    ฟังก์ชัน handleAll มีรูปแบบดังนี้ 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • ตัวเลือก

      FetchEvent | HandlerCallbackOptions

      FetchEvent หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ที่ระบุไว้ด้านล่าง

    • returns

      [Promise<Response>, Promise<void>]

      มัดข้อมูลของ [response, done] promise ที่ใช้ระบุได้ว่าเมื่อใดที่การตอบสนองจะได้รับการแก้ไข และเมื่อใดที่ตัวแฮนเดิลทํางานเสร็จสิ้นแล้ว

Strategy

คลาสฐานแบบนามธรรมที่คลาสกลยุทธ์อื่นๆ ทั้งหมดต้องขยายมาจากคลาสนี้

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

  • constructor

    โมฆะ

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

    หมายเหตุ: หากคลาสกลยุทธ์ที่กําหนดเองขยายคลาส Strategy พื้นฐานและไม่จำเป็นต้องใช้พร็อพเพอร์ตี้เพิ่มเติมจากเหล่านี้ ก็ไม่จำเป็นต้องกำหนดคอนสตรัคเตอร์ของตัวเอง

    ฟังก์ชัน constructor มีรูปแบบดังนี้ 

    (options?: StrategyOptions) => {...}

  • cacheName

    สตริง

  • fetchOptions

    RequestInit ไม่บังคับ

  • matchOptions

    CacheQueryOptions ไม่บังคับ

  • ปลั๊กอิน

    WorkboxPlugin[]

  • _awaitComplete

    โมฆะ

    ฟังก์ชัน _awaitComplete มีรูปแบบดังนี้ 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • แฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • เหตุการณ์

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    โมฆะ

    ฟังก์ชัน _getResponse มีรูปแบบดังนี้ 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • แฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • เหตุการณ์

      ExtendableEvent

    • returns

      Promise<Response>

  • _handle

    โมฆะ

    ฟังก์ชัน _handle มีรูปแบบดังนี้ 

    (request: Request, handler: StrategyHandler) => {...}

    • ส่งคำขอ

      ส่งคำขอ

    • แฮนเดิล

      StrategyHandler

    • returns

      Promise<Response>

  • แฮนเดิล

    โมฆะ

    ดำเนินการตามกลยุทธ์คำขอและแสดงผล Promise ที่แก้ไขด้วย Response ซึ่งจะเรียกใช้การเรียกกลับของปลั๊กอินที่เกี่ยวข้องทั้งหมด

    เมื่ออินสแตนซ์กลยุทธ์ลงทะเบียนกับ Workbox workbox-routing.Route ระบบจะเรียกใช้เมธอดนี้โดยอัตโนมัติเมื่อเส้นทางตรงกัน

    หรือจะใช้เมธอดนี้ใน FetchEvent listener แบบสแตนด์อโลนโดยส่งไปยัง event.respondWith() ก็ได้

    ฟังก์ชัน handle มีรูปแบบดังนี้ 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • ตัวเลือก

      FetchEvent | HandlerCallbackOptions

      FetchEvent หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ที่ระบุไว้ด้านล่าง

    • returns

      Promise<Response>

  • handleAll

    โมฆะ

    คล้ายกับ workbox-strategies.Strategy~handle แต่แทนที่จะแสดงผลเพียง Promise ที่แก้ไขเป็น Response แต่จะแสดงผลเป็นทูเปิลของ Promise [response, done] โดยที่รายการแรก (response) เทียบเท่ากับสิ่งที่ handle() แสดงผล และรายการที่ 2 คือ Promise ที่จะแก้ไขเมื่อ Promise ที่เพิ่มลงใน 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() ที่เพิ่มทั้งหมดได้รับการแก้ไขแล้ว)

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

  • constructor

    โมฆะ

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

    ตัวสร้างยังเริ่มต้นสถานะที่ส่งไปยังแต่ละปลั๊กอินที่จัดการคําขอนี้ด้วย

    ฟังก์ชัน constructor มีรูปแบบดังนี้ 

    (strategy: Strategy, options: HandlerCallbackOptions) => {...}

  • เหตุการณ์

    ExtendableEvent

  • params

    ใดก็ได้ ไม่บังคับ

  • ส่งคำขอ

    ส่งคำขอ

  • URL

    URL ไม่บังคับ

  • cacheMatch

    โมฆะ

    จับคู่คําขอจากแคช (และเรียกใช้เมธอด callback ของปลั๊กอินที่เกี่ยวข้อง) โดยใช้ cacheName, matchOptions และ plugins ที่กําหนดไว้ในออบเจ็กต์กลยุทธ์

    ระบบจะเรียกใช้เมธอดวงจรชีวิตของปลั๊กอินต่อไปนี้เมื่อใช้เมธอดนี้

    • cacheKeyWillBeUsed()
    • cachedResponseWillBeUsed()

    ฟังก์ชัน cacheMatch มีรูปแบบดังนี้ 

    (key: RequestInfo) => {...}

    • แป้น

      RequestInfo

      คำขอหรือ URL ที่จะใช้เป็นคีย์แคช

    • returns

      Promise<Response>

      คำตอบที่ตรงกัน หากมี

  • cachePut

    โมฆะ

    ใส่คู่คําขอ/การตอบกลับในแคช (และเรียกใช้เมธอดการเรียกกลับของปลั๊กอินที่เกี่ยวข้อง) โดยใช้ cacheName และ plugins ที่กําหนดไว้ในออบเจ็กต์กลยุทธ์

    ระบบจะเรียกใช้เมธอดวงจรชีวิตของปลั๊กอินต่อไปนี้เมื่อใช้เมธอดนี้

    • cacheKeyWillBeUsed()
    • cacheWillUpdate()
    • cacheDidUpdate()

    ฟังก์ชัน cachePut มีรูปแบบดังนี้ 

    (key: RequestInfo, response: Response) => {...}

    • แป้น

      RequestInfo

      คำขอหรือ URL ที่จะใช้เป็นคีย์แคช

    • การตอบกลับ

      คำตอบ

      การตอบสนองต่อแคช

    • returns

      Promise<boolean>

      false หาก cacheWillUpdate ทําให้การตอบกลับไม่ได้รับการแคช และ true ในกรณีอื่นๆ

  • ทำลาย

    โมฆะ

    หยุดการเรียกใช้กลยุทธ์และแก้ไขสัญญาที่รอดำเนินการwaitUntil()โดยทันที

    ฟังก์ชัน destroy มีรูปแบบดังนี้ 

    () => {...}

  • doneWaiting

    โมฆะ

    แสดงผลลัพธ์ที่เป็นสัญญาที่จะแก้ไขเมื่อสัญญาทั้งหมดที่ส่งไปยัง workbox-strategies.StrategyHandler~waitUntil ได้รับการแก้ไขแล้ว

    หมายเหตุ: งานที่ทำหลังจาก doneWaiting() ยุติแล้วควรส่งไปยังเมธอด waitUntil() ของเหตุการณ์ด้วยตนเอง (ไม่ใช่เมธอด waitUntil() ของตัวแฮนเดิลนี้) ไม่เช่นนั้นเธรด Service Worker อาจถูกหยุดการทำงานก่อนที่งานจะเสร็จสมบูรณ์

    ฟังก์ชัน doneWaiting มีรูปแบบดังนี้ 

    () => {...}

    • returns

      Promise<void>

  • ดึงข้อมูล

    โมฆะ

    ดึงข้อมูลคําขอที่ระบุ (และเรียกใช้เมธอดการเรียกกลับของปลั๊กอินที่เกี่ยวข้อง) โดยใช้ fetchOptions (สําหรับคําขอที่ไม่ใช่การนําทาง) และ plugins ที่กําหนดไว้ในออบเจ็กต์ Strategy

    ระบบจะเรียกใช้เมธอดวงจรชีวิตของปลั๊กอินต่อไปนี้เมื่อใช้เมธอดนี้

    • requestWillFetch()
    • fetchDidSucceed()
    • fetchDidFail()

    ฟังก์ชัน fetch มีรูปแบบดังนี้ 

    (input: RequestInfo) => {...}

    • อินพุต

      RequestInfo

      URL หรือคําขอดึงข้อมูล

    • returns

      Promise<Response>

  • fetchAndCachePut

    โมฆะ

    เรียกใช้ this.fetch() และ (ในเบื้องหลัง) เรียกใช้ this.cachePut() กับคำตอบที่ this.fetch() สร้างขึ้น

    การเรียกใช้ this.cachePut() จะเรียกใช้ this.waitUntil() โดยอัตโนมัติ คุณจึงไม่ต้องเรียกใช้ waitUntil() ในเหตุการณ์ด้วยตนเอง

    ฟังก์ชัน fetchAndCachePut มีรูปแบบดังนี้ 

    (input: RequestInfo) => {...}

    • อินพุต

      RequestInfo

      คำขอหรือ URL ที่จะดึงข้อมูลและแคช

    • returns

      Promise<Response>

  • getCacheKey

    โมฆะ

    ตรวจสอบรายการปลั๊กอินเพื่อหา Callback ของ cacheKeyWillBeUsed และเรียกใช้ Callback เหล่านั้นตามลำดับที่พบ ระบบจะถือว่าออบเจ็กต์ Request สุดท้ายที่แสดงผลโดยปลั๊กอินสุดท้ายเป็นคีย์แคชสําหรับการอ่านและ/หรือการเขียนแคช หากไม่ได้ลงทะเบียน cacheKeyWillBeUsed callback ของปลั๊กอิน ระบบจะแสดงคำขอที่ส่งผ่านโดยไม่มีการแก้ไข

    ฟังก์ชัน getCacheKey มีรูปแบบดังนี้ 

    (request: Request, mode: "read" 
          | "write" 
         ) => {...}

    • ส่งคำขอ

      ส่งคำขอ

    • โหมด

      "read"
       | "write"

    • returns

      Promise<Request>

  • hasCallback

    โมฆะ

    แสดงผลเป็น "จริง" หากกลยุทธ์มีพลูกินอย่างน้อย 1 รายการที่มี callback ที่ระบุ

    ฟังก์ชัน hasCallback มีรูปแบบดังนี้ 

    (name: C) => {...}

    • ชื่อ

      C

      ชื่อของคอลแบ็กที่จะตรวจสอบ

    • returns

      บูลีน

  • iterateCallbacks

    โมฆะ

    ยอมรับการเรียกกลับและแสดงผลรายการที่วนซ้ำได้ของการเรียกกลับของปลั๊กอินที่ตรงกัน โดยที่การเรียกกลับแต่ละรายการจะรวมอยู่ในสถานะตัวแฮนเดิลปัจจุบัน (กล่าวคือ เมื่อคุณเรียกใช้การเรียกกลับแต่ละรายการ พารามิเตอร์ออบเจ็กต์ใดก็ตามที่คุณส่งจะผสานกับสถานะปัจจุบันของปลั๊กอิน)

    ฟังก์ชัน iterateCallbacks มีรูปแบบดังนี้ 

    (name: C) => {...}

    • ชื่อ

      C

      ชื่อของ Callback ที่จะเรียกใช้

    • returns

      Generator<NonNullable<indexedAccess>anyunknown>

  • runCallbacks

    โมฆะ

    เรียกใช้การเรียกกลับของปลั๊กอินทั้งหมดที่ตรงกับชื่อที่ระบุตามลําดับ โดยส่งออบเจ็กต์พารามิเตอร์ที่ระบุ (ผสานกับสถานะปลั๊กอินปัจจุบัน) เป็นอาร์กิวเมนต์เดียว

    หมายเหตุ: เนื่องจากเมธอดนี้จะเรียกใช้ปลั๊กอินทั้งหมด จึงไม่เหมาะกับกรณีที่ต้องใช้ผลลัพธ์ของคอลแบ็กก่อนเรียกใช้คอลแบ็กถัดไป ดูวิธีจัดการเคสดังกล่าวได้ที่ด้านล่าง workbox-strategies.StrategyHandler#iterateCallbacks

    ฟังก์ชัน runCallbacks มีรูปแบบดังนี้ 

    (name: C, param: Omit<indexedAccess"state" 
         >) => {...}

    • ชื่อ

      C

      ชื่อของคอลแบ็กที่จะเรียกใช้ภายในปลั๊กอินแต่ละรายการ

    • param

      ละเว้น<indexedAccess"state"
      >

      ออบเจ็กต์ที่จะส่งเป็นพารามิเตอร์แรก (และพารามิเตอร์เดียว) เมื่อเรียกใช้การเรียกกลับแต่ละรายการ ระบบจะผสานออบเจ็กต์นี้เข้ากับสถานะปลั๊กอินปัจจุบันก่อนการเรียกกลับ

    • returns

      Promise<void>

  • waitUntil

    โมฆะ

    เพิ่มการสัญญาใน [extend lifetime promises]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

    สตริง ไม่บังคับ

  • fetchOptions

    RequestInit ไม่บังคับ

  • matchOptions

    CacheQueryOptions ไม่บังคับ

  • ปลั๊กอิน

    WorkboxPlugin[] ไม่บังคับ