Trang này được dịch bởi Cloud Translation API.

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

Mô-đun workbox-build tích hợp vào quy trình xây dựng 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 tài sản để lưu vào bộ nhớ đệm trước có thể được sử dụng trong trình chạy dịch vụ hiện có.

Hai chế độ mà hầu hết các nhà phát triển sẽ sử dụng là generateSW và injectManifest. Câu trả lời cho các 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.

Chế độ nên sử dụng

`generateSW`

Chế độ generateSW sẽ tạo một tệp worker cho bạn, được tuỳ chỉnh thông qua các tuỳ 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 các tệp vào bộ nhớ đệm trước.
Bạn có nhu cầu lưu vào bộ nhớ đệm thời gian chạy đơn giản.

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 Worker dịch vụ (tức là Web Push).
Bạn muốn nhập thêm tập lệnh hoặc thêm logic cho các chiến lược lưu vào bộ nhớ đệm tuỳ chỉnh.

`injectManifest`

Chế độ injectManifest sẽ tạo danh sách 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 tệp worker dịch vụ hiện có. Nếu không, tệp sẽ giữ nguyên trạng thái.

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 worker dịch vụ.
Bạn muốn lưu các tệp vào bộ nhớ đệm trước.
Bạn cần tuỳ chỉnh định tuyến và chiến lược.
Bạn muốn sử dụng worker dịch vụ 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 trình chạy 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 tuỳ 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 được 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 bộ tuỳ chọn cấu hình đầy đủ 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 tuỳ 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 bộ nhớ đệm trước dựa trên các tệp được cấu hình của bạn chọn và chèn tệp đó vào tệp worker dịch vụ hiện có.

Bạn có thể xem bộ tuỳ chọn cấu hình đầy đủ trong tài liệu tham khảo.

Các chế độ khác

Chúng tôi dự kiến rằng generateSW hoặc injectManifest sẽ phù hợp với hầu hết nhu cầu của nhà phát triển. Tuy nhiên, workbox-build còn hỗ trợ một chế độ khác 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 worker dịch vụ nguồn, chế độ này sẽ trả về một mảng các mục nhập tệp kê khai, cùng với thông tin về số lượng mục nhập 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 tuỳ 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 bộ tuỳ chọn cấu hình đầy đủ 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 cấu hình bản dựng.
dontCacheBustURLsMatching

RegExp không bắt buộc

Các thành phần khớp với URL này sẽ được giả định là có phiên bản riêng biệt thông qua URL của chúng và được miễn khỏi việc huỷ 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 xây dựng hiện tại của bạn đã chèn giá trị [hash] vào mỗi tên tệp, vì điều này sẽ làm giảm băng thông tiêu thụ khi lưu vào bộ nhớ đệm trước.
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 sẽ được áp dụng trước.
maximumFileSizeToCacheInBytes

số 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 các tệp rất lớn vào bộ nhớ đệm trước, những tệp này 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 ánh xạ tiền tố chuỗi đến các giá trị chuỗi thay thế. Bạn có thể sử dụng thuộc tính này để, ví dụ: xoá hoặc thêm tiền tố đường dẫn khỏi mục nhập tệp kê khai nếu chế độ thiết lập dịch vụ lưu trữ web không khớp với chế độ thiết lập hệ thống tệp cục bộ. Để có một giải pháp thay thế linh hoạt hơn, bạn có thể sử dụng tuỳ 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 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

Bỏ qua<GetManifestResult"manifestEntries"
> & đối tượng

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"]

Mục tiêu để truyền vào babel-preset-env khi chuyển đổi gói worker dịch vụ.
cacheId

chuỗi không bắt buộc

Mã nhận dạng không bắt buộc để thêm vào trước tên bộ nhớ đệm. Điều này chủ yếu hữu ích cho việc 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

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

boolean không bắt buộc
Giá trị mặc định là: false

Liệu worker dịch vụ 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

chuỗi không bắt buộc

