Браузер Safari и вкладка ДОМОЙ

[igorek-art 35]

Всем привет. Подскажите, пожалуйста, в чем может быть проблема? Ситуация такая, по логике, если зайти на любой сайт с мобильного телефона через браузер сафари (с айфона) и любой сайт добавить на экран ДОМОЙ, то при переходе на этот сайт с этой закладки, которая на экране дома, сайт будет отображаться без адресной строки браузера, то есть типа как просто запустил приложение!! НОООО. Не понимаю, почему это работает не со всеми сайтами.. Например, мой древний сайт https://rabota-v-tinkoff.ru все хорошо, через закладку ДОМОЙ запускается как приложение, на полный экран! Мой новый сайт, нифига так не запускается (ну то есть все признаки что страничка через браузер запущена). Например сайт https://dle-news.ru тоже не работает в пояноэкранном режиме через закладку ДОМОЙ, а вот например https://searchengines.guru/ru РАБОТАЕТ! Не могу понять на каком этапе это управляется? По логике же это вообще от кода не должно зависеть? это же вроде функционал именно операционно и браузера? Почему тогда на одном сайте это работает а на другом нет?!

Параметры отвечающие за это на месте на всех сайтах

    <meta name="apple-mobile-web-app-capable" content="yes">
 

 

Изменено 19 часов назад пользователем igorek-art

[igorek-art 35]

Delysid #:
 Вероятно надо в apple писать.

Интересен еще такой момент, что сейчас проверил всё это на 4 разных айфонах. Пытался добавить все эти же сайты из моего поста, итог такой, что на всех 4 смартфонах сайт про работувтиньке выглядит ПОЛНОЭКРАННО, сайт серча тоже,  а остальные из теста так же нет. У меня почему то ощущение, что на это влияет не только 1 этот параметр в МЕТА. Потому что если б это как то рандомно бы сейчас работало, то ну на одном из 4 айфонов то сработало бы с нужным сайтом в полный экран 🤔

[igorek-art 35]

Проблему нашел и это какой то бред) Как оказалось, если в Федере есть вот такое 

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

То не работает так, как надо, если строчку эту убрать, то все работает

[celsoft 6 195]

Это называется PWA приложение. Управляется это метатеги на странице а также манифестом. Именно в манифесте вы задаете все параметры и как отображать, со строкой, без, и так далее. В поисковике можете найти много информации по тому как создавать манифесты и какие параметры можно в них использовать. Например https://habr.com/ru/companies/agima/articles/901736/

[igorek-art 35]

6 часов назад, celsoft сказал:

Это называется PWA приложение. Управляется это метатеги на странице а также манифестом. Именно в манифесте вы задаете все параметры и как отображать, со строкой, без, и так далее. В поисковике можете найти много информации по тому как создавать манифесты и какие параметры можно в них использовать. Например https://habr.com/ru/companies/agima/articles/901736/

Проблема оказалась именно в содержании файла manifest (на вашем сайте de-news.ru) к слову у вас тоже не работает так, как это надо. Если ваш сайт добавить на экран домой, то у вас адресная строка не исчезает и Вы будто бы находитесь на сайте..

Самое главное, чтоб после перечисления иконок в вышеупомянутом файле была обязательно строка 

 ],
    "display": "standalone"
}

Именно из-за этого слова и не работает в данном случае. Меня больше интересует другой момент: почему на моем древнем сайте (ему уже года 3 вроде) https://rabota-v-tinkoff.ru никаких этих манифестов ничего такого нет, но там при добавлении на экран домой работает в полноэкранном режиме как и необходимо!

То есть логика такая: есть два одинаковых сайта в плане версии движка. Но на одном все работает прекрасно без каких-либо manifest-ов а на другом надо сделать manifest да и еще не забыв указанное выше слово, иначе не работает полноэкранный режим.

[celsoft 6 195]

3 часа назад, igorek-art сказал:

(на вашем сайте de-news.ru) к слову у вас тоже не работает так, как это надо.

На нашем сайте работает как раз таки, как именно нам и надо. Нам не надо так как пишите вы. Наш сайт не предназначен для этого в принципе, и адресная строка именно нам на нашем сайте нужна например.

3 часа назад, igorek-art сказал:

Проблема оказалась именно в содержании файла manifest

Нет. Вы не путайте понятие "проблема", с тем что в манифесте было указано как отображать. Это не проблема, это было не указано как нужно отображать, меняете на другое значение и будет отображать как вам нужно, а не обязательно было удалять манифест.

