แกนงาน

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

Use Case หลักสําหรับคำนำหน้าและคำต่อท้ายคือ หากคุณใช้ 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 จะเพิ่ม activate event listener ลงใน Service Worker โดยอัตโนมัติ และเรียกใช้ self.clients.claim() การเรียก self.clients.claim() ก่อนที่ Service Worker ในปัจจุบันจะเปิดใช้งานจะทำให้เกิดข้อยกเว้นรันไทม์ และ Wrapper ของ workbox-core จะช่วยให้คุณเรียกใช้ Service Worker ในเวลาที่เหมาะสม

เลิกใช้งานไวลด์การ์ด skipWaiting แล้ว

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

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

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

หมายเหตุ: หากเว็บแอปของคุณโหลดทรัพยากรแบบ Lazy Load ที่มีเวอร์ชันที่ไม่ซ้ำกัน เช่น ใช้แฮชใน URL เราขอแนะนำให้คุณหลีกเลี่ยงการใช้การข้ามการรอ การเปิดใช้อาจทําให้การโหลด URL แบบเลื่อนเวลาไว้โหลดช้าซึ่งก่อนหน้านี้มีการแคชไว้ล่วงหน้าและถูกล้างออกในระหว่างการเปิดใช้งาน Service Worker ที่อัปเดตแล้วไม่สําเร็จ

ประเภท

CacheDidUpdateCallback()

workbox-core.CacheDidUpdateCallback(
  param: CacheDidUpdateCallbackParam,
)

พารามิเตอร์

• param

  CacheDidUpdateCallbackParam

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

• Promise<void>

CacheDidUpdateCallbackParam

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

• cacheName

  สตริง

• เหตุการณ์

  ExtendableEvent

• newResponse

  คำตอบ

• oldResponse

  การตอบกลับ ไม่บังคับ

• ส่งคำขอ

  ส่งคำขอ

• รัฐ

  MapLikeObject ไม่บังคับ

CachedResponseWillBeUsedCallback()

workbox-core.CachedResponseWillBeUsedCallback(
  param: CachedResponseWillBeUsedCallbackParam,
)

พารามิเตอร์

• param

  CachedResponseWillBeUsedCallbackParam

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

• Promise<void | Response>

CachedResponseWillBeUsedCallbackParam

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

• cacheName

  สตริง

• cachedResponse

  การตอบกลับ ไม่บังคับ

• เหตุการณ์

  ExtendableEvent

• matchOptions

  CacheQueryOptions ไม่บังคับ

• ส่งคำขอ

  ส่งคำขอ

• รัฐ

  MapLikeObject ไม่บังคับ

CacheKeyWillBeUsedCallback()

workbox-core.CacheKeyWillBeUsedCallback(
  param: CacheKeyWillBeUsedCallbackParam,
)

พารามิเตอร์

• param

  CacheKeyWillBeUsedCallbackParam

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

• Promise<string | Request>

CacheKeyWillBeUsedCallbackParam

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

• เหตุการณ์

  ExtendableEvent

• โหมด

  สตริง

• params

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

• ส่งคำขอ

  ส่งคำขอ

• รัฐ

  MapLikeObject ไม่บังคับ

CacheWillUpdateCallback()

workbox-core.CacheWillUpdateCallback(
  param: CacheWillUpdateCallbackParam,
)

พารามิเตอร์

• param

  CacheWillUpdateCallbackParam

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

• Promise<void | Response>

CacheWillUpdateCallbackParam

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

• เหตุการณ์

  ExtendableEvent

• ส่งคำขอ

  ส่งคำขอ

• การตอบกลับ

  คำตอบ

• รัฐ

  MapLikeObject ไม่บังคับ

FetchDidFailCallback()

workbox-core.FetchDidFailCallback(
  param: FetchDidFailCallbackParam,
)

พารามิเตอร์

• param

  FetchDidFailCallbackParam

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

• Promise<void>

FetchDidFailCallbackParam

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

• ข้อผิดพลาด

  ข้อผิดพลาด

• เหตุการณ์

  ExtendableEvent

• originalRequest

  ส่งคำขอ

• ส่งคำขอ

  ส่งคำขอ

• รัฐ

  MapLikeObject ไม่บังคับ

FetchDidSucceedCallback()

workbox-core.FetchDidSucceedCallback(
  param: FetchDidSucceedCallbackParam,
)

