Как из сайта сделать приложение

Коротко. Самый простой способ — сделать сайт веб-приложением (PWA). Нужны https и файл-манифест с названием и иконками 192 и 512 пикселей. Тогда Chrome и Edge на Android и компьютере предложат установить сайт как приложение: со своей иконкой и в отдельном окне без адресной строки. На iPhone такой сайт добавляют на экран «Домой» через «Поделиться». Для Google Play и App Store PWA можно упаковать, например, в PWABuilder.

Три способа

Способ	Что получится	Сложность
Ярлык сайта на главном экране	Значок, который открывает сайт в браузере	Ничего не нужно, делает сам посетитель
Веб-приложение (PWA)	Приложение со своей иконкой, открывается в отдельном окне	Добавить манифест и иконки, сайт на https
Приложение в магазине	Приложение в Google Play или App Store	Упаковать PWA или заказать разработку, пройти проверку магазина

Для большинства сайтов хватает PWA: это бесплатно и делается за вечер.

Что такое PWA

PWA (прогрессивное веб-приложение) — сайт, который браузер умеет установить на устройство как приложение. После установки у него своя иконка рядом с обычными приложениями, и открывается он отдельным окном. Если браузер установку не поддерживает, человек просто пользуется сайтом как обычно.

Что нужно для PWA

Требования браузеров на Chromium (Chrome, Edge, Samsung Internet) по документации MDN:

1. Https. Без защищённого соединения установка не появится: SSL-сертификат для сайта.
2. Файл-манифест — JSON-файл с описанием приложения. В нём обязательны:
   • name или short_name — название;
   • icons — иконки 192 и 512 пикселей;
   • start_url — с какой страницы открывать;
   • display — как показывать, например standalone, то есть без адресной строки.
3. Подключение манифеста на каждой странице в <head>.

Пример манифеста, файл manifest.webmanifest в корне сайта:

{
  "name": "Мастерская Ивана",
  "short_name": "Мастерская",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f6b4a",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

И строка в <head> каждой страницы:

<link rel="manifest" href="/manifest.webmanifest">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Вторая строка — иконка для iPhone. Если хостинг отдаёт манифест с неправильным типом, добавьте в .htaccess строку AddType application/manifest+json .webmanifest.

Сервис-воркер (скрипт для работы без интернета) для установки не обязателен, но многие PWA его добавляют, чтобы открываться и без сети.

Как установить веб-приложение

• Android, Chrome: браузер может сам предложить установку. Если нет: значок с тремя точками → «Установить и создать ярлык» → «Установить». Chrome на Android обычно создаёт настоящий пакет приложения, и оно появляется в списке приложений.
• Компьютер, Chrome или Edge (Windows, macOS, Linux): значок установки в адресной строке.
• iPhone и iPad, Safari: браузер установку не предлагает. Нажмите «…» → «Поделиться» → «На экран «Домой»», включите «Открыть как веб-приложение» и нажмите «Добавить».

Сайт на конструкторе или WordPress

• WordPress: манифест и иконки добавляют плагином для PWA или вручную в тему.
• Конструкторы: зависит от конструктора. Если нельзя добавить свой файл в корень сайта, PWA не сделать, остаётся иконка на главном экране.
• Свой HTML-сайт: два файла и две строки в <head>, как в примере выше: как сделать сайт на HTML.

Когда нужно настоящее приложение

PWA не заменит приложение, если нужны глубокие функции телефона, работа в фоне или главная цель — присутствие в магазине приложений. Тогда либо упаковка PWA для магазина (PWABuilder поддерживает Google Play, Microsoft Store и App Store), либо разработка. Учтите, что у магазинов свои правила, аккаунт разработчика и проверка.

Наш опыт

Пока писали эту статью, мы сделали HostAtlas веб-приложением: добавили manifest.webmanifest с названием и иконками 192 и 512 пикселей, подключили его на всех страницах и прописали тип файла в .htaccess. Https и иконка для iPhone у нас уже были. На Android откройте hostatlas.ru в Chrome: меню → «Установить и создать ярлык» → «Установить». На iPhone в Safari: «Поделиться» → «На экран «Домой»» → «Добавить».

Читайте также

• Как сделать сайт на HTML с нуля
• Как создать сайт самому
• Как сделать ярлык сайта на рабочем столе и телефоне

Источники

• MDN: Making PWAs installable — требования к манифесту, https, PWABuilder; проверено 22.10.2026
• web.dev: установка PWA — установка на Android, iOS и компьютерах; проверено 22.10.2026
• Справка Chrome: веб-приложения и Руководство iPhone: значок сайта на экране «Домой» — пункты меню; проверено 23.10.2026