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 nội dung để lưu trước vào bộ nhớ đệm có thể dùng trong một trình chạy dịch vụ hiện có.

2 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 có thể giúp bạn chọn chế độ và cấu hình phù hợp để sử dụng.

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

generateSW

Chế độ generateSW sẽ tạo một tệp trình chạy dịch vụ 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 tệp vào bộ nhớ đệm trước.
  • Bạn có nhu cầu lưu vào bộ nhớ đệm đơn giản trong thời gian chạy.

Những 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 (ví dụ: Đẩy trên web).
  • 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 URL để lưu trước vào bộ nhớ đệm và thêm tệp kê khai bộ nhớ đệm trước đó vào một tệp trình chạy dịch vụ hiện có. Nếu không, tệp sẽ 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 trình chạy dịch vụ của mình.
  • Bạn muốn lưu tệp vào bộ nhớ đệm trước.
  • Bạn cần tuỳ chỉnh việc định tuyến và các chiến lược.
  • Bạn muốn sử dụng trình chạy dịch vụ với các tính năng khác của nền tảng (ví dụ: Tính năng đẩy trên web).

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

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

Bạn có thể tìm thấy tập hợp đầy đủ các tuỳ chọn cấu hình trong tài liệu tham khảo.

Chế độ bổ sung

Chúng tôi hy vọng generateSW hoặc injectManifest sẽ phù hợp với nhu cầu của hầu hết các nhà phát triển. Tuy nhiên, có một chế độ khác được workbox-build hỗ trợ 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 lý thuyết, 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ố 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ể tìm thấy tập hợp đầy đủ các tuỳ chọn cấu hình trong tài liệu tham khảo.

Loại

BasePartial

Thuộc tính

  • additionalManifestEntries

    (chuỗi|ManifestEntry)[] không bắt buộc

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

  • dontCacheBustURLsMatching

    Biểu thức chính quy không bắt buộc

    Các thành phần khớp với yêu cầu này sẽ được giả định là được tạo phiên bản duy nhất thông qua URL tương ứng và được miễn trừ khỏi quy trình chặn truy xuất bộ nhớ đệm HTTP thông thường (hoạt động khi điền sẵn bộ nhớ đệm trước). Mặc dù không bắt buộc, nhưng nếu quy trình xây dựng hiện có của bạn đã chèn giá trị [hash] vào mỗi tên tệp, bạn nên cung cấp RegExp để phát hiện điều đó, vì tính năng này sẽ làm giảm băng thông tiêu thụ khi lưu 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ự dựa trên 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 trước vào bộ nhớ đệm các tệp rất lớn mà 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 tiền tố chuỗi ánh xạ đối tượng đến giá trị chuỗi thay thế. Ví dụ: bạn có thể sử dụng thao tác này để xoá hoặc thêm tiền tố đường dẫn khỏi một 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ủa bạn. Để 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 nhập 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

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

Thuộc tính

  • filePaths

    chuỗi[]

GeneratePartial