พารามิเตอร์

• param

  FetchDidSucceedCallbackParam

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

• Promise<Response>

FetchDidSucceedCallbackParam

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

• เหตุการณ์

  ExtendableEvent

• ส่งคำขอ

  ส่งคำขอ

• การตอบกลับ

  คำตอบ

• รัฐ

  MapLikeObject ไม่บังคับ

HandlerCallbackOptions

ค่าแจกแจง

RouteHandlerCallbackOptions

ManualHandlerCallbackOptions

HandlerDidCompleteCallback()

workbox-core.HandlerDidCompleteCallback(
  param: HandlerDidCompleteCallbackParam,
)

พารามิเตอร์

• param

  HandlerDidCompleteCallbackParam

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

• Promise<void>

HandlerDidCompleteCallbackParam

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

• ข้อผิดพลาด

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

• เหตุการณ์

  ExtendableEvent

• ส่งคำขอ

  ส่งคำขอ

• การตอบกลับ

  การตอบกลับ ไม่บังคับ

• รัฐ

  MapLikeObject ไม่บังคับ

HandlerDidErrorCallback()

workbox-core.HandlerDidErrorCallback(
  param: HandlerDidErrorCallbackParam,
)

พารามิเตอร์

• param

  HandlerDidErrorCallbackParam

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

• Promise<Response>

HandlerDidErrorCallbackParam

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

• ข้อผิดพลาด

  ข้อผิดพลาด

• เหตุการณ์

  ExtendableEvent

• ส่งคำขอ

  ส่งคำขอ

• รัฐ

  MapLikeObject ไม่บังคับ

HandlerDidRespondCallback()

workbox-core.HandlerDidRespondCallback(
  param: HandlerDidRespondCallbackParam,
)

พารามิเตอร์

• param

  HandlerDidRespondCallbackParam

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

• Promise<void>

HandlerDidRespondCallbackParam

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

• เหตุการณ์

  ExtendableEvent

• ส่งคำขอ

  ส่งคำขอ

• การตอบกลับ

  การตอบกลับ ไม่บังคับ

• รัฐ

  MapLikeObject ไม่บังคับ

HandlerWillRespondCallback()

workbox-core.HandlerWillRespondCallback(
  param: HandlerWillRespondCallbackParam,
)

พารามิเตอร์

• param

  HandlerWillRespondCallbackParam

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

• Promise<Response>

HandlerWillRespondCallbackParam

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

• เหตุการณ์

  ExtendableEvent

• ส่งคำขอ

  ส่งคำขอ

• การตอบกลับ

  คำตอบ

• รัฐ

  MapLikeObject ไม่บังคับ

HandlerWillStartCallback()

workbox-core.HandlerWillStartCallback(
  param: HandlerWillStartCallbackParam,
)

พารามิเตอร์

• param

  HandlerWillStartCallbackParam

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

• Promise<void>

HandlerWillStartCallbackParam

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

• เหตุการณ์

  ExtendableEvent

• ส่งคำขอ

  ส่งคำขอ

• รัฐ

  MapLikeObject ไม่บังคับ

ManualHandlerCallback()

workbox-core.ManualHandlerCallback(
  options: ManualHandlerCallbackOptions,
)

ระบบจะเรียกใช้การเรียกกลับ "handler" เมื่อใดก็ตามที่ Router ตรงกับ URL/คําขอ กับ Route ผ่าน RouteMatchCallback การเรียกกลับของตัวแฮนเดิลนี้ควรแสดงผล Promise ที่แก้ไขด้วย Response

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

พารามิเตอร์

• ตัวเลือก

  ManualHandlerCallbackOptions

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

• Promise<Response>

ManualHandlerCallbackOptions

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

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

• เหตุการณ์

  ExtendableEvent

• ส่งคำขอ

  string | คําขอ

MapLikeObject

PluginState

ขณะนี้ใช้ MapLikeObject ธรรมดา แต่อาจขยาย/จำกัดการดำเนินการนี้ในอนาคต

ประเภท

MapLikeObject

RequestWillFetchCallback()

workbox-core.RequestWillFetchCallback(
  param: RequestWillFetchCallbackParam,
)

พารามิเตอร์

• param

  RequestWillFetchCallbackParam

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

• Promise<Request>

