การสร้างกล่องงาน

โมดูล workbox-build ผสานรวมเข้ากับกระบวนการบิลด์ที่อิงตามโหนด และสามารถสร้าง Service Worker ทั้งหมด หรือแค่สร้างรายการเนื้อหาเพื่อแคชล่วงหน้าที่ใช้ภายใน Service Worker ที่มีอยู่ได้

2 โหมดที่นักพัฒนาซอฟต์แวร์ส่วนใหญ่จะใช้คือ generateSW และ injectManifest คำตอบสำหรับคำถามต่อไปนี้จะช่วยให้คุณเลือกโหมดและการกำหนดค่าที่เหมาะสมที่จะใช้ได้

โหมดที่ควรใช้

generateSW

โหมด generateSW จะสร้างไฟล์ Service Worker ให้คุณ ซึ่งปรับแต่งผ่านตัวเลือกการกำหนดค่า และเขียนไฟล์ลงในดิสก์

กรณีที่ควรใช้ generateSW

  • คุณต้องการแคชไฟล์ล่วงหน้า
  • คุณต้องมีการแคชรันไทม์ที่ไม่ซับซ้อน

เมื่อใดที่ไม่ควรใช้ generateSW

  • คุณต้องการใช้ฟีเจอร์ Service Worker อื่นๆ (เช่น Web Push)
  • คุณต้องการนำเข้าสคริปต์เพิ่มเติม หรือเพิ่มตรรกะเพิ่มเติมสำหรับกลยุทธ์การแคชที่กำหนดเอง

injectManifest

โหมด injectManifest จะสร้างรายการ URL เพื่อแคชล่วงหน้าและเพิ่มไฟล์ Manifest สำหรับแคชล่วงหน้านั้นลงในไฟล์ Service Worker ที่มีอยู่ มิฉะนั้นจะปล่อยไฟล์ไว้ตามเดิม

กรณีที่ควรใช้ injectManifest

  • คุณต้องการควบคุม Service Worker ได้มากขึ้น
  • คุณต้องการแคชไฟล์ล่วงหน้า
  • คุณต้องปรับแต่งการกำหนดเส้นทางและกลยุทธ์
  • คุณต้องการใช้ Service Worker กับฟีเจอร์ของแพลตฟอร์มอื่นๆ (เช่น Web Push)

เมื่อใดที่ไม่ควรใช้ injectManifest

  • คุณต้องการวิธีที่ง่ายที่สุดในการเพิ่ม Service Worker ลงในเว็บไซต์

โหมด generateSW

คุณสามารถใช้โหมด generateSW ภายในสคริปต์บิลด์ตามโหนดได้โดยใช้ตัวเลือกการกำหนดค่าที่พบบ่อยที่สุด เช่น

// Inside of build.js:
const {generateSW} = require('workbox-build');

// These are some common options, and not all are required.
// Consult the docs for more info.
generateSW({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
  navigateFallback: '...',
  runtimeCaching: [{
    // Routing via a matchCallback function:
    urlPattern: ({request, url}) => ...,
    handler: '...',
    options: {
      cacheName: '...',
      expiration: {
        maxEntries: ...,
      },
    },
  }, {
    // Routing via a RegExp:
    urlPattern: new RegExp('...'),
    handler: '...',
    options: {
      cacheName: '...',
      plugins: [..., ...],
    },
  }],
  skipWaiting: ...,
  swDest: '...',
}).then(({count, size, warnings}) => {
  if (warnings.length > 0) {
    console.warn(
      'Warnings encountered while generating a service worker:',
      warnings.join('\n')
    );
  }

  console.log(`Generated a service worker, which will precache ${count} files, totaling ${size} bytes.`);
});

การดำเนินการนี้จะสร้าง Service Worker ที่มีการตั้งค่าการแคชล่วงหน้าสำหรับไฟล์ทั้งหมดที่เลือกโดยการกำหนดค่าของคุณ และกฎการแคชรันไทม์ที่มีให้

ดูตัวเลือกการกำหนดค่าแบบเต็มได้ในเอกสารอ้างอิง

โหมด injectManifest

คุณสามารถใช้โหมด injectManifest ภายในสคริปต์บิลด์ตามโหนดได้โดยใช้ตัวเลือกการกำหนดค่าที่พบบ่อยที่สุด เช่น

