Cách sử dụng Workbox

Hộp công việc đủ linh hoạt để phù hợp với mọi quy trình xây dựng của dự án. Tức là có nhiều cách để sử dụng Workbox, cho phép bạn chọn chế độ tích hợp phù hợp cho dự án của mình. Bất kể bạn tích hợp với Workbox bằng cách nào, các công cụ đều cung cấp một API tương tự.

generateSW đấu với injectManifest

Bạn sẽ dựa vào một trong hai phương thức cốt lõi cho công cụ xây dựng của Workbox: generateSW hoặc injectManifest. Cách bạn nên sử dụng tuỳ thuộc vào mức độ linh hoạt mà bạn cần. generateSW ưu tiên tính dễ sử dụng và tính đơn giản nhưng đổi lại, vẫn đảm bảo tính linh hoạt, cho phép bạn khai báo một nhóm tuỳ chọn cấu hình cũng như cung cấp cho bạn một trình chạy dịch vụ với đầy đủ chức năng.

injectManifest ưa chuộng tính linh hoạt hơn nhưng đổi lại sẽ đơn giản hơn, vì bạn sẽ tự viết mã cho trình chạy dịch vụ của mình, còn injectManifest cung cấp một tệp kê khai bộ nhớ đệm có thể được dùng bằng các phương thức lưu trước vào bộ nhớ đệm của Workbox.

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

Bạn nên sử dụng generateSW nếu:

  • Bạn muốn lưu trước các tệp liên kết với quá trình xây dựng vào bộ nhớ đệm, bao gồm cả các tệp có URL chứa hàm băm mà có thể bạn sẽ không biết trước.
  • Bạn có nhu cầu lưu vào bộ nhớ đệm trong thời gian chạy đơn giản có thể được định cấu hình thông qua tuỳ chọn của generateSW.

Những trường hợp không nên sử dụng generateSW

Mặt khác, bạn không nên sử dụng generateSW nếu:

  • Bạn muốn sử dụng các tính năng khác của trình chạy dịch vụ (chẳng hạn như Đẩy trên web).
  • Bạn cần có thêm sự linh hoạt để nhập các tập lệnh bổ sung hoặc sử dụng các mô-đun Workbox cụ thể để tinh chỉnh trình chạy dịch vụ theo nhu cầu của ứng dụng.

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

Bạn nên sử dụng injectManifest nếu:

  • Bạn muốn lưu các tệp vào bộ nhớ đệm trước nhưng muốn viết trình chạy dịch vụ của riêng mình.
  • Bạn có nhu cầu định tuyến hoặc lưu vào bộ nhớ đệm phức tạp không thể biểu thị qua các tuỳ chọn cấu hình của generateSW
  • Bạn muốn sử dụng các API khác trong trình chạy dịch vụ (chẳng hạn như tính năng Đẩy trên web).

injectManifest khác với generateSW ở chỗ yêu cầu bạn chỉ định một tệp trình chạy dịch vụ nguồn. Trong quy trình công việc này, tệp trình chạy dịch vụ nguồn cần có một chuỗi self.__WB_MANIFEST đặc biệt để injectManifest có thể thay thế bằng tệp kê khai trước bộ nhớ đệm.

Những trường hợp không nên sử dụng injectManifest

Bạn không nên sử dụng injectManifest nếu:

  • Bạn không muốn sử dụng tính năng lưu trước vào bộ nhớ đệm trong trình chạy dịch vụ của mình.
  • các yêu cầu về trình chạy dịch vụ của chúng tôi đủ đơn giản để đáp ứng những gì generateSW và các tuỳ chọn cấu hình của nó có thể cung cấp.
  • Bạn ưu tiên tính dễ sử dụng hơn là tính linh hoạt.

Sử dụng các công cụ Xây dựng của Workbox

Nếu đang tìm một giải pháp không phụ thuộc vào khung để sử dụng Workbox trong quá trình xây dựng, bạn có 3 lựa chọn như sau:

  1. workbox-cli
  2. workbox-build. công cụ dòng lệnh.
  3. Sử dụng một trình đóng gói (chẳng hạn như workbox-webpack-plugin).

Mỗi công cụ xây dựng trong số này cung cấp cả chế độ generateSW và injectManifest với một tập hợp các tuỳ chọn tương tự nhau. Đây là tất cả các lựa chọn tốt khi bạn không muốn liên kết worker dịch vụ được hỗ trợ bởi Workbox với một khung cụ thể. Để biết lựa chọn nào trong số này phù hợp nhất, hãy cùng xem xét nhanh từng tuỳ chọn.

workbox-cli

Nếu bạn đang tìm kiếm rào cản thấp nhất có thể để gia nhập Workbox, thì CLI chính là dành cho bạn:

npm install workbox-cli --save-dev