RequestWillFetchCallbackParam

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

• เหตุการณ์

  ExtendableEvent

• ส่งคำขอ

  ส่งคำขอ

• รัฐ

  MapLikeObject ไม่บังคับ

RouteHandler

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

ค่าแจกแจง

RouteHandlerCallback

RouteHandlerObject

RouteHandlerCallback()

workbox-core.RouteHandlerCallback(
  options: RouteHandlerCallbackOptions,
)

ระบบจะเรียกใช้การเรียกกลับ "handler" เมื่อใดก็ตามที่ Router ตรงกับ URL/คําขอ กับ Route ผ่าน RouteMatchCallback การเรียกกลับของตัวแฮนเดิลนี้ควรแสดงผล Promise ที่แก้ไขด้วย Response

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

พารามิเตอร์

• ตัวเลือก

  RouteHandlerCallbackOptions

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

• Promise<Response>

RouteHandlerCallbackOptions

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

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

• เหตุการณ์

  ExtendableEvent

• params

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

• ส่งคำขอ

  ส่งคำขอ

• URL

  URL

RouteHandlerObject

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

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

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

• แฮนเดิล

  RouteHandlerCallback

RouteMatchCallback()

workbox-core.RouteMatchCallback(
  options: RouteMatchCallbackOptions,
)

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

พารามิเตอร์

• ตัวเลือก

  RouteMatchCallbackOptions

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

• ใดๆ

RouteMatchCallbackOptions

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

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

• เหตุการณ์

  ExtendableEvent

• ส่งคำขอ

  ส่งคำขอ

• sameOrigin

  บูลีน

• URL

  URL

WorkboxPlugin

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

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

• cacheDidUpdate

  CacheDidUpdateCallback ไม่บังคับ

• cacheKeyWillBeUsed

  CacheKeyWillBeUsedCallback ไม่บังคับ

• cacheWillUpdate

  CacheWillUpdateCallback ไม่บังคับ

• cachedResponseWillBeUsed

  CachedResponseWillBeUsedCallback ไม่บังคับ

• fetchDidFail

  FetchDidFailCallback ไม่บังคับ

• fetchDidSucceed

  FetchDidSucceedCallback ไม่บังคับ

• handlerDidComplete

  HandlerDidCompleteCallback ไม่บังคับ

• handlerDidError

  HandlerDidErrorCallback ไม่บังคับ

• handlerDidRespond

  HandlerDidRespondCallback ไม่บังคับ

• handlerWillRespond

  HandlerWillRespondCallback ไม่บังคับ

• handlerWillStart

  HandlerWillStartCallback ไม่บังคับ

• requestWillFetch

  RequestWillFetchCallback ไม่บังคับ

WorkboxPluginCallbackParam

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

• cacheDidUpdate

  CacheDidUpdateCallbackParam

• cacheKeyWillBeUsed

  CacheKeyWillBeUsedCallbackParam

• cacheWillUpdate

  CacheWillUpdateCallbackParam

• cachedResponseWillBeUsed

  CachedResponseWillBeUsedCallbackParam

• fetchDidFail

  FetchDidFailCallbackParam

• fetchDidSucceed

  FetchDidSucceedCallbackParam

• handlerDidComplete

  HandlerDidCompleteCallbackParam

• handlerDidError

  HandlerDidErrorCallbackParam

• handlerDidRespond

  HandlerDidRespondCallbackParam

• handlerWillRespond

  HandlerWillRespondCallbackParam

• handlerWillStart

  HandlerWillStartCallbackParam

• requestWillFetch

  RequestWillFetchCallbackParam

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

cacheNames

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

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

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

ประเภท

ออบเจ็กต์

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

• googleAnalytics

  สตริง

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

  สตริง

• คำนำหน้า

  สตริง

• รันไทม์

  สตริง

• คำต่อท้าย

  สตริง

เมธอด

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

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

• Promise<Response>

registerQuotaErrorCallback()

workbox-core.registerQuotaErrorCallback(
  callback: Function,
)

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

พารามิเตอร์

• Callback

  ฟังก์ชัน

setCacheNameDetails()

workbox-core.setCacheNameDetails(
  details: PartialCacheNameDetails,
)

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

พารามิเตอร์

• รายละเอียด

  PartialCacheNameDetails

skipWaiting()

workbox-core.skipWaiting()

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

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