Thêm tệp kê khai ứng dụng web bằng tính năng Tạo ứng dụng React

Theo mặc định, tệp kê khai ứng dụng web được đưa vào ứng dụng Create React 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ọ.

Houssein Djirdeh

Theo mặc định, phần Create React App (CRA) sẽ chứa một tệp kê khai ứng dụng web. Đang sửa đổi nội dung 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.

Tại sao tính năng này hữu ích?

Tệp kê khai ứng dụng web cung cấp khả năng thay đổi cách cài đặt ứng dụng sẽ trông như thế nào trên máy tính để bàn hoặc thiết bị di động của người dùng. Sửa đổi thuộc tính trong tệp JSON, bạn có thể sửa đổi một số chi tiết trong ứng dụng, bao gồm:

• Tên
• Mô tả
• Biểu tượng ứng dụng
• Màu giao diện

Tài liệu MDN bao gồm mọi thuộc tính có thể thay đổi một cách chi tiết.

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"
}

Điều này cho phép mọi người cài đặt ứng dụng trên thiết bị của mình cũng như 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 và có tệp kê khai đã được sửa đổi tệp:

Để tìm hiểu xem tất cả thuộc tính có đang hoạt động chính xác hay không trong ví dụ này, hãy làm như sau:

• Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó nhấn Toàn màn hình .
• Nhấn tổ hợp phím "Control + Shift + J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
• Nhấp vào thẻ Application (Ứng dụng).
• Trong bảng điều khiển Application (Ứng dụng), nhấp vào thẻ Manifest (Tệp kê khai).

Kết luận

1. Nếu bạn đang xây dựng một trang web mà bạn cho rằng không cần phải được cài đặt trên thiết bị, hãy xóa tệp kê khai và phần tử <link> trong tệp HTML trỏ đến nội dung đó.
2. 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 kê khai nếu bạn không sử dụng CRA) với bất kỳ các thuộc tính mà bạn thích. Chiến lược phát hành đĩa đơ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.