bản dựng hộp công việc

Mô-đun workbox-build tích hợp vào quy trình tạo dựa trên nút và có thể tạo toàn bộ trình chạy dịch vụ hoặc chỉ tạo danh sách các thành phần để lưu vào bộ nhớ đệm trước có thể dùng trong trình chạy dịch vụ hiện có.

Hai chế độ mà hầu hết nhà phát triển sẽ sử dụng là generateSW và injectManifest. Câu trả lời cho những câu hỏi sau đây có thể giúp bạn chọn chế độ và cấu hình phù hợp để sử dụng.

Nên sử dụng chế độ nào

generateSW

Chế độ generateSW sẽ tạo một tệp worker dịch vụ cho bạn, được tuỳ chỉnh thông qua các lựa chọn cấu hình và ghi tệp đó vào đĩa.

Trường hợp sử dụng generateSW

  • Bạn muốn lưu trước các tệp vào bộ nhớ đệm.
  • Bạn có nhu cầu đơn giản về việc lưu vào bộ nhớ đệm trong thời gian chạy.

Trường hợp KHÔNG nên sử dụng generateSW

  • Bạn muốn sử dụng các tính năng khác của Service Worker (tức là Web Push).
  • Bạn muốn nhập các tập lệnh bổ sung hoặc thêm logic bổ sung cho các chiến lược lưu vào bộ nhớ đệm tuỳ chỉnh.

injectManifest

Chế độ injectManifest sẽ tạo một danh sách các URL để lưu vào bộ nhớ đệm trước và thêm tệp kê khai lưu vào bộ nhớ đệm trước đó vào một tệp worker dịch vụ hiện có. Nếu không, tệp sẽ được giữ nguyên.

Trường hợp sử dụng injectManifest

  • Bạn muốn có nhiều quyền kiểm soát hơn đối với service worker.
  • Bạn muốn lưu trước các tệp vào bộ nhớ đệm.
  • Bạn cần tuỳ chỉnh các tuyến đường và chiến lược.
  • Bạn muốn sử dụng service worker với các tính năng khác của nền tảng (ví dụ: Web Push).

Trường hợp KHÔNG nên sử dụng injectManifest

  • Bạn muốn có cách dễ nhất để thêm một worker dịch vụ vào trang web của mình.

Chế độ generateSW

Bạn có thể sử dụng chế độ generateSW trong tập lệnh bản dựng dựa trên nút, bằng cách sử dụng các lựa chọn cấu hình phổ biến nhất, như sau:

// 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.`);
});

Thao tác này sẽ tạo một worker dịch vụ có chế độ thiết lập lưu vào bộ nhớ đệm trước cho tất cả các tệp mà cấu hình của bạn chọn và các quy tắc lưu vào bộ nhớ đệm trong thời gian chạy được cung cấp.

Bạn có thể xem toàn bộ các lựa chọn cấu hình trong tài liệu tham khảo.

Chế độ injectManifest

Bạn có thể sử dụng chế độ injectManifest trong tập lệnh bản dựng dựa trên nút, bằng cách sử dụng các lựa chọn cấu hình phổ biến nhất, như sau:

// 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.`);
});

Thao tác này sẽ tạo một tệp kê khai lưu vào bộ nhớ đệm trước dựa trên các tệp mà cấu hình của bạn chọn và chèn tệp kê khai đó vào tệp trình chạy dịch vụ hiện có.

Bạn có thể xem toàn bộ các lựa chọn cấu hình trong tài liệu tham khảo.

Các chế độ khác

Chúng tôi cho rằng generateSW hoặc injectManifest sẽ phù hợp với nhu cầu của hầu hết nhà phát triển. Tuy nhiên, có một chế độ khác được workbox-build hỗ trợ và có thể phù hợp với một số trường hợp sử dụng nhất định.

Chế độ getManifest

