workbox-cli

Giao diện dòng lệnh Workbox (nằm trong phần tử Gói workbox-cli) bao gồm một chương trình Node.js có tên là hộp làm việc có thể chạy từ dòng lệnh Windows, macOS hoặc tương thích với UNIX môi trường. Về sau, workbox-cli bao bọc mô-đun bản dựng hộp công việc, đồng thời cung cấp cách dễ dàng để tích hợp Workbox vào bản 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 bằng Nút, hãy chạy lệnh sau trong thiết bị đầu cuối 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 của bạn.
  • generateSW: Tạo một trình chạy dịch vụ hoàn chỉnh cho bạn.
  • injectManifest: Chèn các thành phần để lưu vào bộ nhớ đệm trước vào dự á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 một loạt câu hỏi về thư mục cục bộ của bạn 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 một tệp cấu hình có thể được sử dụng sau đó khi chạy trong 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 làm việc một lần và bạn được thoải mái để tuỳ chỉnh tệp cấu hình ban đầu đã tạo theo cách thủ công, bằng cách sử dụ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

Các nhà phát triển hài lòng với tính năng lưu vào bộ nhớ đệm 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ụ bạn nên sử dụng chế độ generateSW.

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

  • Bạn muốn lưu trước các tệp trong bộ nhớ đệm.
  • Bạn có nhu cầu đơn giản về việc lưu vào bộ nhớ đệm trong thời gian chạy.

Khi nào 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 (cụ thể là Web Push).
  • 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

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

Khi chạy workbox injectManifest, hệ thống sẽ tìm một chuỗi cụ thể (precacheAndRoute(self.__WB_MANIFEST) theo mặc định) trong nguồn của bạn tệp trình chạy dịch vụ. Phương thức này thay thế mảng trống bằng 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 bộ nhớ đệm vị trí đích, dựa trên các tuỳ chọn cấu hình trong config.js. Phần còn lại của mã trong trình chạy dịch vụ nguồn của bạn vẫn giữ nguyê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 trước các tệp trong bộ nhớ đệm.
  • Bạn cần tuỳ chỉnh định tuyến và chiến lược.
  • Bạn muốn dùng trình chạy dịch vụ của mình với các tính năng nền tảng khác (ví dụ: Web Push).

Khi nào KHÔNG nên sử dụng injectManifest

  • Bạn muốn biết cách dễ nhất để thêm trình chạy dịch vụ vào trang web của mình.

copyLibraries

Chế độ này rất 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 máy chủ gốc của riêng bạn là sử dụng CDN.

Bạn chỉ cần chạy chương trình này với một đường dẫn để ghi các 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 để tăng cường sức mạnh cho ứng dụng web của bạn service worker. Để 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 của ứng dụng web. Điều này đảm bảo rằng trình chạy dịch vụ của bạn có thể lưu trước hiệu quả tất cả nội dung quan trọng của ứng dụng web vào bộ nhớ đệm và lưu giữ nội dung đó của bạn.

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 hiện đã có 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 tốt.

Nếu bạn đang sử dụng webpack làm bản dựng của mình , sau đó sử dụng workbox-webback-plugin là lựa chọn tốt hơn.

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

Nếu không có quy trình xây dựng nào, 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 của bạn vào bộ nhớ đệm. Đang cố gắng cần nhớ chạy workbox-cli theo cách thủ công có thể dễ gặp lỗi và quên việc chạy nó có thể dẫn đến nội dung cũ được phân phối cho khách truy cập cũ.

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

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

Từ 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 cho trường hợp sử dụng của bạn) và <path/to/config.js> với đường dẫn đến các lựa chọn cấu hình của bạn. Cấu hình của bạn có thể đã được tạo tự động bằng workbox wizard hoặc được điều chỉnh theo cách thủ công.

Cấu hình

Các lựa chọn mà generateSW sử dụng

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

Các lựa chọn mà injectManifest sử dụng

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