แกนงาน

ระบบสร้าง Workbox เป็นโมดูลต่างๆ เพื่อให้นักพัฒนาซอฟต์แวร์เลือกส่วนที่ต้องการใช้ได้โดยไม่ต้องดาวน์โหลดทุกอย่างในไฟล์เดียว

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

โมดูลนี้มีฟังก์ชันการทำงานบางอย่างให้แก่นักพัฒนาซอฟต์แวร์ แต่นอกเหนือจากระดับบันทึกและการแคชแล้ว workbox-core นำเสนอตรรกะภายในสำหรับแต่ละโมดูล ไม่ใช่แก่นักพัฒนาซอฟต์แวร์ปลายทาง

ดูและเปลี่ยนชื่อแคชเริ่มต้น

Workbox จะระบุว่าเป็นแคชผ่าน cacheNames:

import {cacheNames} from 'workbox-core';

console.log(cacheNames.precache);
console.log(cacheNames.runtime);
console.log(cacheNames.googleAnalytics);

ชื่อแคชเหล่านี้สร้างขึ้นในรูปแบบของคำนำหน้า ชื่อ และคำต่อท้าย ซึ่งจะเปลี่ยนชื่อตามการใช้แคช

<prefix>-<cache-id>-<suffix>

คุณเปลี่ยนชื่อเริ่มต้นเหล่านี้ได้โดยแก้ไขค่าทั้งหมดหรือบางส่วนที่ส่งไปยัง setCacheNameDetails()

import {cacheNames, setCacheNameDetails} from 'workbox-core';

setCacheNameDetails({
  prefix: 'my-app',
  suffix: 'v1',
  precache: 'install-time',
  runtime: 'run-time',
  googleAnalytics: 'ga',
});

// Will print 'my-app-install-time-v1'
console.log(cacheNames.precache);

// Will print 'my-app-run-time-v1'
console.log(cacheNames.runtime);

// Will print 'my-app-ga-v1'
console.log(cacheNames.googleAnalytics);

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

คำกล่าวอ้างของลูกค้า

นักพัฒนาซอฟต์แวร์บางรายต้องการเผยแพร่ Service Worker ใหม่และให้โปรแกรมควบคุมการเปิดหน้าเว็บทันทีที่เปิดใช้งาน ซึ่งจะไม่เกิดขึ้นโดยค่าเริ่มต้น

หากคุณต้องการให้มีพฤติกรรมเช่นนี้ workbox-core มีวิธีการที่เป็นตัวช่วย ดังนี้

import {clientsClaim} from 'workbox-core';

// This clientsClaim() should be at the top level
// of your service worker, not inside of, e.g.,
// an event handler.
clientsClaim();

เมธอด clientsClaim() ใน workbox-core จะเพิ่ม Listener เหตุการณ์ activate ลงใน Service Worker โดยอัตโนมัติ และภายในเมธอดนี้จะเรียกใช้ self.clients.claim() การเรียกใช้ self.clients.claim() ก่อนที่โปรแกรมทำงานของบริการปัจจุบันจะเปิดใช้งานจะทำให้เกิดข้อยกเว้นรันไทม์ และ Wrapper ของ workbox-core จะช่วยให้คุณเรียกใช้ได้ในเวลาที่เหมาะสม

เลิกใช้งาน Wrapper ที่รอการข้ามแล้ว

ก่อนที่จะใช้ Workbox v6 นักพัฒนาซอฟต์แวร์ยังขอแนะนำให้ใช้เมธอด skipWaiting() จาก workbox-core ด้วย อย่างไรก็ตาม วิธีนี้ให้คุณค่าน้อยกว่าสิ่งที่นักพัฒนาซอฟต์แวร์จะได้รับหากเรียกใช้ self.skipWaiting() อย่างชัดเจน