Về mặt khái niệm, chế độ này tương tự như chế độ injectManifest, nhưng thay vì thêm tệp kê khai vào tệp trình chạy dịch vụ nguồn, chế độ này sẽ trả về mảng các mục trong tệp kê khai, cùng với thông tin về số lượng mục và tổng kích thước.

Bạn có thể sử dụng chế độ injectManifest trong tập lệnh bản dựng dựa trên nút, bằng cách sử dụng các lựa chọn cấu hình phổ biến nhất, như sau:

// 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.
});

Bạn có thể xem toàn bộ các lựa chọn cấu hình trong tài liệu tham khảo.

Loại

BasePartial

Thuộc tính

  • additionalManifestEntries

    (string | ManifestEntry)[] không bắt buộc

    Danh sách các mục cần được lưu vào bộ nhớ đệm trước, ngoài mọi mục được tạo trong quá trình định cấu hình bản dựng.

  • dontCacheBustURLsMatching

    RegExp không bắt buộc

    Các thành phần phù hợp với điều kiện này sẽ được giả định là có phiên bản duy nhất thông qua URL của chúng và được miễn trừ khỏi quy trình phá bộ nhớ đệm HTTP thông thường được thực hiện khi điền sẵn bộ nhớ đệm. Mặc dù không bắt buộc, nhưng bạn nên cung cấp một RegExp sẽ phát hiện giá trị [hash] đó nếu quy trình tạo hiện có của bạn đã chèn giá trị này vào mỗi tên tệp, vì việc này sẽ giảm băng thông tiêu thụ khi lưu trước vào bộ nhớ đệm.

  • manifestTransforms

    ManifestTransform[] không bắt buộc

    Một hoặc nhiều hàm sẽ được áp dụng tuần tự cho tệp kê khai đã tạo. Nếu bạn cũng chỉ định modifyURLPrefix hoặc dontCacheBustURLsMatching, thì các phép biến đổi tương ứng của chúng sẽ được áp dụng trước.

  • maximumFileSizeToCacheInBytes

    number không bắt buộc

    Giá trị mặc định là: 2097152

    Bạn có thể dùng giá trị này để xác định kích thước tối đa của các tệp sẽ được lưu vào bộ nhớ đệm trước. Điều này giúp bạn không vô tình lưu trước vào bộ nhớ đệm các tệp có kích thước rất lớn có thể vô tình khớp với một trong các mẫu của bạn.

  • modifyURLPrefix

    đối tượng không bắt buộc

    Một đối tượng liên kết các tiền tố chuỗi với các giá trị chuỗi thay thế. Bạn có thể dùng thuộc tính này để xoá hoặc thêm tiền tố đường dẫn khỏi một mục trong tệp kê khai nếu chế độ thiết lập lưu trữ web không khớp với chế độ thiết lập hệ thống tệp cục bộ. Để thay thế bằng một lựa chọn linh hoạt hơn, bạn có thể sử dụng lựa chọn manifestTransforms và cung cấp một hàm sửa đổi các mục trong tệp kê khai bằng bất kỳ logic nào mà bạn cung cấp.

    Ví dụ về cách sử dụng:

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

BuildResult

Loại

Omit<GetManifestResult"manifestEntries"
> & object

Thuộc tính

  • filePaths

    string[]

GeneratePartial