// Inside of build.js:
const {injectManifest} = require('workbox-build');

// These are some common options, and not all are required.
// Consult the docs for more info.
injectManifest({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
  swDest: '...',
  swSrc: '...',
}).then(({count, size, warnings}) => {
  if (warnings.length > 0) {
    console.warn(
      'Warnings encountered while injecting the manifest:',
      warnings.join('\n')
    );
  }

  console.log(`Injected a manifest which will precache ${count} files, totaling ${size} bytes.`);
});

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

ดูตัวเลือกการกำหนดค่าแบบเต็มได้ในเอกสารอ้างอิง

โหมดเพิ่มเติม

เราคาดหวังว่า generateSW หรือ injectManifest จะเหมาะกับความต้องการของนักพัฒนาแอปส่วนใหญ่ อย่างไรก็ตาม มีอีก 1 โหมดที่ workbox-build รองรับซึ่งอาจเหมาะกับกรณีการใช้งานบางประเภท

โหมด getManifest

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

คุณสามารถใช้โหมด injectManifest ภายในสคริปต์บิลด์ตามโหนดได้โดยใช้ตัวเลือกการกำหนดค่าที่พบบ่อยที่สุด เช่น

// Inside of build.js:
const {getManifest} = require('workbox-build');

// These are some common options, and not all are required.
// Consult the docs for more info.
getManifest({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
}).then(({manifestEntries, count, size, warnings}) => {
  if (warnings.length > 0) {
    console.warn(
      'Warnings encountered while getting the manifest:',
      warnings.join('\n')
    );
  }

  // Do something with the manifestEntries, and potentially log count and size.
});

ดูตัวเลือกการกำหนดค่าแบบเต็มได้ในเอกสารอ้างอิง

ประเภท

BasePartial

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

  • additionalManifestEntries

    (สตริง | ManifestEntry)[] ไม่บังคับ

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

  • dontCacheBustURLsMatching

    นิพจน์ทั่วไป ไม่บังคับ

    เนื้อหาที่ตรงกับที่ระบุนี้จะมีเวอร์ชันไม่ซ้ำกันผ่าน URL และได้รับการยกเว้นจากการป้องกันการใช้ข้อมูลในแคช HTTP ปกติที่ทำเมื่อป้อนข้อมูลแคชล่วงหน้า ถึงแม้จะไม่บังคับ แต่ขอแนะนำว่าหากกระบวนการบิลด์ที่มีอยู่แทรกค่า [hash] ในชื่อไฟล์แต่ละชื่อแล้ว คุณต้องระบุ RegExp ที่จะตรวจพบเหตุการณ์ดังกล่าว เนื่องจากจะช่วยลดแบนด์วิดท์ที่ใช้เมื่อแคชล่วงหน้า

  • manifestTransforms

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

    ฟังก์ชันอย่างน้อย 1 รายการซึ่งจะนำไปใช้ตามลำดับกับไฟล์ Manifest ที่สร้างขึ้น หากระบุ modifyURLPrefix หรือ dontCacheBustURLsMatching ด้วย ระบบจะใช้การเปลี่ยนรูปแบบที่เกี่ยวข้องก่อน

  • maximumFileSizeToCacheInBytes

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

    ค่าเริ่มต้นคือ 2097152

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

  • modifyURLPrefix

    ออบเจ็กต์ ไม่บังคับ

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

    ตัวอย่างการใช้:

    // Replace a '/dist/' prefix with '/', and also prepend
// '/static' to every URL.
modifyURLPrefix: {
  '/dist/': '/',
  '': '/static',
}

BuildResult

ประเภท

> & object

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

  • filePaths

    สตริง[]

