Добавьте манифест веб-приложения с помощью Create React App.

Манифест веб-приложения включен в Create React App по умолчанию и позволяет любому человеку установить ваше React-приложение на свое устройство.

Houssein Djirdeh

Create React App (CRA) по умолчанию включает манифест веб-приложения. Изменение этого файла позволит вам изменить отображение приложения после установки на устройстве пользователя.

Почему это полезно?

Файлы манифеста веб-приложений позволяют изменить внешний вид установленного приложения на компьютере или мобильном устройстве пользователя. Изменяя свойства JSON-файла, вы можете изменить ряд параметров приложения, включая:

• Имя
• Описание
• Значок приложения
• Цвет темы

Документация MDN подробно описывает все свойства, которые можно изменить.

Изменить манифест по умолчанию

В CRA файл манифеста по умолчанию /public/manifest.json включается автоматически при создании нового приложения:

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

Это позволяет любому пользователю установить приложение на своё устройство и просмотреть некоторые сведения о нём по умолчанию. HTML-файл public/index.html также содержит элемент <link> для загрузки манифеста.

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Чтобы узнать, все ли свойства работают правильно в этом примере:

• Нажмите `Control+Shift+J` (или `Command+Option+J` на Mac), чтобы открыть DevTools.
• Откройте вкладку «Приложение» .
• На панели «Приложение» выберите вкладку «Манифест» .

Заключение

1. Если вы создаете сайт, который, по вашему мнению, не требует установки на устройство, удалите манифест и элемент <link> в HTML-файле, который указывает на него.
2. Если вы хотите, чтобы пользователи устанавливали приложение на свои устройства, измените файл манифеста (или создайте его, если вы не используете CRA), указав нужные вам свойства. В документации MDN описаны все обязательные и необязательные атрибуты.