Thuộc tính

  • babelPresetEnvTargets

    string[] không bắt buộc

    Giá trị mặc định là: ["chrome >= 56"]

    targets để truyền đến babel-preset-env khi chuyển đổi gói trình chạy dịch vụ.

  • cacheId

    string không bắt buộc

    Mã nhận dạng không bắt buộc sẽ được thêm vào trước tên bộ nhớ đệm. Điều này chủ yếu hữu ích cho quá trình phát triển cục bộ, trong đó nhiều trang web có thể được phân phát từ cùng một nguồn gốc http://localhost:port.

  • cleanupOutdatedCaches

    boolean không bắt buộc

    Giá trị mặc định là: false

    Workbox có nên cố gắng xác định và xoá mọi nội dung được lưu vào bộ nhớ đệm trước do các phiên bản cũ, không tương thích tạo ra hay không.

  • clientsClaim

    boolean không bắt buộc

    Giá trị mặc định là: false

    Liệu service worker có nên bắt đầu kiểm soát mọi ứng dụng hiện có ngay khi kích hoạt hay không.

  • directoryIndex

    string không bắt buộc

    Nếu một yêu cầu điều hướng cho URL kết thúc bằng / không khớp với một URL được lưu trước vào bộ nhớ đệm, thì giá trị này sẽ được thêm vào URL và giá trị đó sẽ được kiểm tra để tìm một kết quả khớp được lưu trước vào bộ nhớ đệm. Bạn nên đặt giá trị này thành giá trị mà máy chủ web đang dùng cho chỉ mục thư mục.

  • disableDevLogs

    boolean không bắt buộc

    Giá trị mặc định là: false

  • ignoreURLParametersMatching

    RegExp[] không bắt buộc

    Mọi tên tham số tìm kiếm khớp với một trong các RegExp trong mảng này sẽ bị xoá trước khi tìm kiếm một kết quả khớp được lưu vào bộ nhớ đệm trước. Điều này rất hữu ích nếu người dùng có thể yêu cầu URL chứa, ví dụ: các tham số URL được dùng để theo dõi nguồn lưu lượng truy cập. Nếu bạn không cung cấp, giá trị mặc định sẽ là [/^utm_/, /^fbclid$/].

  • importScripts

    string[] không bắt buộc

    Danh sách các tệp JavaScript cần được truyền đến importScripts() bên trong tệp trình thực thi dịch vụ đã tạo. Điều này hữu ích khi bạn muốn Workbox tạo tệp trình chạy dịch vụ cấp cao nhất, nhưng muốn thêm một số mã bổ sung, chẳng hạn như trình nghe sự kiện đẩy.

  • inlineWorkboxRuntime

    boolean không bắt buộc

    Giá trị mặc định là: false

    Có nên đưa mã thời gian chạy cho thư viện Workbox vào trình chạy dịch vụ cấp cao nhất hay chia thành một tệp riêng biệt cần được triển khai cùng với trình chạy dịch vụ. Việc tách riêng thời gian chạy có nghĩa là người dùng sẽ không phải tải lại mã Workbox mỗi khi trình chạy dịch vụ cấp cao nhất của bạn thay đổi.

  • chế độ

    string không bắt buộc

    Giá trị mặc định là: "production"

    Nếu bạn đặt thành "production", thì một gói trình chạy dịch vụ được tối ưu hoá sẽ được tạo ra mà không có thông tin gỡ lỗi. Nếu bạn không định cấu hình rõ ràng ở đây, giá trị process.env.NODE_ENV sẽ được sử dụng và nếu không, giá trị này sẽ quay về 'production'.

  • navigateFallback

    string không bắt buộc

    Giá trị mặc định là: null

    Nếu được chỉ định, tất cả các yêu cầu điều hướng đối với những URL không được lưu trước vào bộ nhớ đệm sẽ được thực hiện bằng HTML tại URL được cung cấp. Bạn phải truyền URL của một tài liệu HTML có trong tệp kê khai lưu vào bộ nhớ đệm trước. Thao tác này được dùng trong trường hợp Ứng dụng một trang, trong đó bạn muốn tất cả các thao tác điều hướng đều sử dụng HTML Vỏ ứng dụng chung.

  • navigateFallbackAllowlist

    RegExp[] không bắt buộc

    Một mảng biểu thức chính quy không bắt buộc, hạn chế những URL mà hành vi navigateFallback đã định cấu hình áp dụng. Điều này hữu ích nếu chỉ một tập hợp con URL của trang web được coi là một phần của Ứng dụng một trang. Nếu bạn định cấu hình cả navigateFallbackDenylist và navigateFallbackAllowlist, thì danh sách chặn sẽ được ưu tiên.

    Lưu ý: Các RegExp này có thể được đánh giá dựa trên mọi URL đích trong quá trình điều hướng. Tránh sử dụng biểu thức chính quy phức tạp, nếu không, người dùng có thể gặp phải tình trạng chậm trễ khi điều hướng trên trang web của bạn.

  • navigateFallbackDenylist

    RegExp[] không bắt buộc

    Một mảng biểu thức chính quy không bắt buộc, hạn chế những URL mà hành vi navigateFallback đã định cấu hình áp dụng. Điều này hữu ích nếu chỉ một tập hợp con URL của trang web được coi là một phần của Ứng dụng một trang. Nếu bạn định cấu hình cả navigateFallbackDenylist và navigateFallbackAllowlist, thì danh sách chặn sẽ được ưu tiên.

    Lưu ý: Các RegExp này có thể được đánh giá dựa trên mọi URL đích trong quá trình điều hướng. Tránh sử dụng biểu thức chính quy phức tạp, nếu không, người dùng có thể gặp phải tình trạng chậm trễ khi điều hướng trên trang web của bạn.

  • navigationPreload

    boolean không bắt buộc

    Giá trị mặc định là: false

    Có bật tính năng tải trước điều hướng trong trình chạy dịch vụ đã tạo hay không. Khi đặt thành true, bạn cũng phải sử dụng runtimeCaching để thiết lập một chiến lược phản hồi phù hợp sẽ khớp với các yêu cầu điều hướng và tận dụng phản hồi được tải sẵn.

  • offlineGoogleAnalytics

    boolean | GoogleAnalyticsInitializeOptions không bắt buộc

    Giá trị mặc định là: false

    Kiểm soát việc có hỗ trợ Google Analytics ngoại tuyến hay không. Khi true, lệnh gọi đến initialize() của workbox-google-analytics sẽ được thêm vào trình chạy dịch vụ đã tạo. Khi được đặt thành Object, đối tượng đó sẽ được truyền vào lệnh gọi initialize(), cho phép bạn tuỳ chỉnh hành vi.

  • runtimeCaching

    RuntimeCaching[] không bắt buộc

    Khi sử dụng các công cụ tạo của Workbox để tạo trình chạy dịch vụ, bạn có thể chỉ định một hoặc nhiều cấu hình lưu vào bộ nhớ đệm trong thời gian chạy. Sau đó, các thao tác này sẽ được dịch thành các lệnh gọi workbox-routing.registerRoute bằng cách sử dụng cấu hình đối sánh và trình xử lý mà bạn xác định.

    Để biết tất cả các lựa chọn, hãy xem tài liệu workbox-build.RuntimeCaching. Ví dụ dưới đây cho thấy một cấu hình điển hình, với 2 tuyến đường thời gian chạy được xác định:

  • skipWaiting

    boolean không bắt buộc

    Giá trị mặc định là: false

    Có thêm lệnh gọi vô điều kiện vào skipWaiting() cho trình chạy dịch vụ đã tạo hay không. Nếu false, thì trình nghe message sẽ được thêm vào thay thế, cho phép các trang máy khách kích hoạt skipWaiting() bằng cách gọi postMessage({type: 'SKIP_WAITING'}) trên một trình thực thi dịch vụ đang chờ.

  • sourcemap

    boolean không bắt buộc

    Giá trị mặc định là: true

    Có tạo sourcemap cho các tệp service worker đã tạo hay không.