GeneratePartial

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

  • babelPresetEnvTargets

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

    ค่าเริ่มต้นคือ ["chrome >= 56"]

    เป้าหมายที่จะส่งต่อไปยัง babel-preset-env เมื่อแปลแพ็กเกจ Service Worker

  • cacheId

    string ไม่บังคับ

    รหัสที่ไม่บังคับที่จะใส่ไว้ข้างหน้าชื่อแคช การดำเนินการนี้มีประโยชน์เป็นหลักสำหรับการพัฒนาในท้องถิ่นซึ่งอาจมีการแสดงโฆษณาหลายเว็บไซต์จากต้นทาง http://localhost:port เดียวกัน

  • cleanupOutdatedCaches

    บูลีน ไม่บังคับ

    ค่าเริ่มต้นคือ false

    Workbox ควรพยายามระบุและลบแคชล่วงหน้าที่สร้างขึ้นโดยเวอร์ชันเก่าที่เข้ากันไม่ได้หรือไม่

  • clientsClaim

    บูลีน ไม่บังคับ

    ค่าเริ่มต้นคือ false

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

  • directoryIndex

    string ไม่บังคับ

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

  • disableDevLogs

    บูลีน ไม่บังคับ

    ค่าเริ่มต้นคือ false

  • ignoreURLParametersMatching

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

    ระบบจะนำชื่อพารามิเตอร์การค้นหาที่ตรงกับ RegExp ในอาร์เรย์นี้ออกก่อนที่จะค้นหาการจับคู่สำหรับแคชล่วงหน้า ซึ่งจะเป็นประโยชน์หากผู้ใช้อาจขอ URL ที่มีพารามิเตอร์ของ URL ที่ใช้ติดตามแหล่งที่มาของการเข้าชม เป็นต้น หากไม่ได้ระบุไว้ ค่าเริ่มต้นจะเป็น [/^utm_/, /^fbclid$/]

  • importScripts

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

    รายการไฟล์ JavaScript ที่ควรส่งไปยัง importScripts() ภายในไฟล์ Service Worker ที่สร้างขึ้น ซึ่งจะมีประโยชน์เมื่อคุณต้องการให้ Workbox สร้างไฟล์ Service Worker ระดับบนสุด แต่ต้องการใส่โค้ดเพิ่มเติมบางอย่าง เช่น Listener เหตุการณ์พุช

  • inlineWorkboxRuntime

    บูลีน ไม่บังคับ

    ค่าเริ่มต้นคือ false

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

  • โหมด

    string ไม่บังคับ

    ค่าเริ่มต้นคือ "production"

    หากตั้งค่าเป็น "เวอร์ชันที่ใช้งานจริง" ระบบจะสร้างแพ็กเกจ Service Worker ที่เพิ่มประสิทธิภาพซึ่งไม่รวมข้อมูลการแก้ไขข้อบกพร่อง หากไม่ได้กำหนดค่าไว้อย่างชัดเจนที่นี่ ระบบจะใช้ค่า process.env.NODE_ENV และหากไม่เป็นไปตามนั้น ค่าจะกลับไปเป็น 'production'

  • navigateFallback

    string ไม่บังคับ

    ค่าเริ่มต้นคือ null

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

  • navigateFallbackAllowlist

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

    อาร์เรย์ทางเลือกของนิพจน์ทั่วไปที่จํากัด URL ที่จะใช้กับลักษณะการทำงานของ navigateFallback ที่กำหนดค่าไว้ ซึ่งจะมีประโยชน์หากระบบควรถือว่า URL ส่วนย่อยของเว็บไซต์เป็นส่วนหนึ่งของแอปหน้าเดียวเท่านั้น หากมีการกำหนดค่าทั้ง navigateFallbackDenylist และ navigateFallbackAllowlist รายการที่ไม่อนุญาตจะมีผลเหนือกว่า

    หมายเหตุ: ระบบอาจประเมินนิพจน์ทั่วไปเหล่านี้เทียบกับ URL ปลายทางทั้งหมดในระหว่างการนําทาง หลีกเลี่ยงการใช้ นิพจน์ทั่วไปที่ซับซ้อน ไม่เช่นนั้นผู้ใช้อาจเห็นความล่าช้าเมื่อไปยังส่วนต่างๆ ในเว็บไซต์

  • navigateFallbackDenylist

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

    อาร์เรย์ทางเลือกของนิพจน์ทั่วไปที่จํากัด URL ที่จะใช้กับลักษณะการทำงานของ navigateFallback ที่กำหนดค่าไว้ ซึ่งจะมีประโยชน์หากระบบควรถือว่า URL ส่วนย่อยของเว็บไซต์เป็นส่วนหนึ่งของแอปหน้าเดียวเท่านั้น หากกำหนดค่าทั้ง navigateFallbackDenylist และ navigateFallbackAllowlist รายการที่ไม่อนุญาตจะมีความสำคัญเหนือกว่า

    หมายเหตุ: ระบบอาจประเมินนิพจน์ทั่วไปเหล่านี้เทียบกับ URL ปลายทางทั้งหมดในระหว่างการนําทาง หลีกเลี่ยงการใช้ นิพจน์ทั่วไปที่ซับซ้อน ไม่เช่นนั้นผู้ใช้อาจเห็นความล่าช้าเมื่อไปยังส่วนต่างๆ ในเว็บไซต์

  • navigationPreload

    บูลีน ไม่บังคับ

    ค่าเริ่มต้นคือ false

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

  • offlineGoogleAnalytics

    บูลีน | GoogleAnalyticsInitializeOptions ไม่บังคับ

    ค่าเริ่มต้นคือ false

    ควบคุมว่าจะรวมการสนับสนุนสำหรับ Google Analytics ออฟไลน์หรือไม่ เมื่อtrue ระบบจะเพิ่มการเรียก initialize() ของ workbox-google-analytics ไปยัง Service Worker ที่คุณสร้างขึ้น เมื่อตั้งค่าเป็น Object ระบบจะส่งออบเจ็กต์นั้นไปยังการเรียก initialize() เพื่อให้คุณปรับแต่งลักษณะการทำงานได้

  • runtimeCaching

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

    เมื่อใช้เครื่องมือสร้างของ Workbox เพื่อสร้าง Service Worker คุณจะระบุการกำหนดค่าการแคชรันไทม์ได้อย่างน้อย 1 รายการ จากนั้นจะมีการแปลเป็นการเรียก workbox-routing.registerRoute โดยใช้การกำหนดค่าการจับคู่และเครื่องจัดการที่คุณกำหนด

    สำหรับตัวเลือกทั้งหมด โปรดดูเอกสาร workbox-build.RuntimeCaching ตัวอย่างด้านล่างแสดงการกำหนดค่าทั่วไป โดยกำหนดเส้นทางรันไทม์ไว้ 2 เส้นทาง

  • skipWaiting

    บูลีน ไม่บังคับ

    ค่าเริ่มต้นคือ false

    จะเพิ่มการเรียกใช้ที่ไม่มีเงื่อนไขไปยัง skipWaiting() ให้กับ Service Worker ที่สร้างขึ้นหรือไม่ หากเป็น false ระบบจะเพิ่ม Listener message แทน ซึ่งทำให้หน้าไคลเอ็นต์ทริกเกอร์ skipWaiting() โดยการเรียกใช้ postMessage({type: 'SKIP_WAITING'}) ในโปรแกรมทำงานของบริการรอ

  • การแมปแหล่งที่มา

    บูลีน ไม่บังคับ

    ค่าเริ่มต้นคือ true

    เลือกว่าจะสร้างการแมปแหล่งที่มาสำหรับไฟล์ Service Worker ที่สร้างขึ้นหรือไม่

