Как скрыть новую панель URL-адресов в полноэкранном режиме iPad Safari WebApp, появившуюся с iPadOS 13?

Question

В iPadOS 13 теперь отображается бело-серая полоса, когда WebApp установлено через "Добавить на главный экран" в Safari, даже если добавлен метатег apple-touch-fullscreen. На панели есть меню для изменения размера шрифта и запроса рабочего стола, но это повлияло на доступный размер экрана, так что теперь пользователям нужно прокручивать страницу, чтобы просмотреть меню приложения.

Есть ли способ скрыть эту панель, например, принудительно заставить любой настольный или мобильный сайт, чтобы выбор не требовался?

Answer 1

Я нашел решение этого.

iPadOS добавляет панель URL-адресов в веб-приложения, даже если добавлен метатег apple-touch-fullscreen, но теперь использует файл manifest.json, используемый с Progressive Web Apps (PWA) для определения полноэкранного режима. Он поддерживал это до версии IOS 13, но только сейчас это требуется для полноэкранного режима.

В моем приложении тег ссылки manifest.json <link rel="manifest" href="manifest.json">добавлялся ТОЛЬКО при обнаружении Google Chrome; обновление для добавления ссылки при обнаружении Safari на iPad привело к тому, что серая полоса была полностью скрыта (обратите внимание, что определение iPad изменилось в этой версии, теперь можно запрашивать мобильные / настольные версии)

Файл manifest.js, разрешающий полноэкранный режим, показан ниже (display: "standalone" разрешает полноэкранный режим).

{
"name": "MyApp",
"short_name": "MyApp",
"description": "MyApp description",
"version": "0.0.0.1",
"manifest_version": 2,
"default_locale": "en-GB",
"author": "Christopher Dean",
"start_url": "Home.aspx",
"display": "standalone",
"orientation": "landscape",
"theme_color": "#015174",
"background_color": "#F7F4F3",
"icons": [
{
  "src": "images/app-icon-chrome.png",
  "sizes": "128x128",
  "type": "image/png"
},
{
  "src": "images/app-icon-tiny.png",
  "sizes": "32x32",
  "type": "image/png"
},
{
  "src": "images/app-icon-192.png",
  "sizes": "192x192",
  "type": "image/png"
},
{
  "src": "images/app-icon-512.png",
  "sizes": "512x512",
  "type": "image/png"
}
],
"app": {
 "urls": [
   "http://MyApp/Home.aspx"
 ],
 "launch": {
   "web_url": "http://MyApp/"
 },
 "background": {
   "scripts": [ "chrome.js" ]
 },
 "permissions": [ 
  "unlimitedStorage",
  "notifications",
  "fullscreen"
 ]
}
}