GenerateSWOptions

Loại

BasePartial & GlobPartial & GeneratePartial & RequiredSWDestPartial & OptionalGlobDirectoryPartial

GetManifestOptions

Loại

BasePartial & GlobPartial & RequiredGlobDirectoryPartial

GetManifestResult

Thuộc tính

  • số lượng

    số

  • manifestEntries

    ManifestEntry[]

  • size

    số

  • cảnh báo

    string[]

GlobPartial

Thuộc tính

  • globFollow

    boolean không bắt buộc

    Giá trị mặc định là: true

    Xác định xem có tuân theo các đường liên kết tượng trưng hay không khi tạo tệp kê khai lưu vào bộ nhớ đệm trước. Để biết thêm thông tin, hãy xem định nghĩa về follow trong tài liệu về glob.

  • globIgnores

    string[] không bắt buộc

    Giá trị mặc định là: ["**\/node_modules\/**\/*"]

    Một tập hợp các tệp so khớp mẫu luôn bị loại trừ khi tạo tệp kê khai lưu vào bộ nhớ đệm trước. Để biết thêm thông tin, hãy xem định nghĩa về ignore trong tài liệu về glob.

  • globPatterns

    string[] không bắt buộc

    Giá trị mặc định là: ["**\/*.{js,wasm,css,html}"]

    Các tệp khớp với bất kỳ mẫu nào trong số này sẽ được đưa vào tệp kê khai lưu trước vào bộ nhớ đệm. Để biết thêm thông tin, hãy xem tài liệu giới thiệu về glob.

  • templatedURLs

    đối tượng không bắt buộc

    Nếu một URL được hiển thị dựa trên một số logic phía máy chủ, thì nội dung của URL đó có thể phụ thuộc vào nhiều tệp hoặc một số giá trị chuỗi duy nhất khác. Các khoá trong đối tượng này là URL được kết xuất phía máy chủ. Nếu các giá trị là một mảng gồm các chuỗi, thì chúng sẽ được diễn giải dưới dạng các mẫu glob và nội dung của mọi tệp khớp với các mẫu sẽ được dùng để tạo phiên bản duy nhất cho URL. Nếu được dùng với một chuỗi duy nhất, thì tham số này sẽ được diễn giải là thông tin duy nhất về việc tạo phiên bản mà bạn đã tạo cho một URL nhất định.

