workbox-cli

Giao diện dòng lệnh Workbox (nằm trong gói workbox-cli) bao gồm một chương trình Node.js có tên là workbox, có thể chạy trên môi trường dòng lệnh tương thích với Windows, macOS và UNIX. Về sau, workbox-cli gói mô-đun bản dựng hộp công việc và cung cấp một cách dễ dàng để tích hợp Workbox vào quy trình xây dựng dòng lệnh, với các cấu hình linh hoạt.

Cài đặt CLI

Để cài đặt CLI với Nút, hãy chạy lệnh sau trong cửa sổ dòng lệnh của bạn:

npm install workbox-cli --global

Chế độ CLI

CLI có 4 chế độ:

  • wizard: Hướng dẫn từng bước để thiết lập Workbox cho dự án.
  • generateSW: Tạo một trình chạy dịch vụ hoàn chỉnh cho bạn.
  • injectManifest: Chèn nội dung để lưu trước vào bộ nhớ đệm cho dự án của bạn.
  • copyLibraries: Sao chép các thư viện Workbox vào một thư mục.

wizard

Trình hướng dẫn Workbox đặt ra một loạt câu hỏi về việc thiết lập thư mục cục bộ và những tệp bạn muốn lưu trước vào bộ nhớ đệm. Câu trả lời của bạn được dùng để tạo tệp cấu hình, sau đó có thể được dùng khi chạy ở chế độ generateSW.

Hầu hết các nhà phát triển sẽ chỉ cần chạy trình hướng dẫn hộp công việc một lần và bạn có thể tuỳ chỉnh tệp cấu hình ban đầu được tạo theo cách thủ công bằng bất kỳ tuỳ chọn cấu hình bản dựng nào được hỗ trợ.

Để bắt đầu chạy trình hướng dẫn:

npx workbox-cli wizard

Ảnh chụp màn hình trình hướng dẫn của Workbox CLI

generateSW

Bạn có thể sử dụng Workbox CLI để tạo một trình chạy dịch vụ hoàn chỉnh bằng cách sử dụng tệp cấu hình (như tệp do trình hướng dẫn tạo).

Chỉ cần chạy lệnh sau:

npx workbox-cli generateSW path/to/config.js

Những nhà phát triển hài lòng với khả năng lưu trước và lưu vào bộ nhớ đệm trong thời gian chạy tích hợp của Workbox và không cần tuỳ chỉnh hành vi của trình chạy dịch vụ nên sử dụng chế độ generateSW.

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

Đối với các nhà phát triển muốn có thêm quyền kiểm soát đối với tệp trình chạy dịch vụ cuối cùng của họ có thể sử dụng chế độ injectManifest. Chế độ này giả định rằng bạn hiện có một tệp trình chạy dịch vụ (vị trí của tệp được chỉ định trong config.js).

Khi chạy workbox injectManifest, công cụ này sẽ tìm một chuỗi cụ thể (precacheAndRoute(self.__WB_MANIFEST) theo mặc định) trong tệp trình chạy dịch vụ nguồn của bạn. Phương thức này thay thế mảng trống bằng một danh sách URL để lưu trước vào bộ nhớ đệm và ghi tệp trình chạy dịch vụ vào vị trí đích đến, dựa trên các lựa chọn cấu hình trong config.js. Phần mã còn lại trong worker dịch vụ nguồn không được động đến.

Bạn có thể sử dụng Workbox ở chế độ này như sau:

npx workbox-cli injectManifest path/to/config.js

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.

copyLibraries

Chế độ này sẽ hữu ích nếu bạn muốn sử dụng injectManifest và muốn sử dụng các tệp thư viện Workbox được lưu trữ trên nguồn gốc của riêng bạn thay vì sử dụng CDN.

Bạn chỉ cần chạy ứng dụng đó với một đường dẫn để ghi tệp vào:

npx workbox-cli copyLibraries third_party/workbox/

Tích hợp quy trình xây dựng

Tại sao Workbox cần tích hợp với quy trình xây dựng của tôi?

Dự án Workbox chứa một số thư viện hoạt động cùng nhau để hỗ trợ trình chạy dịch vụ của ứng dụng web. Để sử dụng các thư viện đó một cách hiệu quả, Workbox cần được tích hợp vào quy trình xây dựng của ứng dụng web. Điều này đảm bảo rằng trình chạy dịch vụ có thể lưu trước tất cả nội dung quan trọng của ứng dụng web một cách hiệu quả vào bộ nhớ đệm và luôn cập nhật nội dung đó.

workbox-cli có phải là lựa chọn phù hợp cho quy trình xây dựng của tôi không?

Nếu bạn đang có một quy trình xây dựng hoàn toàn dựa trên tập lệnh npm, thì workbox-cli là lựa chọn phù hợp.

Nếu hiện đang sử dụng webpack làm công cụ xây dựng, thì bạn nên sử dụng workbox-webback-plugin.

Nếu bạn đang sử dụng Gulp, Grunt hoặc một số công cụ xây dựng dựa trên Node.js khác, thì bạn nên tích hợp workbox-build vào tập lệnh bản dựng.

Nếu chưa có quy trình xây dựng, bạn nên tạo một quy trình trước khi sử dụng Workbox để lưu trước bất kỳ nội dung nào vào bộ nhớ đệm. Việc cố gắng nhớ chạy workbox-cli theo cách thủ công có thể dễ gặp lỗi và việc quên chạy có thể dẫn đến nội dung lỗi thời được phân phát cho khách truy cập cũ.

Thiết lập và định cấu hình

Sau khi cài đặt workbox-cli làm phần phụ thuộc phát triển cho dự án cục bộ, bạn có thể thêm lệnh gọi đến workbox ở cuối tập lệnh npm của quy trình xây dựng hiện có:

Trong package.json:

{
  "scripts": {
    "build": "my-build-script && workbox <mode> <path/to/config.js>"
  }
}

Thay thế <mode> bằng generateSW hoặc injectManifest (tuỳ thuộc vào trường hợp sử dụng của bạn) và <path/to/config.js> bằng đường dẫn đến các lựa chọn cấu hình. Cấu hình của bạn có thể đã được workbox wizard tạo tự động hoặc được điều chỉnh theo cách thủ công.

Cấu hình

Các chế độ mà generateSW sử dụng

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.

Các chế độ mà injectManifest sử dụng

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.