Nếu yêu cầu điều hướng cho một URL có đuôi là / không khớp với một URL được lưu vào bộ nhớ đệm trước, thì giá trị này sẽ được thêm vào URL và sẽ được kiểm tra để tìm kết quả khớp với bộ nhớ đệm trước. Bạn nên đặt giá trị này thành giá trị mà máy chủ web của bạn đang sử 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 kết quả khớp được lưu trước. Điều này sẽ hữu ích nếu người dùng có thể yêu cầu các URL chứa, ví dụ: các tham số URL 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 worker được tạo. Điều này rất hữu ích khi bạn muốn Workbox tạo tệp worker 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

Liệu mã thời gian chạy cho thư viện Workbox có được đưa vào trình chạy dịch vụ cấp cao nhất hay không, hoặc được chia thành một tệp riêng cần được triển khai cùng với trình chạy dịch vụ. Việc tách biệt 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ế độ

chuỗi không bắt buộc
Giá trị mặc định là: "production"

Nếu bạn đặt thành "production" (phiên bản chính thức), thì một gói worker dịch vụ được tối ưu hoá sẽ được tạo, trong đó không bao gồm thông tin gỡ lỗi. Nếu không được định cấu hình rõ ràng tại đây, giá trị process.env.NODE_ENV sẽ được sử dụng và nếu không, giá trị này sẽ quay lại 'production'.
navigateFallback

chuỗi không bắt buộc
Giá trị mặc định là: null

Nếu được chỉ định, tất cả yêu cầu điều hướng cho các URL không được lưu vào bộ nhớ đệm trước sẽ được thực hiện bằng HTML tại URL được cung cấp. Bạn phải truyền vào URL của một tài liệu HTML được liệt kê trong tệp kê khai lưu vào bộ nhớ đệm trước. Bạn nên sử dụng phương thức này 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 phổ biến.
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, dùng để 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 bạn chỉ coi một nhóm nhỏ URL của trang web 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 từ chối 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 RegExp phức tạp, nếu không người dùng có thể gặp phải độ 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, dùng để 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 bạn chỉ coi một nhóm nhỏ URL của trang web 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 từ chối 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 RegExp phức tạp, nếu không người dùng có thể gặp phải độ 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

Liệu có bật tính năng tải trước điều hướng trong worker 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à sử dụng phản hồi được tải trước.
offlineGoogleAnalytics

boolean | GoogleAnalyticsInitializeOptions không bắt buộc
Giá trị mặc định là: false

Kiểm soát việc có bao gồm tính năng hỗ trợ cho 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 worker 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ụ bản dựng 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 lệnh gọi này sẽ được dịch sang lệnh gọi workbox-routing.registerRoute bằng cách sử dụng cấu hình trình xử lý và khớp mà bạn xác định.

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

boolean không bắt buộc
Giá trị mặc định là: false

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

boolean không bắt buộc
Giá trị mặc định là: true

Liệu có tạo bản đồ nguồn cho các tệp worker dịch vụ đã 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ố
cảnh bá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 đường liên kết tượng trưng hay không khi tạo tệp kê khai 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 mẫu khớp với tệp để luôn loại trừ khi tạo tệp kê khai 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 vào bộ nhớ đệm trước. Để biết thêm thông tin, hãy xem bài viết giới thiệu về glob.
globStrict

boolean không bắt buộc
Giá trị mặc định là: true

Nếu đúng, lỗi đọc thư mục khi tạo tệp kê khai bộ nhớ đệm trước sẽ khiến bản dựng không thành công. Nếu giá trị là false, thư mục có vấn đề sẽ bị bỏ qua. Để biết thêm thông tin, hãy xem định nghĩa của strict trong tài liệ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 do máy chủ hiển thị. Nếu giá trị là một mảng chuỗi, thì các giá trị đó sẽ được diễn giải là mẫu glob và nội dung của mọi tệp khớp với mẫu sẽ được dùng để tạo phiên bản URL duy nhất. Nếu được sử dụng với một chuỗi duy nhất, chuỗi đó sẽ được diễn giải là thông tin phiên bản duy nhất 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

chuỗi không bắt buộc
Giá trị mặc định là: "self.__WB_MANIFEST"

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

chuỗi

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

ManifestEntry