InjectManifestOptions

Loại

BasePartial & GlobPartial & InjectPartial & RequiredSWDestPartial & RequiredGlobDirectoryPartial

InjectPartial

Thuộc tính

  • injectionPoint

    string không bắt buộc

    Giá trị mặc định là: "self.__WB_MANIFEST"

    Chuỗi cần tìm trong tệp swSrc. Sau khi tìm thấy, tệp này sẽ được thay thế bằng tệp kê khai lưu vào bộ nhớ đệm trước được tạo.

  • swSrc

    chuỗi

    Đường dẫn và tên tệp của tệp worker dịch vụ sẽ được đọc trong quá trình tạo, tương ứng với thư mục đang hoạt động.

ManifestEntry

Thuộc tính

  • tính toàn vẹn

    string không bắt buộc

  • bản sửa đổi

    chuỗi

  • url

    chuỗi

ManifestTransform()

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

Loại

hàm

Thông số

  • manifestEntries

    (ManifestEntry & object)[]

    • size

      số

  • tổng hợp

    không xác định không bắt buộc

Giá trị trả về

ManifestTransformResult

Thuộc tính

  • tệp kê khai

    (ManifestEntry & object)[]

    • size

      số

  • cảnh báo

    string[] không bắt buộc

OptionalGlobDirectoryPartial

Thuộc tính

  • globDirectory

    string không bắt buộc

    Thư mục cục bộ mà bạn muốn so khớp với globPatterns. Đường dẫn tương ứng với thư mục hiện tại.

RequiredGlobDirectoryPartial

Thuộc tính

  • globDirectory

    chuỗi

    Thư mục cục bộ mà bạn muốn so khớp với globPatterns. Đường dẫn tương ứng với thư mục hiện tại.

RequiredSWDestPartial

Thuộc tính

  • swDest

    chuỗi

    Đường dẫn và tên tệp của tệp worker dịch vụ sẽ được tạo trong quy trình tạo, tương ứng với thư mục đang hoạt động. Tên này phải kết thúc bằng ".js".

RuntimeCaching

