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

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

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

เครือข่ายก่อน (เครือข่ายกลับไปใช้แคช)

แผนภาพเครือข่ายที่ 1

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

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',
  })
);

การใช้ปลั๊กอิน

กล่องงานมาพร้อมกับชุดปลั๊กอินที่สามารถใช้กับกลยุทธ์เหล่านี้

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

กลยุทธ์ที่กำหนดเอง

นอกจากการกำหนดค่ากลยุทธ์แล้ว ช่องทำงานยังให้คุณสร้างกลยุทธ์ที่กำหนดเองได้อีกด้วย ซึ่งทำได้โดยการนำเข้าและขยายคลาสพื้นฐาน Strategy จาก workbox-strategies:

import {Strategy} from 'workbox-strategies';

class NewStrategy extends Strategy {
  _handle(request, handler) {
    // Define handling logic here
  }
}

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

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

ประเภท

CacheFirst

การใช้งานระบบ cache-first ในการส่งคำขอ

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

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

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

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

    เป็นโมฆะ

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

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

    ฟังก์ชัน constructor มีลักษณะดังนี้ 

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

  • cacheName

    สตริง

  • fetchOptions

    RequestInit ไม่บังคับ

  • matchOptions

    CacheQueryOptions ไม่บังคับ

  • ปลั๊กอิน

    WorkboxPlugin[]

  • _awaitComplete

    เป็นโมฆะ

    ฟังก์ชัน _awaitComplete มีลักษณะดังนี้ 

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

    • responseDone

      Promise&lt;Response&gt;

    • ตัวแฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • event

      ExtendableEvent

    • returns

      คำสัญญา<โมฆะ>

  • _getResponse

    เป็นโมฆะ

    ฟังก์ชัน _getResponse มีลักษณะดังนี้ 

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

    • ตัวแฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • event

      ExtendableEvent

    • returns

      Promise&lt;Response&gt;

  • แฮนเดิล

    เป็นโมฆะ

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

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

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

    ฟังก์ชัน handle มีลักษณะดังนี้ 

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

    • ตัวเลือก

      FetchEvent | HandlerCallbackOptions

      FetchEvent หรือออบเจ็กต์ที่มี ที่แสดงรายการอยู่ด้านล่าง

    • returns

      Promise&lt;Response&gt;

  • handleAll

    เป็นโมฆะ

    คล้ายกับ 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>]

      Tuple ของ [response, Done] ว่าจะสามารถนำมาใช้พิจารณาว่าเมื่อใดที่การตอบสนองจะได้รับการแก้ไข เมื่อเครื่องจัดการทำงาน ทั้งหมดเสร็จแล้ว

CacheOnly

การใช้งานแคชเท่านั้น ในการส่งคำขอ

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

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

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

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

    เป็นโมฆะ

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

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

    ฟังก์ชัน constructor มีลักษณะดังนี้ 

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

  • cacheName

    สตริง

  • fetchOptions

    RequestInit ไม่บังคับ

  • matchOptions

    CacheQueryOptions ไม่บังคับ

  • ปลั๊กอิน

    WorkboxPlugin[]

  • _awaitComplete

    เป็นโมฆะ

    ฟังก์ชัน _awaitComplete มีลักษณะดังนี้ 

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

    • responseDone

      Promise&lt;Response&gt;

    • ตัวแฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • event

      ExtendableEvent

    • returns

      คำสัญญา<โมฆะ>

  • _getResponse

    เป็นโมฆะ

    ฟังก์ชัน _getResponse มีลักษณะดังนี้ 

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

    • ตัวแฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • event

      ExtendableEvent

    • returns

      Promise&lt;Response&gt;

  • แฮนเดิล

    เป็นโมฆะ

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

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

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

    ฟังก์ชัน handle มีลักษณะดังนี้ 

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

    • ตัวเลือก

      FetchEvent | HandlerCallbackOptions

      FetchEvent หรือออบเจ็กต์ที่มี ที่แสดงรายการอยู่ด้านล่าง

    • returns

      Promise&lt;Response&gt;

  • handleAll

    เป็นโมฆะ

    คล้ายกับ 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>]

      Tuple ของ [response, Done] ว่าจะสามารถนำมาใช้พิจารณาว่าเมื่อใดที่การตอบสนองจะได้รับการแก้ไข เมื่อเครื่องจัดการทำงาน ทั้งหมดเสร็จแล้ว

NetworkFirst

