Theo mặc định, tệp kê khai ứng dụng web được đưa vào Create React App và cho phép mọi người cài đặt ứng dụng React của bạn trên thiết bị của họ.
Theo mặc định, Create React App (CRA) bao gồm một tệp kê khai ứng dụng web. Việc sửa đổi tệp này sẽ cho phép bạn thay đổi cách ứng dụng hiển thị khi được cài đặt trên thiết bị của người dùng.
Vì sao tính năng này hữu ích?
Tệp kê khai của ứng dụng web cho phép thay đổi giao diện của ứng dụng đã cài đặt trên máy tính hoặc thiết bị di động của người dùng. Bằng cách sửa đổi các thuộc tính trong tệp JSON, bạn có thể sửa đổi một số thông tin chi tiết trong ứng dụng của mình, bao gồm:
- Tên
- Mô tả
- Biểu tượng ứng dụng
- Màu giao diện
Tài liệu MDN trình bày chi tiết tất cả các thuộc tính có thể thay đổi.
Sửa đổi tệp kê khai mặc định
Trong CRA (một tệp kê khai mặc định), /public/manifest.json sẽ tự động được đưa vào khi tạo ứng dụng mới:
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
Thao tác này cho phép mọi người cài đặt ứng dụng trên thiết bị của mình và xem một số thông tin mặc định của ứng dụng. Tệp HTML public/index.html cũng bao gồm một phần tử <link> để tải tệp kê khai.
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
Dưới đây là ví dụ về một ứng dụng được tạo bằng CRA có tệp kê khai đã sửa đổi:
Cách tìm hiểu xem tất cả các thuộc tính có hoạt động chính xác trong ví dụ này hay không:
- Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào biểu tượng Màn hình toàn cảnh
. - Nhấn tổ hợp phím `Ctrl+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở DevTools.
- Nhấp vào thẻ Application (Ứng dụng).
- Trong bảng điều khiển Application (Ứng dụng), hãy nhấp vào thẻ Manifest (Tệp kê khai).
Kết luận
- Nếu bạn đang xây dựng một trang web mà bạn cho là không cần cài đặt trên thiết bị, hãy xoá tệp kê khai và phần tử
<link>trong tệp HTML trỏ đến trang web đó. - Nếu bạn muốn người dùng cài đặt ứng dụng trên thiết bị của họ, hãy sửa đổi tệp kê khai (hoặc tạo một tệp nếu bạn không sử dụng CRA) bằng bất kỳ thuộc tính nào bạn muốn. Tài liệu MDN giải thích tất cả các thuộc tính bắt buộc và không bắt buộc.