Thuộc tính

  • trình xử lý

    RouteHandler | StrategyName

    Điều này xác định cách tuyến đường thời gian chạy sẽ tạo ra một phản hồi. Để dùng một trong các workbox-strategies tích hợp sẵn, hãy cung cấp tên của workbox-strategies đó, chẳng hạn như 'NetworkFirst'. Ngoài ra, đây có thể là một hàm gọi lại workbox-core.RouteHandler với logic phản hồi tuỳ chỉnh.

  • method

    HTTPMethod không bắt buộc

    Giá trị mặc định là: "GET"

    Phương thức HTTP để so khớp. Giá trị mặc định của 'GET' thường là đủ, trừ phi bạn cần so khớp rõ ràng 'POST', 'PUT' hoặc một loại yêu cầu khác.

  • tùy chọn

    đối tượng không bắt buộc

  • urlPattern

    string | RegExp | RouteMatchCallback

    Tiêu chí so khớp này xác định xem trình xử lý đã định cấu hình có tạo phản hồi cho mọi yêu cầu không khớp với một trong các URL được lưu vào bộ nhớ đệm trước hay không. Nếu bạn xác định nhiều tuyến RuntimeCaching, thì tuyến đầu tiên có urlPattern khớp sẽ là tuyến phản hồi.

    Giá trị này ánh xạ trực tiếp đến tham số đầu tiên được truyền đến workbox-routing.registerRoute. Bạn nên dùng hàm workbox-core.RouteMatchCallback để có được sự linh hoạt tối đa.

StrategyName

Enum

"CacheFirst"

"CacheOnly"

"NetworkFirst"

"NetworkOnly"

"StaleWhileRevalidate"

WebpackGenerateSWOptions

Loại

BasePartial & WebpackPartial & GeneratePartial & WebpackGenerateSWPartial

WebpackGenerateSWPartial

Thuộc tính

  • importScriptsViaChunks

    string[] không bắt buộc

    Một hoặc nhiều tên của các đoạn webpack. Nội dung của các đoạn này sẽ được đưa vào trình chạy dịch vụ đã tạo thông qua một lệnh gọi đến importScripts().

  • swDest

    string không bắt buộc

    Giá trị mặc định là: "service-worker.js"

    Tên tài sản của tệp worker dịch vụ do trình bổ trợ này tạo.

WebpackInjectManifestOptions

Loại

BasePartial & WebpackPartial & InjectPartial & WebpackInjectManifestPartial

WebpackInjectManifestPartial

Thuộc tính

  • compileSrc

    boolean không bắt buộc

    Giá trị mặc định là: true

    Khi true (mặc định), tệp swSrc sẽ được webpack biên dịch. Khi false, quá trình biên dịch sẽ không diễn ra (và bạn không thể dùng webpackCompilationPlugins). Đặt thành false nếu bạn muốn chèn tệp kê khai vào, ví dụ: tệp JSON.

  • swDest

    string không bắt buộc

    Tên tài sản của tệp worker dịch vụ sẽ được trình bổ trợ này tạo. Nếu bạn bỏ qua thuộc tính này, tên sẽ dựa trên tên swSrc.

  • webpackCompilationPlugins

    any[] không bắt buộc

    Các trình bổ trợ webpack không bắt buộc sẽ được dùng khi biên dịch tệp đầu vào swSrc. Chỉ hợp lệ nếu compileSrc là true.

WebpackPartial