การติดตั้งใช้งาน เครือข่ายก่อน ในการส่งคำขอ

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

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

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

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

    เป็นโมฆะ

    ฟังก์ชัน constructor มีลักษณะดังนี้ 

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

  • cacheName

    สตริง

  • fetchOptions

    RequestInit ไม่บังคับ

  • matchOptions

    CacheQueryOptions ไม่บังคับ

  • ปลั๊กอิน

    WorkboxPlugin[]

  • _awaitComplete

    เป็นโมฆะ

    ฟังก์ชัน _awaitComplete มีลักษณะดังนี้ 

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

    • responseDone

      Promise&lt;Response&gt;

    • ตัวแฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • event

      ExtendableEvent

    • returns

      คำสัญญา<โมฆะ>

  • _getResponse

    เป็นโมฆะ

    ฟังก์ชัน _getResponse มีลักษณะดังนี้ 

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

    • ตัวแฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • event

      ExtendableEvent

    • returns

      Promise&lt;Response&gt;

  • แฮนเดิล

    เป็นโมฆะ

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

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

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

    ฟังก์ชัน handle มีลักษณะดังนี้ 

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

    • ตัวเลือก

      FetchEvent | HandlerCallbackOptions

      FetchEvent หรือออบเจ็กต์ที่มี ที่แสดงรายการอยู่ด้านล่าง

    • returns

      Promise&lt;Response&gt;

  • handleAll

    เป็นโมฆะ

    คล้ายกับ 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>]

      Tuple ของ [response, Done] ว่าจะสามารถนำมาใช้พิจารณาว่าเมื่อใดที่การตอบสนองจะได้รับการแก้ไข เมื่อเครื่องจัดการทำงาน ทั้งหมดเสร็จแล้ว

NetworkFirstOptions

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

  • cacheName

    string ไม่บังคับ

  • fetchOptions

    RequestInit ไม่บังคับ

  • matchOptions

    CacheQueryOptions ไม่บังคับ

  • networkTimeoutSeconds

    หมายเลข ไม่บังคับ

  • ปลั๊กอิน

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

NetworkOnly

การติดตั้งใช้งาน เครือข่ายเท่านั้น ในการส่งคำขอ

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

หากคำขอเครือข่ายล้มเหลว จะมีข้อยกเว้น WorkboxError

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

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

    เป็นโมฆะ

    ฟังก์ชัน constructor มีลักษณะดังนี้ 

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

  • cacheName

    สตริง

  • fetchOptions

    RequestInit ไม่บังคับ

  • matchOptions

    CacheQueryOptions ไม่บังคับ

  • ปลั๊กอิน

    WorkboxPlugin[]

  • _awaitComplete

    เป็นโมฆะ

    ฟังก์ชัน _awaitComplete มีลักษณะดังนี้ 

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

    • responseDone

      Promise&lt;Response&gt;

    • ตัวแฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • event

      ExtendableEvent

    • returns

      คำสัญญา<โมฆะ>

  • _getResponse

    เป็นโมฆะ

    ฟังก์ชัน _getResponse มีลักษณะดังนี้ 

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

    • ตัวแฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • event

      ExtendableEvent

    • returns

      Promise&lt;Response&gt;

  • แฮนเดิล

    เป็นโมฆะ

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

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

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

    ฟังก์ชัน handle มีลักษณะดังนี้ 

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

    • ตัวเลือก

      FetchEvent | HandlerCallbackOptions

      FetchEvent หรือออบเจ็กต์ที่มี ที่แสดงรายการอยู่ด้านล่าง

    • returns

      Promise&lt;Response&gt;

  • handleAll

    เป็นโมฆะ

    คล้ายกับ 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>]

      Tuple ของ [response, Done] ว่าจะสามารถนำมาใช้พิจารณาว่าเมื่อใดที่การตอบสนองจะได้รับการแก้ไข เมื่อเครื่องจัดการทำงาน ทั้งหมดเสร็จแล้ว

NetworkOnlyOptions

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

  • fetchOptions

    RequestInit ไม่บังคับ

  • networkTimeoutSeconds

    หมายเลข ไม่บังคับ

  • ปลั๊กอิน

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

StaleWhileRevalidate

