С развитием сайтов появилось понятие “веб-приложение” – это сайт, который по функционалу и внешнему виду напоминает полноценное приложение, а также может не использовать перезагрузку страницы для обновления контента (в случае с PWA), однако подключение к сети ему всё еще требуется (чаще всего). Такие сайты могут часто использоваться пользователями смартфонов, что порождает необходимость постоянно искать их в закладках Safari или Сhrome. Но это неудобно и, чтобы всегда иметь доступ к такому сайту, компании создали понятие Web App.
Web App – это веб-приложение, которое мы добавили на домашний экран смартфона планшета или ПК и оно открывается не в браузере, а в отдельном окне (которое, тем не менее, является браузером, просто без вкладок).
В общем виде это выглядит вот так:
На скриншоте с iPad видно, что сайт открыт в отдельном окне и ему не мешают верхняя и нижняя планки браузера.
Как же сделать такое со своим сайтом? Проще, чем вы думаете.
Это инструкция о создании Web App из сайта.
Можно создать и полноценное приложение из сайта с возможностью загрузки в AppStore и Google Play, подробнее об этом в другой статье
Создание Web App
Для самого начала нам потребуется манифест. Именно с его помощью операционная система считает, что наш сайт поддерживает такой режим отображения и использует настройки, которые мы укажем. Для самой базы достаточно будет всего двух строк:
{
"name": "MihailGok",
"display": "standalone"
}display – выбирает вид отображения сайта. standalone означает, что сайт будет открываться без браузера.name – подпись под иконкой по умолчанию, но пользователь всегда может ее поменять.
Сохраняем файл в корне директории сайта в файле manifest.json. А затем подключаем в head:
<link rel="manifest" href="manifest.json">Готово! Ваш сайт теперь может быть добавлен как отдельное приложение.
В качестве дополнительных параметров можно указать стартовую страницу, с помощью ключа start_url, а также “пространство” (ключ scope) – в нём все ссылки будут открываться как в приложении, а за ним – в браузере по умолчанию:
Добавление сайта на домашний экран
Проверить это можно с помощью нехитрых действий (предварительно лучше очистить кэш браузера или зайти в режиме “инкогнито”):
1) Заходим на сайт и нажимаем “Поделиться”
2) Выбираем “На экран домой”
3) Тут видим имя, которое можем поменять. Если всё устраивает нажимаем “Добавить”
В итоге получаем вот такую иконку на экране блокировки:
И сайт теперь открывается в отдельном окне (если всё верно сделано в разделе манифеста).
Связанные статьи: CSS-запросы к контейнерам | Тёмная тема Safari | Иконка на табло Яндекс-Браузера