Thuộc tính

  • chunks

    string[] không bắt buộc

    Một hoặc nhiều tên khối mà các tệp đầu ra tương ứng phải được đưa vào tệp kê khai lưu vào bộ nhớ đệm trước.

  • loại trừ

    (string | RegExp | function)[] không bắt buộc

    Một hoặc nhiều chỉ định được dùng để loại trừ các thành phần khỏi tệp kê khai lưu vào bộ nhớ đệm trước. Điều này được diễn giải theo các quy tắc tương tự như lựa chọn exclude tiêu chuẩn của webpack. Nếu bạn không cung cấp, giá trị mặc định sẽ là [/\.map$/, /^manifest.*\.js$].

  • excludeChunks

    string[] không bắt buộc

    Một hoặc nhiều tên khối mà các tệp đầu ra tương ứng sẽ bị loại trừ khỏi tệp kê khai lưu vào bộ nhớ đệm trước.

  • bao gồm

    (string | RegExp | function)[] không bắt buộc

    Một hoặc nhiều chỉ định được dùng để đưa tài sản vào tệp kê khai lưu vào bộ nhớ đệm trước. Điều này được diễn giải theo các quy tắc tương tự như lựa chọn include tiêu chuẩn của webpack.

  • chế độ

    string không bắt buộc

    Nếu bạn đặt thành "production", thì một gói trình chạy dịch vụ được tối ưu hoá sẽ được tạo ra mà không có thông tin gỡ lỗi. Nếu bạn không định cấu hình rõ ràng ở đây, thì giá trị mode được định cấu hình trong quá trình biên dịch webpack hiện tại sẽ được sử dụng.

Phương thức

copyWorkboxLibraries()

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

Thao tác này sẽ sao chép một nhóm thư viện thời gian chạy mà Workbox sử dụng vào một thư mục cục bộ. Thư mục này sẽ được triển khai cùng với tệp worker dịch vụ của bạn.

Thay vì triển khai các bản sao cục bộ này, bạn có thể sử dụng Workbox từ URL CDN chính thức của Workbox.

Phương thức này được cung cấp cho những nhà phát triển sử dụng workbox-build.injectManifest và không muốn sử dụng các bản sao CDN của Workbox. Nhà phát triển sử dụng workbox-build.generateSW không cần gọi phương thức này một cách rõ ràng.

Thông số

  • destDirectory

    chuỗi

    Đường dẫn đến thư mục mẹ mà thư mục mới của các thư viện sẽ được tạo.

Giá trị trả về

  • Promise<string>

    Tên của thư mục mới tạo.

generateSW()

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

Phương thức này tạo một danh sách các URL để lưu trước vào bộ nhớ đệm, được gọi là "manifest lưu trước vào bộ nhớ đệm", dựa trên các lựa chọn mà bạn cung cấp.

Nó cũng có các lựa chọn bổ sung để định cấu hình hành vi của worker dịch vụ, chẳng hạn như mọi quy tắc runtimeCaching mà worker dịch vụ nên sử dụng.

Dựa trên tệp kê khai lưu vào bộ nhớ đệm trước và cấu hình bổ sung, nó sẽ ghi một tệp worker dịch vụ sẵn sàng sử dụng vào đĩa tại 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: '...',
});

Thông số

Giá trị trả về

getManifest()

workbox-build.getManifest(
  config: GetManifestOptions,
): Promise<GetManifestResult>

Phương thức này trả về một danh sách các URL để lưu vào bộ nhớ đệm trước, được gọi là "tệp kê khai lưu vào bộ nhớ đệm trước", cùng với thông tin chi tiết về số lượng mục và kích thước của chúng, dựa trên các lựa chọn mà bạn cung cấp.

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

Thông số

Giá trị trả về

getModuleURL()

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

Thông số

  • moduleName

    chuỗi

  • buildType

    BuildType

Giá trị trả về

  • chuỗi

injectManifest()

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

Phương thức này tạo một danh sách các URL để lưu trước vào bộ nhớ đệm, được gọi là "manifest lưu trước vào bộ nhớ đệm", dựa trên các lựa chọn mà bạn cung cấp.

Tệp kê khai được chèn vào tệp swSrc và chuỗi giữ chỗ injectionPoint xác định vị trí tệp kê khai sẽ nằm trong tệp.

Tệp worker dịch vụ cuối cùng, có tệp kê khai được chèn, sẽ được ghi vào đĩa tại swDest.

Phương thức này sẽ không biên dịch hoặc gói tệp swSrc của bạn; phương thức này chỉ xử lý việc chèn tệp kê khai.

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

Thông số

Giá trị trả về