Thuộc tính

  • babelPresetEnvTargets

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

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

    Các mục tiêu cần truyền đến babel-preset-env khi biên dịch gói trình chạy dịch vụ.

  • cacheId

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

    Mã nhận dạng (không bắt buộc) đượ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 do các phiên bản cũ hơn, 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 trình chạy dịch vụ có nên bắt đầu kiểm soát mọi ứng dụng hiện tại 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 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à sẽ được kiểm tra xem có khớp với bộ nhớ đệm trước hay không. Bạn nên đặt thuộc tính này thành những gì 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 kết quả khớp trước bộ nhớ đệm. Điều này sẽ hữu ích nếu người dùng của bạn có thể yêu cầu các URL có chứa, chẳng hạn như các tham số URL dùng để theo dõi nguồn lưu lượng truy cập. Nếu không được 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 chạy dịch vụ đã tạo. Điều này rất hữu ích khi bạn muốn cho phép Workbox tạo tệp trình chạy dịch vụ cấp cao nhất, nhưng muốn đưa thêm một số mã bổ sung vào, 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 bạn 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 tách thành một tệp riêng cần triển khai cùng với trình chạy dịch vụ. Việc giữ riêng biệt thời gian chạy đồng nghĩa với việc người dùng sẽ không phải tải lại mã Workbox xuống 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 "product" (chính thức), thì gói trình chạy dịch vụ được tối ưu hoá không bao gồm thông tin gỡ lỗi sẽ được tạo. Nếu bạn không định cấu hình rõ ràng ở đây, thì giá trị process.env.NODE_ENV sẽ được sử dụng. Nếu không, giá trị đó sẽ quay lại dùng 'production'.

  • navigateFallback

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

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

    Nếu được chỉ định, mọi yêu cầu điều hướng đối với các 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 đã cung cấp. Bạn phải truyền URL của một tài liệu HTML được liệt kê trong tệp kê khai bộ nhớ đệm trước. Mã này nhằm sử dụng trong trường hợp Ứng dụng một trang, trong đó bạn muốn mọi thao tác điều hướng đều dùng HTML của App Shell 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 giới hạn những URL mà hành vi navigateFallback đã định cấu hình sẽ áp dụng. Điều này sẽ hữu ích nếu chỉ nên coi một tập hợp con các URL của trang web là một phần của Ứng dụng trang đơn. Nếu cả navigateFallbackDenylist và navigateFallbackAllowlist được định cấu hình, danh sách từ chối sẽ được ưu tiên áp dụng trước.

    Lưu ý: Bạn có thể đánh giá các biểu thức chính quy này 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ể thấy độ trễ khi di chuyển 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 giới hạn những URL mà hành vi navigateFallback đã định cấu hình sẽ áp dụng. Điều này sẽ hữu ích nếu bạn chỉ nên coi một tập hợp con URL của trang web là một phần của Ứng dụng trang đơn. 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 ý: Bạn có thể đánh giá các biểu thức chính quy này 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ể thấy độ trễ khi di chuyển 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 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 chiến lược phản hồi thích hợp sao cho 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 trước.

  • offlineGoogleAnalytics

    boolean|GoogleAnalyticsInitializeOptions optional

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

    Kiểm soát việc có hiển thị 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 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ụ xây 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 này được chuyển đổi thành lệnh gọi workbox-routing.registerRoute bằng cách sử dụng cấu hình so khớp và trình xử lý 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ụ bên dưới cho thấy một cấu hình điển hình, 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ó thêm lệnh gọi vô điều kiện tới skipWaiting() vào trình chạy 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 trình chạy dịch vụ đang chờ.

  • sơ đồ nguồn

    boolean không bắt buộc

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

    Liệu có tạo sơ đồ nguồn cho các tệp trình chạy dịch vụ đã tạo hay không.

GenerateSWOptions

Loại

BasePartial và GlobPartial và GeneratePartial vàRequiredSWDestPartial&OptionalGlobDirectoryPartial

GetManifestOptions

Loại

BasePartial và GlobPartial và RequiredGlobDirectoryPartial

GetManifestResult

Thuộc tính

  • số lượng

    number

  • manifestEntries

    ManifestEntry[]

  • size

    number

  • các cảnh báo

    chuỗi[]

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 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 mẫu khớp với các tệp cần 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,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 gợi ý 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 trước bộ nhớ đệm sẽ khiến bản dựng không hoạt độ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 về 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 vào một giá trị chuỗi duy nhất khác. Khoá trong đối tượng này là các URL do máy chủ kết xuất. Nếu giá trị là một mảng chuỗi, thì các giá trị đó sẽ được diễn giải dưới dạng mẫu glob và nội dung của bất kỳ tệp nào khớp với mẫu sẽ được dùng để tạo phiên bản duy nhất cho URL. Nếu được sử dụng với một chuỗi duy nhất, thì chuỗi đó sẽ được hiểu là thông tin tạo phiên bản duy nhất mà bạn đã tạo cho một URL nhất định.

InjectManifestOptions

Loại

BasePartial và GlobPartial và 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 kê khai bộ nhớ đệm đã tạo sẽ được thay thế bằng tệp kê khai bộ nhớ đệm trước đã tạo.

  • swSrc

    string

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

