Bạn muốn làm cho ứng dụng Angular có thể cài đặt được? Đừng chần chừ nữa!
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àoindex.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:
![Lời nhắc cài đặt ứng dụng web tiến bộ](https://web.dev/static/articles/creating-pwa-with-angular-cli/image/a-progressive-web-app-ins-a07db96e452df.png?authuser=5&hl=vi)
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:
![Biểu tượng lối tắt của ứng dụng web tiến bộ](https://web.dev/static/articles/creating-pwa-with-angular-cli/image/a-progressive-web-app-sho-f72ad569b7211.png?authuser=5&hl=vi)
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:
- Thêm
@angular/pwa
vào dự án của bạn bằng CLI Angular. - 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. - 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. - Nếu muốn, hãy chỉnh sửa
theme-color
trongindex.html
.