Как скрыть навигацию Safari при переходе по страницам
Многие веб-разработчики сталкиваются с ситуацией: вы добавили сайт на экран «Домой» в Safari на iOS, использовали мета-тег <meta name="apple-mobile-web-app-capable" content="yes">, но при переходе на другую страницу адресная строка и панель навигации браузера снова появляются. Это ломает ощущение нативного приложения. В этой статье разберём причины и дадим рабочие решения.
Почему навигация Safari возвращается
Мета-тег apple-mobile-web-app-capable действительно переводит сайт в полноэкранный режим, но только для начальной страницы, добавленной на экран «Домой». Как только пользователь переходит по внутренней ссылке (даже если используется AJAX), Safari может сбросить этот режим. Причина - отсутствие корректного манифеста веб-приложения (PWA) или неправильная настройка service worker.
Как исправить: полное решение с PWA
Чтобы навигация Safari не появлялась при переходах, необходимо создать Progressive Web App (PWA). Вот пошаговая инструкция:
- Создайте манифест - файл
manifest.jsonс параметрамиdisplay: standaloneиstart_url. - Добавьте ссылку на манифест в
<head>каждой страницы:<link rel="manifest" href="/manifest.json">. - Настройте service worker для кэширования ресурсов и обработки навигации. Например, перехватывайте запросы и возвращаете кэшированную HTML-оболочку.
- Используйте History API - при AJAX-переходах обновляйте URL через
history.pushState, чтобы браузер не перезагружал страницу.
Дополнительные советы
Если вы всё ещё видите навигацию, проверьте, что ваш сервер отдаёт правильные заголовки кэширования. Также убедитесь, что на всех страницах сайта присутствует мета-тег apple-mobile-web-app-capable. Иногда помогает добавление тега <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">.
Почему AJAX не решает проблему
Вы упомянули, что пробовали AJAX - это хороший шаг, но без манифеста и service worker Safari не считает ваш сайт полноценным веб-приложением. AJAX сам по себе не отключает навигацию браузера. Только комбинация PWA-технологий гарантирует постоянный полноэкранный режим.
Пример конфигурации manifest.json
{
"name": "Моё приложение",
"short_name": "Приложение",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000"
}Заключение
Чтобы навсегда скрыть навигацию Safari на iOS при переходах между страницами, используйте PWA: создайте манифест, подключите service worker и применяйте History API. Это даст стабильный результат и улучшит пользовательский опыт.