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

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

Хусейн Джирде

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

Вот пример приложения, созданного с помощью CRA, с измененным файлом манифеста:

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

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

На вкладке «Манифест» DevTool показаны свойства из файла манифеста приложения.

Заключение

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