เนื่องจาก Wrapper เดิมของ workbox-core ได้ลงทะเบียนเครื่องจัดการเหตุการณ์ install ที่มีการเรียกใช้ self.skipWaiting() ด้วย Wrapper จึงจะไม่ทำงานตามที่คาดไว้หากมีการเรียกใช้ภายในตัวแฮนเดิลเหตุการณ์อื่น เช่น message หลังจากที่การติดตั้งเสร็จสมบูรณ์แล้ว

ด้วยเหตุนี้ workbox-core จึงเลิกใช้งาน skipWaiting() และนักพัฒนาแอปควรเปลี่ยนไปใช้การเรียกใช้ self.skipWaiting() โดยตรง self.skipWaiting() จะไม่ส่งข้อยกเว้นหากเรียกใช้ในเวลาที่ "ไม่ถูกต้อง" ต่างจาก self.clients.claim() จึงไม่จำเป็นต้องรวมเหตุการณ์ในเครื่องจัดการเหตุการณ์

ประเภท

CacheDidUpdateCallback()

workbox-core.CacheDidUpdateCallback(
  param: CacheDidUpdateCallbackParam,
)

พารามิเตอร์

การคืนสินค้า

  • Promise<void>

CacheDidUpdateCallbackParam

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

  • cacheName

    string

  • event

    ExtendableEvent

  • newResponse

    คำตอบ

  • oldResponse

    คําตอบ ไม่บังคับ

  • ส่งคำขอ

    ส่งคำขอ

  • state

    MapLikeObject ไม่บังคับ

CachedResponseWillBeUsedCallback()

workbox-core.CachedResponseWillBeUsedCallback(
  param: CachedResponseWillBeUsedCallbackParam,
)

พารามิเตอร์

การคืนสินค้า

  • Promise<void | Response>

CachedResponseWillBeUsedCallbackParam

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

  • cacheName

    string

  • cachedResponse

    คําตอบ ไม่บังคับ

  • event

    ExtendableEvent

  • matchOptions

    CacheQueryOptions ไม่บังคับ

  • ส่งคำขอ

    ส่งคำขอ

  • state

    MapLikeObject ไม่บังคับ

CacheKeyWillBeUsedCallback()

workbox-core.CacheKeyWillBeUsedCallback(
  param: CacheKeyWillBeUsedCallbackParam,
)

พารามิเตอร์

การคืนสินค้า

  • Promise<string | Request>

CacheKeyWillBeUsedCallbackParam

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

  • event

    ExtendableEvent

  • โหมด

    string

  • params

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

  • ส่งคำขอ

    ส่งคำขอ

  • state

    MapLikeObject ไม่บังคับ

CacheWillUpdateCallback()

workbox-core.CacheWillUpdateCallback(
  param: CacheWillUpdateCallbackParam,
)

พารามิเตอร์

การคืนสินค้า

  • Promise<void | Response>

CacheWillUpdateCallbackParam

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

  • event

    ExtendableEvent

  • ส่งคำขอ

    ส่งคำขอ

  • การตอบกลับ

    คำตอบ

  • state

    MapLikeObject ไม่บังคับ

FetchDidFailCallback()

workbox-core.FetchDidFailCallback(
  param: FetchDidFailCallbackParam,
)

พารามิเตอร์

การคืนสินค้า

  • Promise<void>

FetchDidFailCallbackParam

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

  • error

    ข้อผิดพลาด

  • event

    ExtendableEvent

  • originalRequest

    ส่งคำขอ

  • ส่งคำขอ

    ส่งคำขอ

  • state

    MapLikeObject ไม่บังคับ

FetchDidSucceedCallback()

workbox-core.FetchDidSucceedCallback(
  param: FetchDidSucceedCallbackParam,
)

พารามิเตอร์

การคืนสินค้า

  • สัญญา<การตอบกลับ>

FetchDidSucceedCallbackParam

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

  • event

    ExtendableEvent

  • ส่งคำขอ

    ส่งคำขอ

  • การตอบกลับ

    คำตอบ

  • state

    MapLikeObject ไม่บังคับ

HandlerCallbackOptions

ค่าแจกแจง

