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

Bạn muốn làm cho ứng dụng Angular có thể cài đặt được? Đừng chần chừ 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 Angular (CLI) để 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 một ứng dụng web tiến bộ (PWA) có thể cài đặt

Để đặt ứng dụng Angular 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 tệp kê khai để cho trình duyệt biết cách ứng dụng của bạn sẽ hoạt động như thế nào khi được cài đặt trên thiết bị của người dùng.
• Thêm đườ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 phải đượ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 việc sửa đổi registrationStrategy.

Tuỳ chỉnh PWA

Bài đăng Tạo trước 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à bạn nên sử dụng để thực hiện việc này.

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 giao diện và các thông tin chi tiết khác của ứng dụng. Đọc về tập hợp đầy đủ các thuộc tính mà bạn có thể thiết lập trong bài đăng Thêm tệp kê khai ứng dụng web.

Xem nhanh 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ị có liên quan trong manifest.webmanifest.

Một PWA tham chiếu tệp kê khai với 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:

Vì giản đồ ng-add thêm mọi thứ cần thiết để ứng dụng của bạn có thể cài đặt, nên sơ đồ này sẽ tạo ra một số biểu tượng lối tắt hiển thị sau khi người dùng thêm ứng dụng vào màn hình:

Hãy nhớ tuỳ chỉnh các thuộc tính và biểu tượng của tệp kê khai trước khi triển khai PWA phiên bản chính thức!

Kết luận

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

1. Thêm @angular/pwa vào dự án của bạn bằng CLI Angular.
2. Chỉnh sửa các lựa 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. Nếu muốn, hãy chỉnh sửa theme-color trong index.html.