Thuộc tính

tính toàn vẹn

chuỗi 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

Tham số

manifestEntries

(ManifestEntry & object)[]
- size
  
  số
biên dịch

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

Giá trị trả về

Promise<ManifestTransformResult> | ManifestTransformResult

ManifestTransformResult

Thuộc tính

tệp kê khai

(ManifestEntry & object)[]
- size
  
  số
cảnh báo

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

OptionalGlobDirectoryPartial

Thuộc tính

globDirectory

chuỗi không bắt buộc

Thư mục cục bộ mà bạn muốn so khớp 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 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 trình chạy dịch vụ sẽ được tạo bằng quy trình xây dựng, tương ứng với thư mục đang hoạt động. Tên tệp 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 thời gian chạy sẽ tạo phản hồi. Để sử 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 chọn

đối tượng không bắt buộc
- backgroundSync
  
  đối tượng không bắt buộc
  
  Việc định cấu hình này sẽ thêm một thực thể workbox-background-sync.BackgroundSyncPlugin vào workbox-strategies được định cấu hình trong handler.
  - tên
    
    chuỗi
  - tùy chọn
    
    QueueOptions không bắt buộc
- broadcastUpdate
  
  đối tượng không bắt buộc
  
  Việc định cấu hình này sẽ thêm một thực thể workbox-broadcast-update.BroadcastUpdatePlugin vào workbox-strategies được định cấu hình trong handler.
  - channelName
    
    chuỗi không bắt buộc
  - tùy chọn
    
    BroadcastCacheUpdateOptions
- cacheName
  
  chuỗi không bắt buộc
  
  Nếu được cung cấp, thuộc tính này sẽ đặt thuộc tính cacheName của workbox-strategies được định cấu hình trong handler.
- cacheableResponse
  
  CacheableResponseOptions không bắt buộc
  
  Việc định cấu hình này sẽ thêm một thực thể workbox-cacheable-response.CacheableResponsePlugin vào workbox-strategies được định cấu hình trong handler.
- hết hạn
  
  ExpirationPluginOptions không bắt buộc
  
  Việc định cấu hình này sẽ thêm một thực thể workbox-expiration.ExpirationPlugin vào workbox-strategies được định cấu hình trong handler.
- fetchOptions
  
  RequestInit không bắt buộc
  
  Việc định cấu hình này sẽ truyền giá trị fetchOptions đến workbox-strategies được định cấu hình trong handler.
- matchOptions
  
  CacheQueryOptions không bắt buộc
  
  Việc định cấu hình này sẽ truyền giá trị matchOptions đến workbox-strategies được định cấu hình trong handler.
- networkTimeoutSeconds
  
  số không bắt buộc
  
  Nếu được cung cấp, thuộc tính này sẽ đặt thuộc tính networkTimeoutSeconds của workbox-strategies được định cấu hình trong handler. Xin lưu ý rằng chỉ 'NetworkFirst' và 'NetworkOnly' mới hỗ trợ networkTimeoutSeconds.
- trình bổ trợ
  
  WorkboxPlugin[] không bắt buộc
  
  Việc định cấu hình này cho phép sử dụng một hoặc nhiều trình bổ trợ Workbox không có tuỳ chọn "lối tắt" (chẳng hạn như expiration cho workbox-expiration.ExpirationPlugin). Các trình bổ trợ được cung cấp tại đây sẽ được thêm vào workbox-strategies được định cấu hình trong handler.
- precacheFallback
  
  đối tượng không bắt buộc
  
  Việc định cấu hình này sẽ thêm một thực thể workbox-precaching.PrecacheFallbackPlugin vào workbox-strategies được định cấu hình trong handler.
  - fallbackURL
    
    chuỗi
- rangeRequests
  
  boolean không bắt buộc
  
  Việc bật tuỳ chọn này sẽ thêm một thực thể workbox-range-requests.RangeRequestsPlugin vào workbox-strategies được định cấu hình trong handler.
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 sử dụng hàm workbox-core.RouteMatchCallback để linh hoạt nhất.

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 phần webpack. Nội dung của các phần đó sẽ được đưa vào worker dịch vụ được tạo, thông qua lệnh gọi đến importScripts().
swDest