Để bắt đầu sử dụng CLI, hãy chạy trình hướng dẫn với npx workbox wizard. Trình hướng dẫn sẽ hỏi một vài câu hỏi và câu trả lời cho các câu hỏi đó sẽ được dùng để thiết lập dự án bằng tệp workbox-config.js mà bạn có thể tuỳ chỉnh cho phù hợp với nhu cầu của mình. Mã sẽ có dạng như sau:

// A config for `generateSW`
export default {
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{css,woff2,png,svg,jpg,js}'
  ],
  swDest: 'dist/sw.js'
};

Sau khi tệp cấu hình được tạo, CLI có thể chạy các phương thức generateSW hoặc injectManifest cho bạn. Văn bản trợ giúp của CLI có thêm thông tin và ví dụ về cách sử dụng.

workbox-build

workbox-cli là một trình bao bọc xung quanh mô-đun workbox-build và giải pháp thay thế là sử dụng trực tiếp workbox-build. Khi sử dụng workbox-build, thay vì chỉ định các tuỳ chọn bằng tệp workbox-config.js, bạn sẽ trực tiếp dùng phương thức generateSW hoặc injectManifest trong tập lệnh Nút, truyền vào một tập hợp các tuỳ chọn tương tự:

// build-sw.mjs
import {generateSW} from 'workbox-build';

generateSW({
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{css,woff2,png,svg,jpg,js}'
  ],
  swDest: 'dist/sw.js'
});

Trong ví dụ trên, workbox-build sẽ ghi trình chạy dịch vụ đã tạo vào thư mục dist khi chạy lệnh node build-sw.mjs.

Sử dụng bộ đóng gói

Nhiều gói khác nhau có các trình bổ trợ Workbox riêng, nhưng trình đóng gói duy nhất được nhóm Workbox hỗ trợ chính thức là gói web thông qua workbox-webpack-plugin. Giống như workbox-cli và workbox-build, workbox-webpack-plugin sẽ chạy phương thức generateSW hoặc injectManifest, ngoại trừ việc trình bổ trợ viết hoa các tên phương thức đó thành GenerateSW hoặc InjectManifest. Nếu không, cách sử dụng sẽ tương tự như workbox-build:

// webpack.config.js
import {GenerateSW} from 'workbox-webpack-plugin';

export default {
  // Other webpack config options omitted for brevity...
  plugins: [
    new GenerateSW({
      swDest: './dist/sw.js'
    })
  ]
};

Các tuỳ chọn bạn chuyển đến GenerateSW hoặc InjectManifest không giống với generateSW hoặc injectManifest, nhưng có sự chồng chéo đáng kể. Cụ thể, bạn không cần phải—hoặc bạn không cần—chỉ định một globDirectory tuỳ chọn cho GenerateSW vì webpack đã biết tài sản sản xuất của bạn được đóng gói ở đâu.

Sử dụng khung

Mọi vấn đề được đề cập ở phần này đều tập trung vào việc sử dụng Workbox bất kể lựa chọn ưu tiên của mỗi người về khung là gì. Tuy nhiên, bạn có thể sử dụng Workbox trong một khung cụ thể nếu việc này giúp việc phát triển trở nên dễ dàng hơn. Ví dụ: create-react-app đi kèm với Workbox theo mặc định. Các công cụ tích hợp khung khác nhau với Workbox được đề cập ở phần sau của bài viết sau.

Cần lưu ý rằng các công cụ tích hợp dành riêng cho khung của Workbox có thể hạn chế khả năng định cấu hình Workbox theo cách bạn muốn. Trong những trường hợp như thế này, bạn luôn có thể quay lại sử dụng các phương pháp được thảo luận ở đây.

Nếu tôi không có quy trình xây dựng thì sao?

Tài liệu này giả định rằng dự án của bạn có quy trình xây dựng, nhưng trên thực tế, dự án của bạn có thể không có quy trình này. Nếu cách này đúng với tình huống của bạn, bạn vẫn có thể sử dụng Workbox với mô-đun workbox-sw. Với workbox-sw, bạn có thể tải môi trường thời gian chạy Workbox từ CDN hoặc cục bộ, đồng thời soạn trình chạy dịch vụ của riêng mình.

Kết luận

Tính linh hoạt của Workbox đảm bảo bạn có thể sử dụng Workbox cho bất kỳ dự án nào, bất kể khung hay chuỗi công cụ có ưu tiên như thế nào. Tất cả những giải pháp này sẽ cho phép bạn hoàn thành việc lưu trước vào bộ nhớ đệm và lưu vào bộ nhớ đệm trong thời gian chạy bằng một số phương thức, đồng thời giúp bạn linh hoạt hơn trong việc xây dựng trình chạy dịch vụ với các tính năng nâng cao hơn khi cần.