GenerateSWOptions

ประเภท

BasePartial & GlobPartial & GeneratePartial & RequiredSWDestPartial & OptionalGlobDirectoryPartial

GetManifestOptions

ประเภท

BasePartial และ GlobPartial & RequiredGlobDirectoryPartial

GetManifestResult

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

  • จำนวน

    ตัวเลข

  • manifestEntries

    ManifestEntry[]

  • ขนาด

    ตัวเลข

  • คำเตือน

    สตริง[]

GlobPartial

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

  • globFollow

    บูลีน ไม่บังคับ

    ค่าเริ่มต้นคือ true

    กำหนดว่าจะติดตามลิงก์สัญลักษณ์หรือไม่เมื่อสร้างไฟล์ Manifest สำหรับแคชล่วงหน้า ดูคำจำกัดความของ follow ในเอกสารประกอบสำหรับ glob เพิ่มเติม

  • globIgnores

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

    ค่าเริ่มต้นคือ ["**\/node_modules\/**\/*"]

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

  • globPatterns

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

    ค่าเริ่มต้นคือ ["**\/*.{js,wasm,css,html}"]

    ไฟล์ที่ตรงกับรูปแบบเหล่านี้จะรวมอยู่ในไฟล์ Manifest สำหรับแคชล่วงหน้า หากต้องการข้อมูลเพิ่มเติม โปรดดูเกริ่นนำ glob

  • globStrict

    บูลีน ไม่บังคับ

    ค่าเริ่มต้นคือ true

    หากเป็น "จริง" ข้อผิดพลาดในการอ่านไดเรกทอรีเมื่อสร้างไฟล์ Manifest สำหรับแคชล่วงหน้าจะทำให้บิลด์ล้มเหลว หากเป็น "เท็จ" ระบบจะข้ามไดเรกทอรี ที่เป็นปัญหา ดูคําจํากัดความของ strict ในเอกสารประกอบของ glob

  • templatedURLs

    ออบเจ็กต์ ไม่บังคับ

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