RouteHandlerCallbackOptions

ManualHandlerCallbackOptions

HandlerDidCompleteCallback()

workbox-core.HandlerDidCompleteCallback(
  param: HandlerDidCompleteCallbackParam,
)

พารามิเตอร์

การคืนสินค้า

  • Promise<void>

HandlerDidCompleteCallbackParam

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

  • error

    ข้อผิดพลาด ไม่บังคับ

  • event

    ExtendableEvent

  • ส่งคำขอ

    ส่งคำขอ

  • การตอบกลับ

    คําตอบ ไม่บังคับ

  • state

    MapLikeObject ไม่บังคับ

HandlerDidErrorCallback()

workbox-core.HandlerDidErrorCallback(
  param: HandlerDidErrorCallbackParam,
)

พารามิเตอร์

การคืนสินค้า

  • สัญญา<การตอบกลับ>

HandlerDidErrorCallbackParam

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

  • error

    ข้อผิดพลาด

  • event

    ExtendableEvent

  • ส่งคำขอ

    ส่งคำขอ

  • state

    MapLikeObject ไม่บังคับ

HandlerDidRespondCallback()

workbox-core.HandlerDidRespondCallback(
  param: HandlerDidRespondCallbackParam,
)

พารามิเตอร์

การคืนสินค้า

  • Promise<void>

HandlerDidRespondCallbackParam

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

  • event

    ExtendableEvent

  • ส่งคำขอ

    ส่งคำขอ

  • การตอบกลับ

    คําตอบ ไม่บังคับ

  • state

    MapLikeObject ไม่บังคับ

HandlerWillRespondCallback()

workbox-core.HandlerWillRespondCallback(
  param: HandlerWillRespondCallbackParam,
)

พารามิเตอร์

การคืนสินค้า

  • สัญญา<การตอบกลับ>

HandlerWillRespondCallbackParam

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

  • event

    ExtendableEvent

  • ส่งคำขอ

    ส่งคำขอ

  • การตอบกลับ

    คำตอบ

  • state

    MapLikeObject ไม่บังคับ

HandlerWillStartCallback()

workbox-core.HandlerWillStartCallback(
  param: HandlerWillStartCallbackParam,
)

พารามิเตอร์

การคืนสินค้า

  • Promise<void>

HandlerWillStartCallbackParam

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

  • event

    ExtendableEvent

  • ส่งคำขอ

    ส่งคำขอ

  • state

    MapLikeObject ไม่บังคับ

ManualHandlerCallback()

workbox-core.ManualHandlerCallback(
  options: ManualHandlerCallbackOptions,
)

มีการเรียกใช้โค้ดเรียกกลับ "เครื่องจัดการ" ทุกครั้งที่ Router จับคู่ URL/คำขอกับ Route ผ่าน RouteMatchCallback โค้ดเรียกกลับของเครื่องจัดการนี้ควรแสดงผล Promise ที่แปลค่าด้วย Response

หาก RouteMatchCallback แสดงผลอาร์เรย์หรือออบเจ็กต์ที่ไม่ว่างเปล่า ระบบจะส่งผ่านเป็นอาร์กิวเมนต์ options.params ของเครื่องจัดการนี้

พารามิเตอร์

การคืนสินค้า

  • สัญญา<การตอบกลับ>

ManualHandlerCallbackOptions

มีการส่งตัวเลือกไปยังฟังก์ชัน ManualHandlerCallback

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

  • event

    ExtendableEvent

  • ส่งคำขอ

    สตริง | คำขอ

MapLikeObject

PluginState

ตอนนี้ยังใช้ MapLikeObject ธรรมดา แต่อาจขยาย/จำกัดการใช้ในอนาคตได้

ประเภท

MapLikeObject

RequestWillFetchCallback()

workbox-core.RequestWillFetchCallback(
  param: RequestWillFetchCallbackParam,
)

พารามิเตอร์

การคืนสินค้า

  • คำมั่นสัญญา<คำขอ>