3 часа назад, igorek-art сказал:

То есть логика такая: есть два одинаковых сайта в плане версии движка. Но на одном все работает прекрасно без каких-либо manifest-ов а на другом надо сделать manifest да и еще не забыв указанное выше слово, иначе не работает полноэкранный режим.

Нет никакой магии. Когда нет манифеста есть метатеги, и это не только <meta name="apple-mobile-web-app-capable" content="yes"> и в вашем случае они отсутствуют, какие именно никто вам по картам таро не скажет, потому что вы не предоставили ссылки на сайт где не работает. Поэтому важно соблюдать все условия, поисковик вам подробно расскажет какие:

Необходимый набор метатегов:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  <!-- Запрет масштабирования, чтобы избежать появления браузерной строки при скролле -->
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- iOS: позволяет работать как standalone-приложение -->
<meta name="apple-mobile-web-app-status-bar-style" content="default">  <!-- Устанавливает цвет верхней панели (опционально) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <!-- Устанавливает цвет верхней панели (опционально) -->
<meta name="apple-mobile-web-app-title" content="MyApp"> <!-- Имя, отображаемое под иконкой на рабочем столе -->
<link rel="apple-touch-icon" href="/icon.png"> <!-- Иконка приложения (опционально) -->
<link rel="manifest" href="/manifest.json"> <!-- ссылка на манифест (опционально) -->

Обязательное минимальное содержание manifest.json:

{
  "name": "MyApp",
  "short_name": "App",
  "display": "standalone",
  "start_url": "/",
  "scope": "/",
  "icons": [ { "src":"icon.png","sizes":"192x192","type":"image/png" } ]
}

Ну и надеюсь вы в курсе что обязательно нужно использовать HTTPS. Ну а вдруг не используете, не знаю. И не должно быть редиректов, чтобы метатеги были считаны корректно.

А когда нет совсем ничего, тут видимо Apple решает сам по своим каким то алгоритмам как отображать, тут наверное уже верстка играет роль. Поэтому чтобы работало корректно то нужно не на алгоритмы полагаться, а указать весь необходимый минимум как положено.

[igorek-art 35]

29 минут назад, celsoft сказал:

На нашем сайте работает как раз таки, как именно нам и надо. Нам не надо так как пишите вы. Наш сайт не предназначен для этого в принципе, и адресная строка именно нам на нашем сайте нужна например.

Нет. Вы не путаете понятие "проблема", с тем что в манифесте было указано как отображать. Это не проблема, это указание как нужно отображать, меняете на другое значение и будет отображать как вам нужно, а не обязательно было удалять манифест.

Нет никакой магии. Когда нет манифеста есть метатеги, и это не только <meta name="apple-mobile-web-app-capable" content="yes"> и в вашем случае они отсутствуют, какие именно никто вам по картам таро не скажет, потому что вы не предоставили ссылки на сайт где не работает. Поэтому важно соблюдать все условия, поисковик вам подробно расскажет какие:

Необходимый набор метатегов:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  <!-- Запрет масштабирования, чтобы избежать появления браузерной строки при скролле -->
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- iOS: позволяет работать как standalone-приложение -->
<meta name="apple-mobile-web-app-status-bar-style" content="default">  <!-- Устанавливает цвет верхней панели (опционально) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <!-- Устанавливает цвет верхней панели (опционально) -->
<meta name="apple-mobile-web-app-title" content="MyApp"> <!-- Имя, отображаемое под иконкой на рабочем столе -->
<link rel="apple-touch-icon" href="/icon.png"> <!-- Иконка приложения (опционально) -->
<link rel="manifest" href="/manifest.json"> <!-- ссылка на манифест (опционально) -->

Обязательное минимальное содержание manifest.json:

{
  "name": "MyApp",
  "short_name": "App",
  "display": "standalone",
  "start_url": "/",
  "scope": "/",
  "icons": [ { "src":"icon.png","sizes":"192x192","type":"image/png" } ]
}

Ну и надеюсь вы в курсе что обязательно нужно использовать HTTPS. Ну а вдруг не используете, не знаю. И не должно быть редиректов, чтобы метатеги были считаны корректно.

А когда нет совсем ничего, тут видимо Apple решает сам по своим каким то алгоритмам как отображать, тут наверное уже верстка играет роль. Поэтому чтобы работало корректно то нужно не на алгоритмы полагаться, а указать весь необходимый минимум как положено.

Понял, принял, с этим разобрался. Теперь сделал все как требуется.