InjectManifestOptions

ประเภท

BasePartial และ GlobPartial & InjectPartial & RequiredSWDestPartial & RequiredGlobDirectoryPartial

InjectPartial

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

  • injectionPoint

    string ไม่บังคับ

    ค่าเริ่มต้นคือ "self.__WB_MANIFEST"

    สตริงที่จะค้นหาภายในไฟล์ swSrc เมื่อพบแล้ว ระบบจะใช้ไฟล์ Manifest สำหรับแคชล่วงหน้าที่สร้างขึ้นมาแทนที่

  • swSrc

    string

    เส้นทางและชื่อไฟล์ของไฟล์ Service Worker ที่จะมีการอ่านระหว่างกระบวนการบิลด์ซึ่งสัมพันธ์กับไดเรกทอรีการทำงานปัจจุบัน

ManifestEntry

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

  • ความสมบูรณ์

    string ไม่บังคับ

  • การแก้ไข

    string

  • url

    string

ManifestTransform()

workbox-build.ManifestTransform(
  manifestEntries: (ManifestEntry & object)[],
  compilation?: unknown,
)

ประเภท

ฟังก์ชัน

พารามิเตอร์

  • manifestEntries

    (ManifestEntry และออบเจ็กต์)[]

    • ขนาด

      ตัวเลข

  • รวมคลิป

    ไม่ทราบ ไม่บังคับ

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

ManifestTransformResult

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

  • ไฟล์ Manifest

    (ManifestEntry และออบเจ็กต์)[]

    • ขนาด

      ตัวเลข

  • คำเตือน

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

OptionalGlobDirectoryPartial

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

  • globDirectory

    string ไม่บังคับ

    ไดเรกทอรีในเครื่องที่คุณต้องการจับคู่กับ globPatterns โดยเส้นทางจะสัมพัทธ์กับไดเรกทอรีปัจจุบัน

RequiredGlobDirectoryPartial

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

  • globDirectory

    string

    ไดเรกทอรีในเครื่องที่คุณต้องการจับคู่กับ globPatterns โดยเส้นทางจะสัมพัทธ์กับไดเรกทอรีปัจจุบัน

RequiredSWDestPartial

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

  • swDest

    string

    เส้นทางและชื่อไฟล์ของไฟล์ Service Worker ที่จะสร้างขึ้นโดยกระบวนการบิลด์ซึ่งสัมพันธ์กับไดเรกทอรีการทำงานปัจจุบัน ซึ่งต้องลงท้ายด้วย ".js"