RequestWillFetchCallbackParam

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

  • event

    ExtendableEvent

  • ส่งคำขอ

    ส่งคำขอ

  • state

    MapLikeObject ไม่บังคับ

RouteHandler

RouteHandlerCallback หรือ RouteHandlerObject API ส่วนใหญ่ใน workbox-routing ที่ยอมรับตัวแฮนเดิลเส้นทางจะใช้อย่างใดอย่างหนึ่ง

ค่าแจกแจง

RouteHandlerCallback

RouteHandlerObject

RouteHandlerCallback()

workbox-core.RouteHandlerCallback(
  options: RouteHandlerCallbackOptions,
)

มีการเรียกใช้โค้ดเรียกกลับ "เครื่องจัดการ" ทุกครั้งที่ Router จับคู่ URL/คำขอกับ Route ผ่าน RouteMatchCallback โค้ดเรียกกลับของเครื่องจัดการนี้ควรแสดงผล Promise ที่แปลค่าด้วย Response

หาก RouteMatchCallback แสดงผลอาร์เรย์หรือออบเจ็กต์ที่ไม่ว่างเปล่า ระบบจะส่งผ่านเป็นอาร์กิวเมนต์ options.params ของเครื่องจัดการนี้

พารามิเตอร์

การคืนสินค้า

  • สัญญา<การตอบกลับ>

RouteHandlerCallbackOptions

มีการส่งตัวเลือกไปยังฟังก์ชัน RouteHandlerCallback

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

  • event

    ExtendableEvent

  • params

    string[] | MapLikeObject ไม่บังคับ

  • ส่งคำขอ

    ส่งคำขอ

  • url

    URL

RouteHandlerObject

ออบเจ็กต์ที่มีเมธอด handle ประเภท RouteHandlerCallback

คุณสร้างออบเจ็กต์ Route ได้ด้วยฟังก์ชัน RouteHandlerCallback หรือออบเจ็กต์ RouteHandler นี้ ประโยชน์ของ RouteHandler คือขยายระยะเวลาได้ (เช่นเดียวกับที่ทำในแพ็กเกจ workbox-strategies)

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

RouteMatchCallback()

workbox-core.RouteMatchCallback(
  options: RouteMatchCallbackOptions,
)

ระบบจะใช้โค้ดเรียกกลับ "match" เพื่อพิจารณาว่าควรใช้ Route สำหรับ URL และคำขอหนึ่งๆ หรือไม่ เมื่อมีการจับคู่เกิดขึ้นเพื่อตอบสนองต่อเหตุการณ์การดึงข้อมูลจากไคลเอ็นต์ ระบบจะจัดเตรียมออบเจ็กต์ event ด้วย อย่างไรก็ตาม เนื่องจากอาจมีการเรียกใช้โค้ดเรียกกลับการจับคู่นอกเหตุการณ์การดึงข้อมูล ตรรกะที่ตรงกันจึงไม่ควรถือว่าออบเจ็กต์ event จะพร้อมใช้งานเสมอ หากการเรียกกลับที่ตรงกันแสดงผลค่าที่แท้จริง ระบบจะเรียกใช้ RouteHandlerCallback ของเส้นทางที่ตรงกันทันที หากค่าที่แสดงผลเป็นอาร์เรย์หรือออบเจ็กต์ที่ไม่ว่างเปล่า ระบบจะตั้งค่าดังกล่าวในอาร์กิวเมนต์ options.params ของตัวแฮนเดิล

พารามิเตอร์

การคืนสินค้า

  • อะไรก็ได้

RouteMatchCallbackOptions

มีการส่งตัวเลือกไปยังฟังก์ชัน RouteMatchCallback

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

  • event

    ExtendableEvent

  • ส่งคำขอ

    ส่งคำขอ

  • sameOrigin

    boolean

  • url

    URL

WorkboxPlugin

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

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

WorkboxPluginCallbackParam

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

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

cacheNames