การติดตั้งใช้งาน ไม่มีอัปเดตขณะตรวจสอบความถูกต้องอีกครั้ง ในการส่งคำขอ

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

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

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

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

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

    เป็นโมฆะ

    ฟังก์ชัน constructor มีลักษณะดังนี้ 

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

  • cacheName

    สตริง

  • fetchOptions

    RequestInit ไม่บังคับ

  • matchOptions

    CacheQueryOptions ไม่บังคับ

  • ปลั๊กอิน

    WorkboxPlugin[]

  • _awaitComplete

    เป็นโมฆะ

    ฟังก์ชัน _awaitComplete มีลักษณะดังนี้ 

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

    • responseDone

      Promise&lt;Response&gt;

    • ตัวแฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • event

      ExtendableEvent

    • returns

      คำสัญญา<โมฆะ>

  • _getResponse

    เป็นโมฆะ

    ฟังก์ชัน _getResponse มีลักษณะดังนี้ 

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

    • ตัวแฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • event

      ExtendableEvent

    • returns

      Promise&lt;Response&gt;

  • แฮนเดิล

    เป็นโมฆะ

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

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

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

    ฟังก์ชัน handle มีลักษณะดังนี้ 

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

    • ตัวเลือก

      FetchEvent | HandlerCallbackOptions

      FetchEvent หรือออบเจ็กต์ที่มี ที่แสดงรายการอยู่ด้านล่าง

    • returns

      Promise&lt;Response&gt;

  • handleAll

    เป็นโมฆะ

    คล้ายกับ 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>]

      Tuple ของ [response, Done] ว่าจะสามารถนำมาใช้พิจารณาว่าเมื่อใดที่การตอบสนองจะได้รับการแก้ไข เมื่อเครื่องจัดการทำงาน ทั้งหมดเสร็จแล้ว

Strategy

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

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

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

    เป็นโมฆะ

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

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

    ฟังก์ชัน constructor มีลักษณะดังนี้ 

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

  • cacheName

    สตริง

  • fetchOptions

    RequestInit ไม่บังคับ

  • matchOptions

    CacheQueryOptions ไม่บังคับ

  • ปลั๊กอิน

    WorkboxPlugin[]

  • _awaitComplete

    เป็นโมฆะ

    ฟังก์ชัน _awaitComplete มีลักษณะดังนี้ 

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

    • responseDone

      Promise&lt;Response&gt;

    • ตัวแฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • event

      ExtendableEvent

    • returns

      คำสัญญา<โมฆะ>

  • _getResponse

    เป็นโมฆะ

    ฟังก์ชัน _getResponse มีลักษณะดังนี้ 

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

    • ตัวแฮนเดิล

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • event

      ExtendableEvent

    • returns

      Promise&lt;Response&gt;

  • _handle

    เป็นโมฆะ

    ฟังก์ชัน _handle มีลักษณะดังนี้ 

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

    • ส่งคำขอ

      ส่งคำขอ

    • ตัวแฮนเดิล

      StrategyHandler

    • returns

      Promise&lt;Response&gt;

  • แฮนเดิล

    เป็นโมฆะ

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

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

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

    ฟังก์ชัน handle มีลักษณะดังนี้ 

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

    • ตัวเลือก

      FetchEvent | HandlerCallbackOptions

      FetchEvent หรือออบเจ็กต์ที่มี ที่แสดงรายการอยู่ด้านล่าง

    • returns

      Promise&lt;Response&gt;

  • handleAll

    เป็นโมฆะ

    คล้ายกับ 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>]

      Tuple ของ [response, Done] ว่าที่สามารถใช้พิจารณาว่าเมื่อใดที่การตอบสนองจะได้รับการแก้ไข เมื่อเครื่องจัดการทำงาน ทั้งหมดเสร็จแล้ว

StrategyHandler