RuntimeCaching

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

  • ตัวแฮนเดิล

    RouteHandler | StrategyName

    การดำเนินการนี้จะกำหนดวิธีที่เส้นทางรันไทม์จะสร้างคำตอบ หากต้องการใช้ workbox-strategies ในตัว โปรดระบุชื่อ เช่น 'NetworkFirst' หรืออาจใช้ฟังก์ชันโค้ดเรียกกลับของ workbox-core.RouteHandler ที่มีตรรกะการตอบกลับที่กําหนดเองก็ได้

  • method

    HTTPMethod ไม่บังคับ

    ค่าเริ่มต้นคือ "GET"

    วิธี HTTP ที่จะใช้จับคู่ โดยปกติแล้ว ค่าเริ่มต้นของ 'GET' จะมีค่าเพียงพอ เว้นแต่คุณจะต้องจับคู่อย่างชัดเจนถึง 'POST', 'PUT' หรือคำขอประเภทอื่น

  • ตัวเลือก

    ออบเจ็กต์ ไม่บังคับ

    • backgroundSync

      ออบเจ็กต์ ไม่บังคับ

      การกำหนดค่านี้จะเพิ่มอินสแตนซ์ workbox-background-sync.BackgroundSyncPlugin ไปยัง workbox-strategies ที่กำหนดค่าไว้ใน handler

      • ชื่อ

        string

      • ตัวเลือก

        QueueOptions ไม่บังคับ

    • broadcastUpdate

      ออบเจ็กต์ ไม่บังคับ

      การกำหนดค่านี้จะเพิ่มอินสแตนซ์ workbox-broadcast-update.BroadcastUpdatePlugin ไปยัง workbox-strategies ที่กำหนดค่าไว้ใน handler

    • cacheName

      string ไม่บังคับ

      หากระบุ การตั้งค่านี้จะตั้งค่าพร็อพเพอร์ตี้ cacheName ของ workbox-strategies ที่กำหนดค่าใน handler

    • cacheableResponse

      CacheableResponseOptions ไม่บังคับ

      การกำหนดค่านี้จะเพิ่มอินสแตนซ์ workbox-cacheable-response.CacheableResponsePlugin ไปยัง workbox-strategies ที่กำหนดค่าไว้ใน handler

    • expiration

      ExpirationPluginOptions ไม่บังคับ

      การกำหนดค่านี้จะเพิ่มอินสแตนซ์ workbox-expiration.ExpirationPlugin ไปยัง workbox-strategies ที่กำหนดค่าไว้ใน handler

    • fetchOptions

      RequestInit ไม่บังคับ

      การกำหนดค่านี้จะส่งต่อค่า fetchOptions ไปยัง workbox-strategies ที่กำหนดค่าใน handler

    • matchOptions

      CacheQueryOptions ไม่บังคับ

      การกำหนดค่านี้จะส่งต่อค่า matchOptions ไปยัง workbox-strategies ที่กำหนดค่าใน handler

    • networkTimeoutSeconds

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

      หากระบุ การตั้งค่านี้จะตั้งค่าพร็อพเพอร์ตี้ networkTimeoutSeconds ของ workbox-strategies ที่กำหนดค่าใน handler โปรดทราบว่าเฉพาะ 'NetworkFirst' และ 'NetworkOnly' เท่านั้นที่รองรับ networkTimeoutSeconds

    • ปลั๊กอิน

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

      การกำหนดค่านี้จะทำให้สามารถใช้ปลั๊กอิน Workbox ได้อย่างน้อย 1 รายการที่ไม่มีตัวเลือก "ทางลัด" (เช่น expiration สำหรับ workbox-expiration.ExpirationPlugin) ระบบจะเพิ่มปลั๊กอินที่ระบุไว้ที่นี่ไปยัง workbox-strategies ที่กำหนดค่าไว้ใน handler

    • precacheFallback

      ออบเจ็กต์ ไม่บังคับ

      การกำหนดค่านี้จะเพิ่มอินสแตนซ์ workbox-precaching.PrecacheFallbackPlugin ไปยัง workbox-strategies ที่กำหนดค่าไว้ใน handler

      • fallbackURL

        string

    • rangeRequests

      บูลีน ไม่บังคับ

      การเปิดใช้การดำเนินการนี้จะเพิ่มอินสแตนซ์ workbox-range-requests.RangeRequestsPlugin ไปยัง workbox-strategies ที่กำหนดค่าใน handler

  • urlPattern

    สตริง | RegExp | RouteMatchCallback

    เกณฑ์การจับคู่นี้จะกำหนดว่าตัวแฮนเดิลที่กำหนดค่าไว้จะสร้างการตอบกลับสำหรับคำขอที่ไม่ตรงกับ URL ในแคชล่วงหน้ารายการใดรายการหนึ่งหรือไม่ หากมีการกำหนดเส้นทาง RuntimeCaching ไว้หลายเส้นทาง เส้นทางแรกที่ตรงกับ urlPattern จะเป็นเส้นทางที่ตอบกลับ

    ค่านี้จะแมปกับพารามิเตอร์แรกที่ส่งไปยัง workbox-routing.registerRoute โดยตรง เราขอแนะนําให้ใช้ฟังก์ชัน workbox-core.RouteMatchCallback เพื่อความยืดหยุ่นสูงสุด

StrategyName

ค่าแจกแจง

"CacheFirst"

"NetworkFirst"

WebpackGenerateSWOptions

ประเภท

BasePartial และ WebpackPartial และ GeneratePartial & WebpackGenerateSWPartial

