Дисплей: полноэкранный режим не работает на манифесте JSON

Question

Я хочу, чтобы мое прогрессивное веб-приложение отображалось в полноэкранном режиме без отображения адреса хрома / панели инструментов в верхней части, когда я добавляю его на домашний экран.Для этого я добавил display: fullscreen на manifest.json, но он не работает.Вот мой код manifest.json:

{
  "name": "Cardiofit",
  "short_name": "Cardiofit",
  "description": "Modern app for your health",
  "icons": [
    {
      "src": "images/cardio192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/cardio512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "display": "fullscreen",
  "start_url": "/",
  "orientation": "portrait"
}

Я подключил свой смартфон с помощью USB-кабеля к компьютеру и открыл Chrome на своем компьютере.Затем перейдите к «удаленным устройствам» в Chrome Inspector, чтобы я мог зайти на localhost на моем андроиде, чтобы посмотреть, как будет выглядеть приложение, когда оно будет добавлено на домашний экран.Но я могу по-прежнему видеть адресную панель инструментов браузера поверх нее даже после объявления «display: fullscreen» на manifest.json.

Как это исправить?

Answer 1

Когда вы добавляете приложение на домашний экран с опцией «Добавить на домашний экран», Chrome добавит значок на домашний экран, но за сценой, возможно, он сделал одно из двух.

1) Если веб-сайт, который вы пытаетесь добавить, соответствует всем критериям PWA , Chrome будет использовать компонент WebAPK для создания файла .APK, подпишет его и установит на устройстве.Чтобы проверить все критерии PWA для себя, используйте инструменты разработчика Chrome -> Аудит -> Выполнить аудит -> Прогрессивное веб-приложение.

2) Если сайт не является квалифицированным PWA, он все равно добавит значок, который откроет браузер при нажатии на него с адресной строкой.Похоже, это происходит в вашем случае.Я так понимаю, у вас есть файл manifest.json.Хорошие шансы, что он не обслуживается должным образом (возможно, из-за вашей упаковки и процесса сборки).Чтобы проверить это, используйте инструменты разработчика Chrome -> Приложение -> Манифест, чтобы узнать, достигает ли ваш манифест браузер.

Я бы порекомендовал вам использовать HTTPS и работников сервиса вместе с manifest.json, как минимум, наряду с другими вещами, объясненными здесь по мере необходимости, чтобы сделать его базовым минимальным PWA.

Answer 2

Чтобы добавить веб-приложение на домашний экран, вам нужно щелкнуть параметры [три точки с правой стороны] в Chrome и выбрать Add to Home screen. Это добавит значок на домашний экран.Это идет с полноэкранным.