คลาสที่สร้างขึ้นทุกครั้งที่มีการเรียกใช้อินสแตนซ์ Strategy workbox-strategies.Strategy~handle หรือ workbox-strategies.Strategy~handleAll ที่รวมการดึงข้อมูลทั้งหมดและ แคชการดำเนินการต่างๆ เกี่ยวกับ Callback ของปลั๊กอินและติดตามว่ากลยุทธ์ "เสร็จสิ้น" ใช่ไหม (เช่น สัญญา event.waitUntil() ทั้งหมดที่เพิ่มได้รับการแก้ไขแล้ว)

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

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

    เป็นโมฆะ

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

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

    ฟังก์ชัน constructor มีลักษณะดังนี้ 

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

  • event

    ExtendableEvent

  • พารามิเตอร์

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

  • ส่งคำขอ

    ส่งคำขอ

  • URL

    URL ไม่บังคับ

  • cacheMatch

    เป็นโมฆะ

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

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

    • cacheKeyWillByUsed()
    • cachedResponseWillByUsed()

    ฟังก์ชัน cacheMatch มีลักษณะดังนี้ 

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

    • แป้น

      RequestInfo

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

    • returns

      Promise&lt;Response&gt;

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

  • cachePut

    เป็นโมฆะ

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

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

    • cacheKeyWillByUsed()
    • cacheWillUpdate()
    • cacheDidUpdate()

    ฟังก์ชัน cachePut มีลักษณะดังนี้ 

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

    • แป้น

      RequestInfo

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

    • การตอบกลับ

      คำตอบ

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

    • returns

      Promise&lt;boolean&gt;

      false หาก cacheWillUpdate ทำให้เกิดการตอบสนอง ไม่ถูกแคช และ true ในกรณีอื่นๆ

  • ทำลาย

    เป็นโมฆะ

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

    ฟังก์ชัน destroy มีลักษณะดังนี้ 

    () => {...}

  • doneWaiting

    เป็นโมฆะ

    ส่งคืนคำสัญญาที่กลายเป็นสำเร็จเมื่อสัญญาทั้งหมดที่ถูกส่งต่อ workbox-strategies.StrategyHandler~waitUntil ก็ตัดสินแล้ว

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

    ฟังก์ชัน doneWaiting มีลักษณะดังนี้ 

    () => {...}

    • returns

      คำสัญญา<โมฆะ>

  • ดึงข้อมูล

    เป็นโมฆะ

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

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

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

    ฟังก์ชัน fetch มีลักษณะดังนี้ 

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

    • อินพุต

      RequestInfo

      URL หรือคำขอในการดึงข้อมูล

    • returns

      Promise&lt;Response&gt;

  • fetchAndCachePut

    เป็นโมฆะ

    การโทรไปยัง this.fetch() และ (ในเบื้องหลัง) จะเรียกใช้ this.cachePut() ในวันที่ การตอบกลับที่สร้างโดย this.fetch()

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

    ฟังก์ชัน fetchAndCachePut มีลักษณะดังนี้ 

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

    • อินพุต

      RequestInfo

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

    • returns

      Promise&lt;Response&gt;

  • getCacheKey

    เป็นโมฆะ

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

    ฟังก์ชัน getCacheKey มีลักษณะดังนี้ 

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

    • ส่งคำขอ

      ส่งคำขอ

    • โหมด

      "อ่าน"
       | "เขียน"

    • returns

      Promise&lt;Request&gt;

  • hasCallback

    เป็นโมฆะ

    แสดงค่า "จริง" หากกลยุทธ์มีปลั๊กอินอย่างน้อย 1 รายการที่มี Callback

    ฟังก์ชัน hasCallback มีลักษณะดังนี้ 

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

    • ชื่อ

      C

      ชื่อของ Callback ที่จะตรวจสอบ

    • returns

      boolean

  • iterateCallbacks

    เป็นโมฆะ

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

    ฟังก์ชัน iterateCallbacks มีลักษณะดังนี้ 

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

    • ชื่อ

      C

      ชื่อสำหรับการเรียกใช้ Callback

    • returns

      เครื่องมือสร้าง<NonNullable<indexedAccess>ไม่ระบุได้>

  • runCallbacks

    เป็นโมฆะ

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

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

    ฟังก์ชัน runCallbacks มีลักษณะดังนี้ 

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

    • ชื่อ

      C

      ชื่อของ Callback ที่จะทำงานภายในปลั๊กอินแต่ละรายการ

    • พารามิเตอร์

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

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

    • returns

      คำสัญญา<โมฆะ>

  • waitUntil

    เป็นโมฆะ

    เพิ่มคำสัญญาให้กับ [สัญญาว่าจะยืดอายุการใช้งาน]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises ของเหตุการณ์ที่เชื่อมโยงกับคำขอที่ได้รับการจัดการ (โดยปกติ FetchEvent)

    หมายเหตุ: คุณสามารถรอ workbox-strategies.StrategyHandler~doneWaiting เพื่อให้ทราบเมื่อสัญญาทั้งหมดที่เพิ่มเข้ามาสำเร็จ

    ฟังก์ชัน waitUntil มีลักษณะดังนี้ 

    (promise: Promise<T>) => {...}

    • สัญญา

      สัญญา<T>

      คำมั่นสัญญาที่จะช่วยเพิ่มสัญญาว่าจะยืดอายุการใช้งาน ของเหตุการณ์ที่เรียกใช้คำขอ

    • returns

      สัญญา<T>

StrategyOptions

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

  • cacheName

    string ไม่บังคับ

  • fetchOptions

    RequestInit ไม่บังคับ

  • matchOptions

    CacheQueryOptions ไม่บังคับ

  • ปลั๊กอิน

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