Запустите Desktop PWA в полноэкранном режиме или в режиме киоска

Question

Я искал решение, но не нашел ничего, что работает. Я пытаюсь запустить PWA с настольного компьютера Windows, добавленного с Chrome, в режиме киоска или, по крайней мере, в полноэкранном режиме (без строк меню вообще). Я думаю, что это будет очень распространено, но я не нашел ничего, что работает. Я добавил display: fullscreen в manifest.json, но, похоже, это не работает для рабочего стола.

Я в порядке с любым видом Javascript, но я бы не хотел, чтобы какое-либо взаимодействие с пользователем нажималоF11 или что-нибудь. Он предназначен для автономного телевизионного дисплея.

Фактический результат после запуска

Желаемый результат после запуска

{
  "name": "vuejs-display-new",
  "short_name": "vuejs-display-new",
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./side/adds",
  "display": "fullscreen",
  "orientation": "landscape",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

Answer 1

Я тоже ищу решение для этого. Я обновился до Windows 10 Pro и пытаюсь использовать режим Windows Kiosk, но приложение не отображается в меню приложений, которые вы можете установить в качестве своего киоска.

Одна вещь, которую нужно уточнитьЯ думаю, что после OP тоже было то, что простой полноэкранный режим не работает для общедоступных киосков, поскольку существует много способов непреднамеренного запуска окна, чтобы свести к минимуму (даже на сенсорном экране), например, если провести пальцем по левому нижнему углу, откроются окна. icon.

Я только начал искать, поэтому я сообщу здесь, если / когда узнаю, как заставить мое приложение отображаться в меню киоска Win 10 Pro!

Answer 2

После установки PWA вы должны перейти к свойствам ярлыка и в конце поля добавить код в конце:

--fullscreen --kiosk

Полностью закройте Chrome и откройте ярлык pwa

Answer 3

Кажется, что свойство display:"fullscreen" работает правильно, так как вы не видите ни адресной строки браузера, ни других элементов пользовательского интерфейса.

Однако некоторые свойства CSS могут устанавливать содержимое вне области просмотра. Я бы дважды проверил, что свойство макета не мешает содержанию страницы.