Cách sử dụng Workbox

Workbox đủ linh hoạt để thích ứng với hầu hết quy trình xây dựng của dự án. Điều này có nghĩa là có nhiều cách để sử dụng Workbox, cho phép bạn chọn công cụ 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ụ khác nhau cũng 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 pháp cốt lõi của các công cụ xây dựng của Workbox: generateSW hoặc injectManifest. Cách mà bạn nên sử dụng phụ thuộc vào mức độ linh hoạt bạn cần. generateSW ưu tiên tính dễ sử dụng và đơn giản nhưng đồng thời cũng cần phải linh hoạt, cho phép bạn khai báo một tập hợp các lựa 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 tạo nên sự linh hoạt cao hơn nhưng vẫn đơn giản, vì bạn sẽ phải tự viết mã cho trình chạy dịch vụ, trong đó injectManifest cung cấp một tệp kê khai trước trong bộ nhớ đệm mà các phương thức lưu trước của Workbox có thể sử dụng.

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

Bạn nên dùng generateSW nếu:

  • Bạn nên lưu trước các tệp liên quan đến quá trình xây dựng trong bộ nhớ đệm, bao gồm cả các tệp có URL chứa hàm băm mà có thể bạn chưa biết trước.
  • Bạn có thể thiết lập một số nhu cầu đơn giản vào bộ nhớ đệm trong thời gian chạy thông qua các 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ư Web Push).
  • 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 mô-đun Hộp làm việc cụ thể để tinh chỉnh trình chạy dịch vụ theo nhu cầu của ứng dụng của bạn.

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

Bạn nên dùng injectManifest nếu:

  • Bạn muốn lưu trước các tệp trong bộ nhớ đệm 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ể thể hiện được thông qua các lựa 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ụ của mình (chẳng hạn như Web Push).

injectManifest khác với generateSW ở chỗ nó 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 worker của dịch vụ nguồn cần có một chuỗi self.__WB_MANIFEST đặc biệt để injectManifest có thể thay thế tệp đó bằng tệp kê khai trước trong 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 vào bộ nhớ đệm trong trình chạy dịch vụ của mình.
  • các yêu cầu của trình chạy dịch vụ của chúng tôi đủ đơn giản để phù hợp với những gì generateSW và các tuỳ chọn cấu hình tương ứng 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ông cụ tạo của Workbox

Nếu đang tìm một cách 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:

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

Mỗi công cụ bản 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 đều là những lựa chọn tốt khi bạn không muốn liên kết trình thực thi dịch vụ do Hộp làm việc của mình hỗ trợ 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 tìm hiểu sơ qua về mỗi phương á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 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 này sẽ đặt 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 một dự án có 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à trình bao bọc xung quanh mô-đun workbox-build và một giải pháp thay thế là sử dụng workbox-build trực tiếp. 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 sử dụng các phương thức generateSW hoặc injectManifest như một phần của tập lệnh Nút, truyền vào một tập hợp 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 trình gói

Nhiều trình gói khác nhau có các trình bổ trợ Workbox riêng, nhưng trình bổ trợ duy nhất mà nhóm Workbox hỗ trợ chính thức là webpack, thông qua workbox-webpack-plugin. Giống như workbox-cli và workbox-build, workbox-webpack-plugin sẽ chạy các phương thức generateSW hoặc injectManifest, ngoại trừ trình bổ trợ viết hoa các tên phương thức đó dưới dạng 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 mà bạn chuyển đến GenerateSW hoặc InjectManifest không giống với generateSW hoặc injectManifest, nhưng có sự trùng lặp đáng kể. Cụ thể, bạn không cần (hoặc có thể) chỉ định tuỳ chọn globDirectory cho GenerateSW vì webpack đã biết nơi tài sản sản xuất của bạn được đi kèm.

Sử dụng khung

Mọi thứ đã đề cập đến điểm này đều tập trung vào việc sử dụng Workbox, bất kể lựa chọn ưu tiên về khung của một người. 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ách tích hợp khung khác với Workbox sẽ được đề cập ở phần sau trong bài viết sau.

Lưu ý rằng các chức năng tích hợp Workbox dành riêng cho khung này 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ư vậy, bạn luôn có thể quay lại phương thứ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ó thể không có quy trình này. Nếu đúng như trường hợp 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 thời gian chạy Workbox từ CDN hoặc cục bộ, cũng như 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 trong mọi dự án, bất kể lựa chọn ưu tiên về khung hoặc chuỗi công cụ. Tất cả các cách này sẽ cho phép bạn hoàn thành việc chuẩn bị bộ nhớ đệm và lưu vào bộ nhớ đệm trong thời gian chạy bằng một số phương pháp, đồng thời cho phép 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.