WebpackGenerateSWPartial

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

  • importScriptsViaChunks

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

    ชื่อของกลุ่ม Webpack อย่างน้อย 1 ชื่อ เนื้อหาของส่วนดังกล่าวจะรวมอยู่ใน Service Worker ที่สร้างขึ้นผ่านการโทรไปยัง importScripts()

  • swDest

    string ไม่บังคับ

    ค่าเริ่มต้นคือ "service-worker.js"

    ชื่อเนื้อหาของไฟล์ Service Worker ที่สร้างโดยปลั๊กอินนี้

WebpackInjectManifestOptions

ประเภท

BasePartial และ WebpackPartial และ InjectPartial & WebpackInjectManifestPartial

WebpackInjectManifestPartial

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

  • compileSrc

    บูลีน ไม่บังคับ

    ค่าเริ่มต้นคือ true

    เมื่อ true (ค่าเริ่มต้น) ไฟล์ swSrc จะได้รับการคอมไพล์โดย Webpack เมื่อ false การรวบรวมจะไม่เกิดขึ้น (และจะใช้ webpackCompilationPlugins ไม่ได้) ตั้งค่าเป็น false หากต้องการแทรกไฟล์ Manifest เช่น ไฟล์ JSON

  • swDest

    string ไม่บังคับ

    ชื่อเนื้อหาของไฟล์ Service Worker ที่ปลั๊กอินนี้จะสร้าง หากไม่ระบุ ชื่อจะอิงตามชื่อ swSrc

  • webpackCompilationPlugins

    ทั้งหมด[] ไม่บังคับ

    ปลั๊กอิน webpack (ไม่บังคับ) ที่จะใช้เมื่อคอมไพล์ไฟล์อินพุต swSrc ใช้ได้เฉพาะเมื่อ compileSrc คือ true

WebpackPartial

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

  • เป็นท่อน

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

    ชื่อกลุ่มอย่างน้อย 1 ชื่อซึ่งควรรวมไฟล์เอาต์พุตที่เกี่ยวข้องไว้ในไฟล์ Manifest สำหรับแคชล่วงหน้า

  • ไม่รวม

    (สตริง | RegExp | function)[] ไม่บังคับ

    ตัวระบุอย่างน้อย 1 รายการใช้เพื่อยกเว้นเนื้อหาจากไฟล์ Manifest สำหรับแคชล่วงหน้า ซึ่งระบบจะตีความตามกฎเดียวกันกับตัวเลือก exclude มาตรฐานของ webpack หากไม่ได้ระบุไว้ ค่าเริ่มต้นจะเป็น [/\.map$/, /^manifest.*\.js$]

  • excludeChunks

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

    ชื่อกลุ่มอย่างน้อย 1 ชื่อซึ่งควรยกเว้นไฟล์เอาต์พุตที่เกี่ยวข้องจากไฟล์ Manifest สำหรับแคชล่วงหน้า

  • รวม

    (สตริง | RegExp | function)[] ไม่บังคับ

    ตัวระบุอย่างน้อย 1 รายการที่ใช้เพื่อรวมเนื้อหาในไฟล์ Manifest ของแคชล่วงหน้า ซึ่งระบบจะตีความตามกฎเดียวกันกับตัวเลือก include มาตรฐานของ webpack

  • โหมด

    string ไม่บังคับ

    หากตั้งค่าเป็น "เวอร์ชันที่ใช้งานจริง" ระบบจะสร้างแพ็กเกจ Service Worker ที่เพิ่มประสิทธิภาพซึ่งไม่รวมข้อมูลการแก้ไขข้อบกพร่อง หากไม่ได้กำหนดค่าไว้อย่างชัดเจนที่นี่ ระบบจะใช้ค่า mode ที่กำหนดค่าในการคอมไพล์ webpack ปัจจุบัน

วิธีการ

copyWorkboxLibraries()

workbox-build.copyWorkboxLibraries(
  destDirectory: string,
)

การดำเนินการนี้จะคัดลอกชุดไลบรารีรันไทม์ที่ Workbox ใช้ไปยังไดเรกทอรีในเครื่อง ซึ่งควรใช้งานควบคู่กับไฟล์ของ Service Worker

อีกทางเลือกหนึ่งสำหรับการทำให้สำเนาในเครื่องเหล่านี้ใช้งานได้ คุณสามารถใช้ Workbox จาก CDN URL อย่างเป็นทางการแทน