ดูชื่อแคชและคำนำหน้า/คำต่อท้ายปัจจุบันที่ Workbox ใช้

cacheNames.precache จะใช้สำหรับเนื้อหาที่จัดเก็บในแคชล่วงหน้า workbox-google-analytics จะใช้ cacheNames.googleAnalytics เพื่อจัดเก็บ analytics.js และ cacheNames.runtime ใช้สำหรับองค์ประกอบอื่นๆ

คุณใช้ cacheNames.prefix เพื่อดึงเฉพาะค่านำหน้าปัจจุบันได้ คุณใช้ cacheNames.suffix เพื่อดึงเฉพาะค่าคำต่อท้ายปัจจุบันได้

ประเภท

ออบเจ็กต์

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

  • googleAnalytics

    string

  • แคชล่วงหน้า

    string

  • คำนำหน้า

    string

  • รันไทม์

    string

  • คำต่อท้าย

    string

วิธีการ

clientsClaim()

workbox-core.clientsClaim()

อ้างสิทธิ์ในไคลเอ็นต์ปัจจุบันทั้งหมดเมื่อ Service Worker เริ่มทำงาน ซึ่งโดยปกติจะใช้ร่วมกับ skipWaiting()

copyResponse()

workbox-core.copyResponse(
  response: Response,
  modifier?: function,
)

อนุญาตให้นักพัฒนาซอฟต์แวร์คัดลอกคำตอบและแก้ไขค่า headers, status หรือ statusText (ค่าที่ตั้งค่าผ่านออบเจ็กต์ [ResponseInit]https://developer.mozilla.org/en-US/docs/Web/API/Response/Response#Syntax ในเครื่องมือสร้างได้) หากต้องการแก้ไขค่าเหล่านี้ ให้ส่งฟังก์ชันเป็นอาร์กิวเมนต์ที่ 2 ระบบจะเรียกใช้ฟังก์ชันนั้นกับออบเจ็กต์เดียวที่มีพร็อพเพอร์ตี้การตอบกลับ {headers, status, statusText} ค่าที่แสดงผลของฟังก์ชันนี้จะใช้เป็น ResponseInit สำหรับ Response ใหม่ หากต้องการเปลี่ยนค่า ให้แก้ไขพารามิเตอร์ที่ส่งแล้วแสดงผล หรือแสดงผลออบเจ็กต์ใหม่ทั้งหมด

เมธอดนี้จงใจจำกัดเฉพาะการตอบกลับจากต้นทางเดียวกัน ไม่ว่าจะมีการใช้ CORS หรือไม่ก็ตาม

พารามิเตอร์

  • การตอบกลับ

    คำตอบ

  • ตัวปรับแต่ง

    ฟังก์ชัน ไม่บังคับ

    พารามิเตอร์ modifier มีลักษณะดังนี้ 

    (responseInit: ResponseInit) => ResponseInit

    • responseInit

      ResponseInit

    • returns

      ResponseInit

การคืนสินค้า

  • สัญญา<การตอบกลับ>

registerQuotaErrorCallback()

workbox-core.registerQuotaErrorCallback(
  callback: Function,
)

เพิ่มฟังก์ชันไปยังชุด conversionErrorCallbacks ที่จะดำเนินการหากมีข้อผิดพลาดด้านโควต้า

พารามิเตอร์

  • Callback

    การทำงาน

setCacheNameDetails()

workbox-core.setCacheNameDetails(
  details: PartialCacheNameDetails,
)

แก้ไขชื่อแคชเริ่มต้นที่แพ็กเกจ Workbox ใช้ ระบบจะสร้างชื่อแคชเป็น <prefix>-<Cache Name>-<suffix>

พารามิเตอร์

  • รายละเอียด

    PartialCacheNameDetails

skipWaiting()

workbox-core.skipWaiting()

วิธีนี้เลิกใช้งานแล้วและจะถูกนำออกใน Workbox v7

การเรียก self.skipWaiting() เป็นหลัก และควรใช้แทน