Tạo Ứng dụng web tiến bộ bằng CLI Angular

Bạn muốn tạo ứng dụng Angular dễ dàng cài đặt? Đừng chờ đợi nữa!

Minko Gechev

Trong bài đăng này, bạn sẽ tìm hiểu cách sử dụng giao diện dòng lệnh (CLI) của Angular để tạo Ứng dụng web tiến bộ (PWA).

Bạn có thể tìm thấy mã mẫu trong hướng dẫn này trên GitHub.

Tạo PWA có thể cài đặt

Để biến ứng dụng Angular của bạn thành PWA, bạn chỉ cần chạy một lệnh duy nhất:

ng add @angular/pwa

Lệnh này sẽ:

  • Tạo một trình chạy dịch vụ có cấu hình lưu vào bộ nhớ đệm mặc định.
  • Tạo một tệp kê khai, cho trình duyệt biết cách ứng dụng của bạn sẽ hoạt động khi được cài đặt trên thiết bị của người dùng.
  • Thêm một đường liên kết đến tệp kê khai trong index.html.
  • Thêm thẻ theme-color <meta> vào index.html.
  • Tạo biểu tượng ứng dụng trong thư mục src/assets.

Theo mặc định, trình chạy dịch vụ của bạn sẽ được đăng ký trong vòng vài giây kể từ lần tải trang đầu tiên. Nếu không, hãy cân nhắc sửa đổi registrationStrategy.

Tuỳ chỉnh PWA

Bài đăng Lưu trước vào bộ nhớ đệm bằng trình chạy dịch vụ Angular giải thích cách định cấu hình trình chạy dịch vụ Angular. Tại đó, bạn có thể tìm thấy cách chỉ định những tài nguyên mà bạn muốn trình chạy dịch vụ lưu vào bộ nhớ đệm và chiến lược mà trình chạy dịch vụ nên sử dụng để thực hiện việc đó.

Tệp kê khai của ứng dụng cho phép bạn chỉ định tên, tên ngắn, biểu tượng, màu chủ đề và các thông tin khác của ứng dụng. Đọc về toàn bộ tập hợp các thuộc tính mà bạn có thể đặt trong bài đăng Thêm tệp kê khai ứng dụng web.

Hãy xem tệp kê khai do Angular CLI tạo:

{
  "name": "manifest-web-dev",
  "short_name": "manifest-web-dev",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    …
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Bạn có thể tuỳ chỉnh bất kỳ thuộc tính nào trong số này bằng cách thay đổi giá trị liên quan trong manifest.webmanifest.

PWA tham chiếu đến tệp kê khai bằng phần tử link trong index.html. Sau khi tìm thấy tham chiếu, trình duyệt sẽ hiển thị lời nhắc Thêm vào màn hình chính:

Lời nhắc cài đặt ứng dụng web tiến bộ

Vì sơ đồ ng-add thêm mọi thứ cần thiết để giúp ứng dụng của bạn dễ dàng cài đặt, nên chúng sẽ tạo một số biểu tượng lối tắt xuất hiện khi người dùng thêm ứng dụng vào máy tính của họ:

Biểu tượng lối tắt của ứng dụng web tiến bộ

Hãy nhớ tuỳ chỉnh các thuộc tính và biểu tượng trong tệp kê khai trước khi triển khai PWA của bạn vào môi trường thực tế!

Kết luận

Cách tạo ứng dụng Angular có thể cài đặt:

  1. Thêm @angular/pwa vào dự án của bạn bằng Angular CLI.
  2. Chỉnh sửa các tuỳ chọn trong tệp manifest.webmanifest cho phù hợp với dự án của bạn.
  3. Cập nhật các biểu tượng trong thư mục src/assets/icons cho phù hợp với dự án của bạn.
  4. Bạn có thể chỉnh sửa theme-color trong index.html.