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 Tạo ứng dụng 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ương thức Create React App (CRA) sẽ chứa 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.

Tại sao điều này hữu ích?

Tệp kê khai ứ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
• Nội dung mô tả
• Biểu tượng ứng dụng
• Màu giao diện

Tài liệu MN trình bày chi tiết về 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 ứng dụng mới được tạo:

{
  "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ó thể cài đặt ứng dụng trên thiết bị của mình và xem một số thông tin chi tiết 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 cơ sở lưu trú có đang hoạt động đúng cách trong ví dụ này hay không:

• Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng), sau đó nhấn vào Fullscreen (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 Application (Ứng dụng), hãy 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ài đặt trên một thiết bị, hãy xoá tệp kê khai và phần tử <link> trong tệp HTML trỏ đến trang web đó.
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 nếu bạn không sử dụng CRA) với bất kỳ thuộc tính nào bạn muốn. Tài liệu MAD giải thích tất cả các thuộc tính bắt buộc và không bắt buộc.