chuỗi 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ể sử 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

chuỗi không bắt buộc

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

any[] không bắt buộ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

đoạn

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

Một hoặc nhiều tên đoạn có tệp đầu ra tương ứng phải được đưa vào tệp kê khai 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 dùng để loại trừ các thành phần khỏi tệp kê khai bộ nhớ đệm trước. Giá trị này được diễn giải theo các quy tắc tương tự như tuỳ 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 đoạn có tệp đầu ra tương ứng sẽ bị loại trừ khỏi tệp kê khai 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 dùng để đưa các thành phần vào tệp kê khai bộ nhớ đệm trước. Giá trị này được diễn giải theo các quy tắc tương tự như tuỳ chọn include tiêu chuẩn của webpack.
chế độ

chuỗi không bắt buộc

Nếu bạn đặt thành "production" (phiên bản chính thức), thì một gói worker dịch vụ được tối ưu hoá sẽ được tạo, trong đó không bao gồm thông tin gỡ lỗi. Nếu không được định cấu hình rõ ràng tại đây, 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 tập hợp 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 của dịch vụ.

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 hiển thị để mang lại lợi ích cho các nhà phát triển sử dụng workbox-build.injectManifest và không muốn sử dụng 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.

Tham số

destDirectory

chuỗi

Đường dẫn đến thư mục mẹ mà trong đó thư mục mới của 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 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", dựa trên các tuỳ chọn mà bạn cung cấp.

Tệp này cũng chứa các tuỳ 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ụ sẽ sử dụng.

Dựa trên tệp kê khai bộ nhớ đệm trước và cấu hình bổ sung, tệp này 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: '...',
});

Tham số

config

GenerateSWOptions

Giá trị trả về

Promise<BuildResult>

getManifest()

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

Phương thức này trả về danh sách 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 nhập và kích thước của các mục nhập đó, dựa trên các tuỳ 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: ...,
});

Tham số

config

GetManifestOptions

Giá trị trả về

Promise<GetManifestResult>

getModuleURL()

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

Tham số

moduleName

chuỗi
buildType

BuildType

Giá trị trả về

chuỗi

injectManifest()

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

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

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

Phương thức này sẽ không biên dịch hoặc đóng gói tệp swSrc; mà 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: '...',
});

Tham số

config

InjectManifestOptions

Giá trị trả về

Promise<BuildResult>

bản dựng hộp công việc Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Chế độ nên sử dụng

generateSW

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

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

injectManifest

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

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

Chế độ generateSW

Chế độ injectManifest

Các chế độ khác

Chế độ getManifest

Loại

BasePartial

Thuộc tính

BuildResult

Loại

Thuộc tính

GeneratePartial

Thuộc tính

GenerateSWOptions

Loại

GetManifestOptions

Loại

GetManifestResult

Thuộc tính

GlobPartial

Thuộc tính

InjectManifestOptions

Loại

InjectPartial

Thuộc tính

ManifestEntry

Thuộc tính

ManifestTransform()

Loại

Tham số

Giá trị trả về

ManifestTransformResult

Thuộc tính

OptionalGlobDirectoryPartial

Thuộc tính

RequiredGlobDirectoryPartial

Thuộc tính

RequiredSWDestPartial

Thuộc tính

RuntimeCaching

Thuộc tính

StrategyName

Enum

WebpackGenerateSWOptions

Loại

WebpackGenerateSWPartial

Thuộc tính

WebpackInjectManifestOptions

Loại

WebpackInjectManifestPartial

Thuộc tính

WebpackPartial

Thuộc tính

Phương thức

copyWorkboxLibraries()

Tham số

Giá trị trả về

generateSW()

Tham số

Giá trị trả về

getManifest()

Tham số

Giá trị trả về

getModuleURL()

Tham số

Giá trị trả về

injectManifest()

Tham số

Giá trị trả về

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

`generateSW`

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

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

`injectManifest`

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

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

Chế độ `generateSW`

Chế độ `injectManifest`

Chế độ `getManifest`