Те, кто часто выходит в Интернет с мобильного телефона или планшета, как правило, знают о том, что ссылку на сайт можно вынести на главный экран устройства. Для этого достаточно при просмотре сайта в мобильном браузере нажать кнопку "Настройки" и выбрать пункт меню "Добавить на домашний экран".
Однако попробуйте добавить на домашний экран сайт http://lenta.ru... Вы заметите, что при запуске, во-первых, есть сплэш (splashscreen, заставка при запуске), а во-вторых, сайт открывается на весь экран, без панели управления встроенного браузера: то есть сайт выглядит как мобильное приложение (хотя это тот же сайт). Как они это сделали? Об этом вкратце расскажем ниже.
Если сайт имеет адаптивный дизайн и доступен по https, то вы можете легко превратить его в подобное (называется "прогрессивное") веб-приложение. Для этого необходимо сгенерировать иконки и manifest.json - файл настроек. Сделать это возможно с помощью бесплатного сервиса https://app-manifest.firebaseapp.com/. Тот архив, который выдаст сервис, необходимо положить в корневую директорию сайта. Далее, для корректной работы на iOS и старых мобильных браузерах имеет смысл подключить javascript-библиотеку к вашему сайту: https://github.com/boyofgreen/manUp.js.
Чтобы пользователь узнал, что ваш сайт может работать как progressive web application - его можно уведомить всплывающим окном. Оптимальным будет одноразовое оповещение при втором посещении сайта. В этом поможет другая javascript-библиотека: https://github.com/cubiq/add-to-homescreen.
Теоретически, такое приложение может даже работать в оффлайне (хотя и не будет иметь доступ к большинству функций устройства). Но это уже совсем другая история...