มีการใช้วิธีนี้เพื่อประโยชน์ของนักพัฒนาซอฟต์แวร์ที่ใช้ workbox-build.injectManifest ซึ่งไม่ต้องการใช้สำเนา CDN ของ Workbox นักพัฒนาแอปที่ใช้ workbox-build.generateSW ไม่จำเป็นต้องเรียกใช้เมธอดนี้อย่างชัดแจ้ง

พารามิเตอร์

  • destDirectory

    string

    เส้นทางไปยังไดเรกทอรีระดับบนสุดที่จะสร้างไดเรกทอรีใหม่ของไลบรารี

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

  • คำสัญญา<string>

    ชื่อของไดเรกทอรีที่สร้างใหม่

generateSW()

workbox-build.generateSW(
  config: GenerateSWOptions,
)

เมธอดนี้จะสร้างรายการ URL ที่จะทำการแคชล่วงหน้า ซึ่งเรียกว่า "ไฟล์ Manifest สำหรับแคชล่วงหน้า" ตามตัวเลือกที่คุณระบุ

นอกจากนี้ยังใช้ตัวเลือกเพิ่มเติมที่กำหนดค่าลักษณะการทำงานของ Service Worker เช่น กฎ runtimeCaching ที่โปรแกรมควรใช้

ตามไฟล์ Manifest สำหรับแคชล่วงหน้าและการกำหนดค่าเพิ่มเติม ไฟล์ดังกล่าวจะเขียนไฟล์ Service Worker ที่พร้อมใช้งานลงในดิสก์ที่ swDest

// The following lists some common options; see the rest of the documentation
// for the full set of options and defaults.
const {count, size, warnings} = await generateSW({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
  navigateFallback: '...',
  runtimeCaching: [{
    // Routing via a matchCallback function:
    urlPattern: ({request, url}) => ...,
    handler: '...',
    options: {
      cacheName: '...',
      expiration: {
        maxEntries: ...,
      },
    },
  }, {
    // Routing via a RegExp:
    urlPattern: new RegExp('...'),
    handler: '...',
    options: {
      cacheName: '...',
      plugins: [..., ...],
    },
  }],
  skipWaiting: ...,
  swDest: '...',
});

พารามิเตอร์

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

getManifest()

workbox-build.getManifest(
  config: GetManifestOptions,
)

เมธอดนี้จะแสดงรายการ URL ที่จะทำการแคชล่วงหน้า ซึ่งเรียกว่า "ไฟล์ Manifest ล่วงหน้า" พร้อมด้วยรายละเอียดเกี่ยวกับจำนวนรายการและขนาดรายการตามตัวเลือกที่คุณระบุ

// The following lists some common options; see the rest of the documentation
// for the full set of options and defaults.
const {count, manifestEntries, size, warnings} = await getManifest({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
});

พารามิเตอร์

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

getModuleURL()

workbox-build.getModuleURL(
  moduleName: string,
  buildType: BuildType,
)

พารามิเตอร์

  • moduleName

    string

  • buildType

    BuildType

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

  • string

injectManifest()

workbox-build.injectManifest(
  config: InjectManifestOptions,
)

เมธอดนี้จะสร้างรายการ URL ที่จะทำการแคชล่วงหน้า ซึ่งเรียกว่า "ไฟล์ Manifest สำหรับแคชล่วงหน้า" ตามตัวเลือกที่คุณระบุ

ไฟล์ Manifest จะถูกแทรกลงในไฟล์ swSrc และสตริงตัวยึดตำแหน่ง injectionPoint จะเป็นตัวกำหนดว่าไฟล์ Manifest ควรไปที่ตำแหน่งใดในไฟล์

ระบบจะเขียนไฟล์ Service Worker สุดท้ายที่แทรกไฟล์ Manifest ไปยังดิสก์ที่ swDest

เมธอดนี้จะไม่คอมไพล์หรือรวมกลุ่มไฟล์ swSrc ของคุณ แต่จะเพียงแต่จัดการกับการแทรกไฟล์ Manifest

// The following lists some common options; see the rest of the documentation
// for the full set of options and defaults.
const {count, size, warnings} = await injectManifest({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
  swDest: '...',
  swSrc: '...',
});

พารามิเตอร์

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