ManifestEntry

Thuộc tính

  • tính toàn vẹn

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

  • bản sửa đổi

    string

  • url

    string

ManifestTransform()

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

Loại

hàm

Tham số

  • manifestEntries

    (ManifestEntry&đối tượng)[]

    • size

      number

  • biên dịch

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

Giá trị trả về

ManifestTransformResult

Thuộc tính

  • manifest

    (ManifestEntry&đối tượng)[]

    • size

      number

  • các cảnh bá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ộ bạn muốn khớp với globPatterns. Đường dẫn này tương ứng với thư mục hiện tại.

RequiredGlobDirectoryPartial

Thuộc tính

  • globDirectory

    string

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

RequiredSWDestPartial

Thuộc tính

  • swDest

    string

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

RuntimeCaching

Thuộc tính

  • trình xử lý

    RouteHandler|StrategyName

    Thuộc tính 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 lớp đó, chẳng hạn như 'NetworkFirst'. Ngoài ra, đây có thể là một hàm callback 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. Thông thường, giá trị mặc định của 'GET' là đủ, trừ phi bạn rõ ràng cần phải so khớp với '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 liên kết trực tiếp với 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 độ linh hoạt cao nhất.

StrategyName

Liệt kê

"CacheFirst"

"NetworkFirst"

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 đoạn gói web. Nội dung của các phần đó sẽ được đưa vào trình chạy dịch vụ đã 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 trình chạy dịch vụ do trình bổ trợ này tạo.

WebpackInjectManifestOptions

Loại

BasePartial và WebpackPartial và InjectPartial và 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 biên dịch bằng gói web. Khi false, quá trình biên dịch sẽ không xảy ra (và 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 trình chạy dịch vụ sẽ do trình bổ trợ này tạo. Nếu bị bỏ qua, tên sẽ dựa trên tên swSrc.

  • webpackCompilationPlugins

    bất kỳ[] 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

  • đoạn

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

    Bạn nên đưa một hoặc nhiều tên phân đoạn có tệp đầu ra tương ứng vào tệp kê khai bộ nhớ đệm trước.

  • loại trừ

    (string|RegExp|function)[] optional

    Một hoặc nhiều thông số kỹ thuật dùng để loại trừ nội dung khỏi tệp kê khai bộ nhớ đệm trước. Điều 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 không được 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 phân đoạn có tệp đầu ra tương ứng cần được loại trừ khỏi tệp kê khai bộ nhớ đệm trước.

  • bao gồm

    (string|RegExp|function)[] optional

    Một hoặc nhiều thông số kỹ thuật dùng để đưa nội dung vào tệp kê khai trước bộ nhớ đệm. Điều 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 "product" (chính thức), thì gói trình chạy dịch vụ được tối ưu hoá không bao gồm thông tin gỡ lỗi sẽ được tạo. 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,
)

Thao tác này sẽ sao chép một tập hợp các 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 trình chạy 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 ứng dụng.

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

Tham số

  • destDirectory

    string

    Đường dẫn đến thư mục mẹ để tạo thư mục thư viện mới.

Giá trị trả về

  • Hứa hẹn<string>

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

generateSW()

workbox-build.generateSW(
  config: GenerateSWOptions,
)

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

Phương thức này cũng có các tuỳ chọn bổ sung để định cấu hình hành vi của trình chạy dịch vụ, như mọi quy tắc runtimeCaching mà trình chạy này nên 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 trình chạy 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ố

Giá trị trả về

getManifest()

workbox-build.getManifest(
  config: GetManifestOptions,
)

Phương thức này trả về một danh sách URL cần lưu trước vào bộ nhớ đệm, hay còn gọi là "tệp kê khai 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 URL đó, 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ố

Giá trị trả về

getModuleURL()

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

Tham số

  • moduleName

    string

  • buildType

    BuildType

Giá trị trả về

  • string

injectManifest()

workbox-build.injectManifest(
  config: InjectManifestOptions,
)

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

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í mà tệp kê khai sẽ chuyển đến.

Tệp trình chạy dịch vụ cuối cùng có 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 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ố

Giá trị trả về