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

โมดูล 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 จะตอบโจทย์ความต้องการของนักพัฒนาแอปส่วนใหญ่ อย่างไรก็ตาม workbox-build ยังรองรับโหมดอื่นที่อาจเหมาะสมกับกรณีการใช้งานบางอย่าง

getManifest โหมด

ซึ่งในเชิงแนวคิดจะคล้ายกับinjectManifestโหมด แต่แทนที่จะเพิ่มไฟล์ Manifest ลงใน Service Worker ของแหล่งที่มา ฟังก์ชันนี้จะแสดงผลอาร์เรย์ของรายการ 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

    (string | ManifestEntry)[] ไม่บังคับ

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

  • dontCacheBustURLsMatching

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

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

  • 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

ประเภท

Omit<GetManifestResult"manifestEntries"
> & object

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

  • filePaths

    string[]

GeneratePartial

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

  • babelPresetEnvTargets

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

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

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

  • cacheId

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

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

  • cleanupOutdatedCaches

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

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

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

  • clientsClaim

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

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

    ไม่ว่า Service Worker ควรเริ่มควบคุม ไคลเอ็นต์ที่มีอยู่ทันทีที่เปิดใช้งานหรือไม่

  • directoryIndex

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

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

  • disableDevLogs

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

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

  • ignoreURLParametersMatching

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

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

  • importScripts

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

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

  • inlineWorkboxRuntime

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

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

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

  • โหมด

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

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

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

  • navigateFallback

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

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

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

  • navigateFallbackAllowlist

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

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

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

  • navigateFallbackDenylist

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

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

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

  • navigationPreload

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

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

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

  • offlineGoogleAnalytics

    boolean | GoogleAnalyticsInitializeOptions ไม่บังคับ

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

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

  • runtimeCaching

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

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

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

  • skipWaiting

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

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

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

  • sourcemap

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

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

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

GenerateSWOptions

ประเภท

BasePartial & GlobPartial & GeneratePartial & RequiredSWDestPartial & OptionalGlobDirectoryPartial

GetManifestOptions

ประเภท

BasePartial & GlobPartial & RequiredGlobDirectoryPartial

GetManifestResult

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

  • จำนวน

    ตัวเลข

  • manifestEntries

    ManifestEntry[]

  • ขนาด

    ตัวเลข

  • คำเตือน

    string[]

GlobPartial

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

  • globFollow

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

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

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

  • globIgnores

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

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

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

  • globPatterns

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

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

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

  • templatedURLs

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

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

InjectManifestOptions

ประเภท

BasePartial & GlobPartial & InjectPartial & RequiredSWDestPartial & RequiredGlobDirectoryPartial

InjectPartial

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

  • injectionPoint

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

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

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

  • swSrc

    สตริง

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

ManifestEntry

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

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

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

  • revision

    สตริง

  • URL

    สตริง

ManifestTransform()

workbox-build.ManifestTransform(
  manifestEntries: (ManifestEntry & object)[],
  compilation?: unknown,
): Promise<ManifestTransformResult> | ManifestTransformResult

ประเภท

ฟังก์ชัน

พารามิเตอร์

  • manifestEntries

    (ManifestEntry & object)[]

    • ขนาด

      ตัวเลข

  • การรวบรวม

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

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

ManifestTransformResult

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

  • ไฟล์ Manifest

    (ManifestEntry & object)[]

    • ขนาด

      ตัวเลข

  • คำเตือน

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

OptionalGlobDirectoryPartial

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

  • globDirectory

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

    ไดเรกทอรีในเครื่องที่คุณต้องการจับคู่กับ globPatterns เส้นทางนี้ เกี่ยวข้องกับไดเรกทอรีปัจจุบัน

RequiredGlobDirectoryPartial

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

  • globDirectory

    สตริง

    ไดเรกทอรีในเครื่องที่คุณต้องการจับคู่กับ globPatterns เส้นทางนี้ เกี่ยวข้องกับไดเรกทอรีปัจจุบัน

RequiredSWDestPartial

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

  • swDest

    สตริง

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

RuntimeCaching

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

  • ตัวแฮนเดิล

    RouteHandler | StrategyName

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

  • method

    HTTPMethod ไม่บังคับ

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

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

  • ตัวเลือก

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

    • backgroundSync

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

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

      • ชื่อ

        สตริง

      • ตัวเลือก

        QueueOptions ไม่บังคับ

    • broadcastUpdate

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

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

    • cacheName

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

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

    • cacheableResponse

      CacheableResponseOptions ไม่บังคับ

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

    • วันหมดอายุ

      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

        สตริง

    • rangeRequests

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

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

  • urlPattern

    string | RegExp | RouteMatchCallback

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

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

StrategyName

ค่าแจกแจง

"CacheFirst"

"CacheOnly"

"NetworkFirst"

"NetworkOnly"

"StaleWhileRevalidate"

WebpackGenerateSWOptions

ประเภท

BasePartial & WebpackPartial & GeneratePartial & WebpackGenerateSWPartial

WebpackGenerateSWPartial

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

  • importScriptsViaChunks

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

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

  • swDest

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

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

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

WebpackInjectManifestOptions

ประเภท

BasePartial & WebpackPartial & InjectPartial & WebpackInjectManifestPartial

WebpackInjectManifestPartial

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

  • compileSrc

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

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

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

  • swDest

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

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

  • webpackCompilationPlugins

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

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

WebpackPartial

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

  • แบบเปียก

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

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

  • ยกเว้น

    (string | RegExp | function)[] optional

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

  • excludeChunks

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

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

  • รวม

    (string | RegExp | function)[] optional

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

  • โหมด

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

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

เมธอด

copyWorkboxLibraries()

workbox-build.copyWorkboxLibraries(
  destDirectory: string,
): Promise<string>

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

คุณอาจใช้ Workbox จาก URL ของ CDN อย่างเป็นทางการแทนการติดตั้งใช้งานสำเนาในเครื่องเหล่านี้

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

พารามิเตอร์

  • destDirectory

    สตริง

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

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

  • Promise<string>

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

generateSW()

workbox-build.generateSW(
  config: GenerateSWOptions,
): Promise<BuildResult>

วิธีนี้จะสร้างรายการ 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,
): Promise<GetManifestResult>

เมธอดนี้จะแสดงรายการ 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,
): string

พารามิเตอร์

  • moduleName

    สตริง

  • buildType

    BuildType

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

  • สตริง

injectManifest()

workbox-build.injectManifest(
  config: InjectManifestOptions,
): Promise<BuildResult>

วิธีนี้จะสร้างรายการ 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: '...',
});

พารามิเตอร์

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