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

โมดูล workbox-build จะผสานรวมเข้ากับกระบวนการบิลด์แบบ Node และสามารถสร้าง 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 ภายในสคริปต์บิลด์ที่อิงตาม Node โดยใช้ตัวเลือกการกําหนดค่าที่พบบ่อยที่สุด ดังนี้

// 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 ภายในสคริปต์บิลด์ที่อิงตาม Node โดยใช้ตัวเลือกการกําหนดค่าที่พบบ่อยที่สุด ดังนี้

// 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 รองรับอีก 1 โหมดที่อาจเหมาะกับบางกรณีการใช้งาน

โหมด getManifest

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

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

// 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

    RegExp ไม่บังคับ

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

ประเภท

ละเว้น<GetManifestResult"manifestEntries"
> & ออบเจ็กต์

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

  • filePaths

    string[]

GeneratePartial

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

  • babelPresetEnvTargets

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

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

    เป้าหมายที่จะส่งให้กับ babel-preset-env เมื่อแปลงไฟล์ Service Worker Bundle

  • 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 ระดับบนสุด แต่ต้องการรวมโค้ดเพิ่มเติม เช่น โปรแกรมรับฟังเหตุการณ์ Push

  • inlineWorkboxRuntime

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

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

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

  • โหมด

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

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

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

  • navigateFallback

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

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

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

  • navigateFallbackAllowlist

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

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

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

  • navigateFallbackDenylist

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

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

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

  • 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 ระบบจะเพิ่ม message Listener แทน ซึ่งจะช่วยให้หน้าเว็บไคลเอ็นต์ทริกเกอร์ 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

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

  • globIgnores

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

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

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

  • globPatterns

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

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

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

  • globStrict

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

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

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

  • templatedURLs

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

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

InjectManifestOptions

ประเภท

BasePartial & GlobPartial & InjectPartial & RequiredSWDestPartial & RequiredGlobDirectoryPartial

InjectPartial

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

  • injectionPoint

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

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

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

  • swSrc

    สตริง

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

ManifestEntry

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

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

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

  • การแก้ไข

    สตริง

  • URL

    สตริง

ManifestTransform()

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

ประเภท

ฟังก์ชัน

พารามิเตอร์

  • manifestEntries

    (ManifestEntry & object)[]

    • ขนาด

      ตัวเลข

  • ผลงานเพลง

    unknown ไม่บังคับ

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

ManifestTransformResult

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

  • ไฟล์ Manifest

    (ManifestEntry & object)[]

    • ขนาด

      ตัวเลข

  • คำเตือน

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

OptionalGlobDirectoryPartial

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

  • globDirectory

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

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

RequiredGlobDirectoryPartial

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

  • globDirectory

    สตริง

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

RequiredSWDestPartial

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

  • swDest

    สตริง

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

RuntimeCaching

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

  • ซึ่งจะกําหนดวิธีที่รันไทม์จะสร้างการตอบกลับ หากต้องการใช้ 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)[] ไม่บังคับ

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

  • excludeChunks

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

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

  • รวม

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

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

  • โหมด

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

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

เมธอด

copyWorkboxLibraries()

workbox-build.copyWorkboxLibraries(
  destDirectory: string,
)

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

คุณสามารถใช้ Workbox จาก URL CDN อย่างเป็นทางการแทนการติดตั้งใช้งานสําเนาในเครื่อง

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

พารามิเตอร์

  • destDirectory

    สตริง

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

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

  • Promise<string>

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

generateSW()

workbox-build.generateSW(
  config: GenerateSWOptions,
)

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

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

ระบบจะเขียนไฟล์ Service Worker ที่พร้อมใช้งานลงในดิสก์ที่ swDest โดยอิงตามไฟล์ 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 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

    สตริง

  • buildType

    BuildType

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

  • สตริง

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

พารามิเตอร์

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