Как создать веб-приложение для iPhone и вынести его на главный экран
Создать веб-приложение на главном экране iPhone можно двумя путями: либо добавить существующий сайт через Safari как ярлык, либо разработать полноценное PWA с нуля, которое работает как нативное приложение.
Оглавление
Два способа добавить сайт на iPhone
Создание веб-приложения на iPhone может означать две разные задачи. Первая — быстрое добавление ярлыка существующего сайта. Вторая — разработка собственного приложения, которое воспринимается iOS как нативное. Оба подхода дают иконку на домашнем экране, но с разным уровнем интеграции.
Как сохранить любой сайт через Safari
Самый быстрый способ — добавить ссылку на уже работающий сайт. Иконка появится среди обычных приложений, а при наличии оптимизации сайт будет открываться без интерфейса браузера.
- Откройте нужный сайт в Safari. Это важно, потому что другие браузеры на iOS имеют ограниченный функционал для этой функции.
- Нажмите кнопку «Поделиться» (квадрат со стрелкой вверх) в нижней панели.
- Прокрутите список вниз и выберите пункт «На экран "Домой" (Add to Home Screen).
- При желании измените название ярлыка и нажмите «Добавить».
Если сайт оптимизирован как PWA, он откроется в полноэкранном режиме без адресной строки. Если оптимизации нет — он просто откроется как обычная вкладка в Safari.
Как создать полноценное PWA с нуля
Чтобы ваш сайт воспринимался iOS именно как приложение, необходимо выполнить технические требования Apple:
- Манифест (manifest.json). Добавьте файл манифеста в
<head>сайта. В нём укажитеname,short_name,start_url,display: standalone(для полноэкранного режима) и иконки разных размеров. - Мета-теги для iOS. Apple частично игнорирует стандартный манифест, поэтому обязательно добавьте в
<head>:<meta name="apple-mobile-web-app-capable" content="yes">— включает режим приложения.<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">— стиль статус-бара.<link rel="apple-touch-icon" href="/icon-180.png">— иконка для домашнего экрана (рекомендуемый размер 180×180 px, PNG без прозрачности).
- HTTPS. Сайт должен работать по защищённому протоколу. Без HTTPS Service Workers и многие функции PWA не будут работать.
- Service Worker. Для офлайн-работы и кэширования зарегистрируйте Service Worker. Это позволяет приложению загружаться мгновенно и работать без интернета.
- Адаптивность. Интерфейс должен быть полностью адаптирован под мобильные устройства, включая поддержку
safe-area-insetдля iPhone с чёлкой или Dynamic Island.
Полезные инструменты
| Инструмент | Назначение |
|---|---|
| PWA Builder | Онлайн-сервис для генерации манифестов, иконок и проверки готовности сайта |
| RealFaviconGenerator | Создание полного набора иконок, включая специфичные apple-touch-icon |
| Lighthouse (Chrome DevTools) | Аудит PWA с конкретными рекомендациями по улучшению |
Частые ошибки
- Попытка добавить сайт через Chrome или Firefox. На iOS полноценное добавление на главный экран с созданием отдельной иконки работает только через Safari.
- Отсутствие мета-тегов для iOS. Стандартный манифест
manifest.jsonне гарантирует, что сайт откроется как приложение — Apple частично его игнорирует. - Работа по HTTP. Без HTTPS Service Workers не регистрируются, и многие функции PWA блокируются.
- Игнорирование safe-area-inset. На современных iPhone интерфейс может перекрываться чёлкой или Dynamic Island.
FAQ
Можно ли добавить сайт на домашний экран без Safari? На iOS полноценное добавление на главный экран с созданием отдельной иконки работает только через Safari. Другие браузеры имеют ограниченный функционал для этой функции.
Почему добавленный сайт открывается как вкладка, а не как приложение? Сайт открывается как обычная вкладка в Safari, если он не оптимизирован как PWA. Для полноэкранного режима без адресной строки нужны специальные мета-теги и манифест.
Какой размер иконки нужен для apple-touch-icon? Рекомендуемый размер — 180×180 пикселей, формат PNG без прозрачности.
Что даёт display: standalone в манифесте? Этот параметр включает полноэкранный режим, в котором сайт открывается без адресной строки и элементов браузера, работая как отдельное приложение.