Добавление веб-сайта на главный экран iPhone¶
Добавление веб-сайта на главный экран iPhone — процедура создания ярлыка веб-страницы на главном экране смартфона Apple iPhone, выполняемая средствами мобильного браузера Safari. Такой ярлык (в терминологии Apple — «Веб-приложение» или «Web Clip») выглядит как обычная иконка приложения, запускает заданный сайт в отдельном окне браузера и позволяет открывать его без перехода через интерфейс Safari.
¶Принцип работы
iOS не поддерживает свободное размещение произвольных файлов или ссылок на рабочем столе (главном экране) в привычном для настольных ОС смысле. Единственный штатный способ «вывести» сайт на главный экран — использовать встроенную функцию Safari «На экран “Домой”» (в русской локализации iOS — «На экран “Домой”», в более ранних версиях — «На главный экран»). При этом iOS создаёт ярлык, привязанный к URL-адресу сайта, и отображает его в виде плитки с иконкой и названием.
Ярлык хранится в системе отдельно от браузера: при запуске страница открывается в Safari, но без адресной строки и стандартных элементов управления — интерфейс близок к нативному приложению. Это поведение определяется метатегом apple-mobile-web-app-capable, который может быть установлен разработчиком сайта.
¶Способ добавления через Safari
Порядок действий в актуальных версиях iOS (начиная с iOS 13–17):
- Открыть сайт в браузере Safari — функция недоступна в сторонних браузерах (Chrome, Firefox, Яндекс.Браузер и других), так как iOS ограничивает их доступ к системной функции ярлыков.
- Нажать кнопку «Поделиться» — иконка квадрата со стрелкой внизу экрана (в iOS 13–17) или в верхней панели (в iOS 18 и новее).
- В появившемся меню выбрать пункт «На экран “Домой”».
- В диалоговом окне можно изменить название ярлыка (по умолчанию берётся заголовок страницы или домен) и подтвердить действие кнопкой «Добавить».
После подтверждения иконка появится на одном из экранов главного меню. Её можно перемещать по сетке и расставлять в папки на общих основаниях.
¶Настройка отображения сайта
Разработчики сайтов могут управлять тем, как будет выглядеть веб-приложение после запуска с ярлыка. Для этого в HTML-код страницы добавляются специальные метатеги:
| Метатег | Назначение |
|---|---|
apple-mobile-web-app-capable | Запуск сайта в полноэкранном режиме без интерфейса Safari |
apple-mobile-web-app-status-bar-style | Видимость и стиль статус-бара (по умолчанию, чёрный, белый) |
apple-touch-icon | Иконка, используемая для ярлыка (размер 180×180 пикселей) |
mobile-web-app-capable | Стандартный аналог для Android и других платформ |
Без тега apple-mobile-web-app-capable ярлык будет открывать страницу в обычном окне Safari с адресной строкой. С тегом — сайт запускается в полноэкранном режиме, напоминающем нативное приложение.
¶Ограничения
- Ярлык не копирует сайт на устройство и не работает офлайн (если сайт не реализует сервис-воркер и кэширование самостоятельно).
- Уведомления Push в веб-приложении на iOS работают только начиная с iOS 16.4 и только для сайтов, добавленных на главный экран через Safari.
- Некоторые сайты с плотной адаптивной вёрсткой могут отображаться некорректно в режиме веб-приложения из-за отсутствия адресной строки и элементов навигации.
- Удаление ярлыка выполняется так же, как удаление обычного приложения: долгое нажатие на иконку → «Удалить закладку» или «Удалить приложение».
¶Альтернативные варианты
Если сайт не поддерживает режим веб-приложения, можно ограничиться добавлением его в «Избранное» (закладки Safari) — это не создаёт иконку на главном экране, но обеспечивает быстрый доступ через панель закладок. Некоторые крупные сервисы (например, ВКонтакте, Telegram Web) дополнительно предлагают установку Progressive Web App (PWA) — расширенной версии веб-приложения с офлайн-доступом и push-уведомлениями.
¶История
Функция «На экран “Домой”» появилась в iOS ещё до App Store — в первой версии iPhone (2007) пользователи могли создавать ярлыки сайтов через браузер Safari. В iOS 11.3 Apple добавила поддержку Service Workers, что сделало возможным полноценные PWA на iPhone. С iOS 16.4 (2023) веб-приложения получили поддержку push-уведомлений, что заметно расценило сценарии использования сайтов как замены нативным приложениям.