BITSPARK / Статьи / Дизайн и элементы сайта

PWA: что это такое и что проверить заказчику сайта

Коротко: PWA (progressive web app, прогрессивное веб-приложение) - по определению MDN, приложение на веб-технологиях, которое для пользователя выглядит как приложение под конкретную платформу. По технологии, пишет MDN, PWA остаётся сайтом. Чтобы браузер предложил его установить, нужны манифест с обязательными полями и HTTPS. Service worker для установки не обязателен. Поддержка установки зависит от браузера и системы: таблица на странице MDN «Making PWAs installable» изменена 07.09.2026.

PWA что это такое - вопрос, который возникает, когда подрядчик предлагает сделать сайт устанавливаемым как приложение. Ниже собраны определения MDN, web.dev и документации Microsoft Edge, сравнение сайта, PWA и приложения под платформу по признакам MDN и список того, что должно быть у сайта для установки. Дальше идут таблица поддержки по браузерам, описание установки на iPhone и в Chrome, вопросы подрядчику и пункты приёмки.

Даты изменения страниц указаны так, как они даны на самих страницах; состояние источников - на 06.10.2026. Примеры вымышленные: магазин настольных игр с сайтом example.ru. В статье нет руководства для разработчика и нет инструкции, как поставить чужое приложение.

Что такое PWA по определениям MDN, web.dev и Microsoft Edge?

Коротко: MDN определяет PWA как приложение на веб-технологиях с пользовательским опытом, похожим на опыт приложения под платформу. Определение web.dev добавляет единую кодовую базу, то есть один набор исходного кода для любых устройств. Документация Microsoft Edge добавляет к ней возможность установки и запуска на всех устройствах.

MDN, справочник по веб-технологиям, начинает страницу об этом определением.

«A progressive web app (PWA) is an app that's built using web platform technologies, but that provides a user experience like that of a platform-specific app.»

Перевод: «Прогрессивное веб-приложение (PWA) - это приложение, которое создано на технологиях веб-платформы, но даёт пользователю опыт, похожий на опыт приложения под конкретную платформу». Приложением под платформу (platform-specific app) MDN называет программу, написанную под конкретную операционную систему или класс устройств, например iOS или Android.

Определение web.dev, сайта Google для веб-разработчиков, говорит о единой кодовой базе и о любом устройстве.

«Progressive Web Apps (PWA) are web apps built and enhanced with modern APIs to provide enhanced capabilities while still reaching any web user on any device with a single codebase.»

Перевод: «Прогрессивные веб-приложения (PWA) - это веб-приложения, созданные и улучшенные с помощью современных API, чтобы давать расширенные возможности и при этом по-прежнему охватывать любого пользователя веба на любом устройстве из одной кодовой базы». API здесь - готовые функции, которые браузер предоставляет странице. На той же странице web.dev называет три опоры проектирования: PWA должно быть capable (с широкими возможностями), reliable (надёжным) и installable (устанавливаемым).

Документация Microsoft Edge формулирует так.

«Progressive Web Apps (PWAs) are applications that you build by using web technologies, and that can be installed and can run on all devices, from one codebase.»

Перевод: «Progressive Web Apps (PWA) - это приложения, которые вы создаёте с помощью веб-технологий и которые можно установить и запускать на всех устройствах из одной кодовой базы».

Есть и русский текст. Глоссарий MDN (страница изменена 12.11.2023) начинается словами «Прогрессивные веб-приложения - это термин, используемый для описания современного состояния разработки веб-приложений» и называет среди функций «возможность установки, работу в автономном режиме». Автономный режим - работа без подключения к интернету.

Чем PWA отличается от сайта и от приложения под платформу?

Коротко: по MDN, PWA соединяет выгоды сайта (одна кодовая база, открытие по ссылке) и выгоды приложения (значок на устройстве, отдельное окно, работа без сети, уведомления). По технологии PWA остаётся сайтом, которому нужен движок браузера. Сравнение идёт по пяти признакам: под что разрабатывают, как попадает к пользователю, значок, работа без сети, вид на экране.

Страница MDN «What is a progressive web app?» делит мир на три части: приложения под платформу, традиционные сайты и PWA. Ниже её признаки сведены в таблицу. Каждая ячейка переписана с этой страницы. Там, где MDN пишет о сайте со словом «Typically», это отмечено в ячейке.

ПризнакПриложение под платформуТрадиционный сайтPWA
Под что разрабатываютПод конкретную операционную систему и/или класс устройствОдин код работает на разных системах и классах устройств («single codebase»)Один код для разных систем и классов устройств («single codebase»)
Как попадает к пользователюРаспространяется через магазин приложенийОткрывается по адресу (URL); регистрироваться в магазине не нужно; сайты индексируют поисковые системыДоступно напрямую из интернета; может распространяться и через магазины приложений
Значок на устройствеПолучает собственный значок на устройствеMDN со словом «Typically»: присутствия на устройстве нет, когда пользователь сайтом не пользуетсяПосле установки получает значок рядом с приложениями под платформу
Работа без сети и в фонеМожет работать, когда пользователь с ним не взаимодействует и когда нет сетиMDN со словом «Typically»: сильно зависит от сетиМожет работать без сети, обновлять данные в фоне, принимать push-сообщения от сервера
Как выглядит на экранеСобственный интерфейсОкно браузера: рамка, кнопки «назад» и «вперёд», заголовок страницыПосле установки запускается как отдельное приложение и может занимать весь экран без интерфейса браузера

Push-сообщение - сообщение, которое сервер сам отправляет на устройство. Слово «может» в колонке PWA повторяет «can» со страницы MDN.

Как PWA связан с обычным сайтом, MDN говорит прямо.

«(...) they are, as a matter of technology, still websites. This means they need a browser engine, like the ones in Chrome or Firefox, to manage and run them.»

Перевод: «(...) по технологии они по-прежнему сайты. Это значит, что им нужен движок браузера, как в Chrome или Firefox, чтобы управлять ими и запускать их». Поэтому вопросы о любом сайте остаются в силе: адрес, хостинг, договор, проверка на экранах и в браузерах. О разнице между статическим и динамическим сайтом написана отдельная статья раздела: Статический сайт: что это и чем он отличается от динамического.

Что должно быть у сайта, чтобы браузер предложил его установить?

Коротко: MDN называет минимум: манифест с достаточными сведениями для установки и адрес по HTTPS. Манифест подключают на каждой странице сайта. Service worker для установки не нужен: MDN связывает его с работой без сети. Для Chrome web.dev добавляет условие о действиях посетителя на странице.

Манифест. Это файл в формате JSON, то есть в текстовом виде, который сообщает браузеру, как PWA должно выглядеть и вести себя на устройстве. Определение дано на странице MDN «Making PWAs installable» (изменена 07.09.2026).

«A web app manifest is a JSON file that tells the browser how the PWA should appear and behave on the device.»

Перевод: «Манифест веб-приложения - это файл JSON, который сообщает браузеру, как PWA должно выглядеть и вести себя на устройстве». Файл подключают элементом link с атрибутом rel="manifest" в HTML страницы.

«If the PWA has more than one page, every page must reference the manifest in this way.»

Перевод: «Если у PWA больше одной страницы, каждая страница должна ссылаться на манифест тем же способом».

Для браузеров на движке Chromium, к которым MDN относит Google Chrome, Samsung Internet и Microsoft Edge, страница называет обязательные поля манифеста:

  • name или short_name - название приложения;
  • icons - в списке должны быть значок 192 пикселя и значок 512 пикселей;
  • start_url - адрес, с которого запускается приложение;
  • display и/или display_override - как приложение показывается при запуске;
  • prefer_related_applications - должно быть false или отсутствовать.

Короткий манифест вымышленного магазина по этому списку выглядит так. Значки и название придуманы для примера.

{
  "name": "Магазин настольных игр Example",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    { "src": "/icons/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icons/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Значение standalone, по MDN, означает, что PWA должно выглядеть как приложение под платформу, без элементов интерфейса браузера. Значение browser открывает PWA в новой вкладке или окне, как обычный сайт.

HTTPS. Это защищённый способ передачи сайта: адрес начинается с https://. MDN на той же странице пишет, что для установки PWA должно отдаваться по протоколу https; для разработки на своём компьютере допустимы localhost и 127.0.0.1. Где и на каком адресе работает сайт, разобрано в статье Домен и хостинг: в чём разница и на кого оформлен домен.

Service worker. Это скрипт, который браузер может запускать в фоне, когда он нужен, например при получении push-сообщения. Так его описывает страница MDN «What is a progressive web app?». Название оставлено английским, как в документации. Для установки он не нужен.

«Although a PWA does not need a service worker to be installed (...)»

Перевод: «Хотя PWA не нужен service worker, чтобы его можно было установить (...)». В списке технических признаков той же страницы service worker помечен словом «Optionally» («необязательно») и описан как средство «to provide an offline experience» («чтобы обеспечить работу без сети»). Из этого следует: работу без интернета стоит заказывать и проверять отдельно.

Условия Chrome. Страница web.dev «What does it take to be installable?» (обновлена 19.09.2024) перечисляет, что нужно, чтобы Chrome показал предложение установить. Условия такие: приложение ещё не установлено; посетитель хотя бы раз щёлкнул или коснулся страницы; сайт отдаётся по HTTPS; есть манифест с теми же полями, причём для display страница называет значения fullscreen, standalone, minimal-ui или window-controls-overlay. Про время страница пишет так.

«The user needs to have spent at least 30 seconds viewing the page, at any time.»

Перевод: «Пользователь должен провести на странице не менее 30 секунд, в любой момент». На ней же есть примечание: «Users can install your web app even if it doesn't meet the PWA installability criteria listed below.» Перевод: «Пользователи могут установить ваше веб-приложение, даже если оно не отвечает перечисленным ниже критериям установки PWA».

MDN пишет, что Chrome на компьютере и на Android, Safari на компьютере и Edge на компьютере позволяют установить любой сайт как приложение, с манифестом или без него. Выгоду манифеста MDN формулирует так.

«The benefit of using a manifest file is that the browser will actively promote the site for installation when it is visited, and developers can customize installation behavior.»

Перевод: «Выгода манифеста в том, что браузер будет активно предлагать установить сайт, когда его открывают, а разработчики могут настроить поведение установки».

Где PWA можно установить, а где нельзя?

Коротко: страница MDN «Making PWAs installable» (изменена 07.09.2026) делит поддержку по компьютеру, Android и iOS. На компьютере установку по манифесту поддерживают браузеры Chromium, Firefox её не поддерживает. На iPhone с iOS 16.4 установка идёт через меню «Поделиться» в нескольких браузерах.

Таблица ниже переписана с раздела «Browser support» этой страницы. Версии систем и браузеров даны как на странице, на дату её изменения.

ГдеЧто пишет MDN
Компьютер, браузеры ChromiumПоддерживают установку PWA с манифестом на всех поддерживаемых настольных операционных системах
Компьютер, Safari«Add to Dock» (пункт меню File > Add to Dock...) в macOS Sonoma (Safari 17) и новее, для любого веб-приложения, с манифестом или без
Компьютер, FirefoxУстановку PWA с помощью файла манифеста не поддерживает
Android, Chrome на устройствах с Google Mobile Services и Samsung Internet на устройствах SamsungУстанавливают PWA как WebAPK: у приложения есть запись в списке приложений и в переключателе, а также в системных настройках
Android, Firefox, Edge, Opera и другие браузеры, включая Chrome на устройствах без Google Mobile ServicesДобавляют на главный экран ярлык с пометкой браузера, который открывает сайт в браузере
iOS 16.3 и раньшеУстановить PWA можно только в Safari
iOS 16.4 и позжеУстановить PWA можно из меню «Поделиться» в Safari, Chrome, Edge, Firefox и Orion

Google Mobile Services - набор сервисов Google на Android-устройстве. WebAPK - так на странице MDN названа установка на Android, при которой у сайта появляется настоящая запись в списке приложений.

MDN добавляет, что внешний вид установки зависит от браузера и платформы. Например, браузер может показать значок «Install» в адресной строке; после нажатия на него появится запрос, и приложение установится, если пользователь согласится. Свою кнопку «Установить» на странице можно сделать через событие beforeinstallprompt, но для iOS MDN пишет: «This is not supported on iOS.» Перевод: «На iOS это не поддерживается».

Как выбрать браузеры, в которых сайт должен работать полностью, разобрано в статье Кроссбраузерность сайта: что это и как проверить до приёмки.

Как установка выглядит на iPhone и в Chrome?

Коротко: на iPhone справка Apple описывает путь «Поделиться», затем «На экран "Домой"» с переключателем «Открыть как веб‑приложение». В Chrome на компьютере справка Google называет пункт меню «Установить страницу как приложение» и значок «Установить» справа от адресной строки на некоторых сайтах.

iPhone. Справка Apple (руководство пользователя iPhone, версия iOS 27) начинается словами: «Вы можете открыть и использовать любой сайт как приложение.» Шаги там такие:

  1. Откройте Safari на iPhone и перейдите на нужный сайт.
  2. Коснитесь кнопки, показанной в справке значком, затем «Поделиться». Если выбран вид вкладок снизу или сверху, справка показывает другую кнопку.
  3. Прокрутите список вниз и коснитесь «На экран "Домой"». Если пункта нет, справка предлагает добавить его через «Редактировать действия».
  4. Включите параметр «Открыть как веб‑приложение».
  5. Коснитесь «Добавить».

Источник - Преобразование сайта в приложение в Safari на iPhone - Служба поддержки Apple (RU). Итог по справке: на экране «Домой» появится значок, и если коснуться его, «сайт откроется точно так же, как любое другое приложение».

Блог WebKit, движка Safari, описывает тот же вопрос со стороны разработчика. Запись от 16.02.2023 посвящена бета-версии iOS и iPadOS 16.4.

«If they do, that site becomes a Home Screen web app.»

Перевод: «Если они это сделают, сайт становится веб-приложением на экране "Домой"». «Они» - веб-разработчики, которые, по записи, создают файл манифеста с полем display со значением standalone или fullscreen и отдают его вместе с сайтом. Тогда значок открывает сайт как отдельное приложение. Если нет манифеста, настроенного на поведение веб-приложения, и нет метатега, который помечает сайт как веб-приложение, сайт, по записи, сохраняется как закладка на экране «Домой».

Справка Apple для iOS 27 и запись 2023 года описывают установку по-разному: проверяйте результат на конкретном iPhone.

Страница web.dev «Installation» (обновлена 20.09.2024) пишет: «A browser prompt to install your PWA doesn't exist On iOS and iPadOS.» Перевод: «На iOS и iPadOS предложения браузера установить ваше PWA нет». На тех же системах, по странице, поддерживается только режим показа standalone.

Chrome на компьютере. Справка Google начинается так: «Веб-приложения позволяют использовать сайты как приложения.» Чтобы установить сайт, нужно открыть его в Chrome, нажать справа вверху на значок с тремя точками, затем «Транслировать, сохранить, поделиться», затем «Установить страницу как приложение». Дальше справка добавляет: «На некоторых сайтах нужно нажать на значок "Установить" справа от адресной строки.» Источник - Как использовать веб-приложения - Компьютер - Cправка - Google Chrome. Эта справка предупреждает: «Для полноценной работы некоторых веб-приложений может требоваться подключение к интернету.»

Что с уведомлениями на iPhone?

Коротко: запись блога WebKit от 16.02.2023 описывает Web Push для веб-приложений на экране «Домой» в iOS и iPadOS 16.4. Разрешение на уведомления можно запрашивать только в ответ на действие пользователя. Справка Apple для iOS 27 пишет, что уведомления от веб-приложений можно получать.

Web Push - это уведомления от сайта. По записи WebKit, они работают через Push API, Notifications API и service workers вместе. Запрос разрешения ограничен.

«A web app that has been added to the Home Screen can request permission to receive push notifications as long as that request is in response to direct user interaction (...)»

Перевод: «Веб-приложение, добавленное на экран "Домой", может запросить разрешение на push-уведомления, если этот запрос сделан в ответ на прямое действие пользователя (...)». В записи пример такого действия - нажатие на кнопку подписки внутри приложения. После разрешения пользователь управляет уведомлениями отдельно для каждого веб-приложения в настройках уведомлений. В справке Apple сказано: «Вы можете получать уведомления от веб-приложений и закрывать веб-приложения, как и обычные приложения.»

Запись описывает случай сайта, добавленного на экран «Домой». Нужны ли уведомления вашему сайту, зависит от задачи. Проверку на текущей версии iOS стоит записать в приёмку.

Можно ли выложить PWA в магазин приложений?

Коротко: MDN пишет, что PWA, отвечающее условиям установки, можно упаковать и распространять через магазины приложений. Страница называет Google Play Store и Microsoft Store и инструмент PWABuilder. Процесс у каждого магазина свой, а условия самих магазинов в статье не разбираются. Вопрос о магазине стоит задавать подрядчику отдельно.

«If your app meets the installability prerequisites, you can package it and distribute it through app stores.»

Перевод: «Если ваше приложение отвечает предварительным условиям установки, его можно упаковать и распространять через магазины приложений». Процесс, пишет MDN, у каждого магазина свой. Страница даёт отдельные руководства для Google Play Store и Microsoft Store (в её списке есть и третий магазин). Инструмент PWABuilder, по MDN, упрощает упаковку и публикацию и поддерживает, среди прочих, iOS App Store.

Примет ли магазин конкретное приложение и на каких условиях, определяют условия самого магазина: их читают отдельно. Из страниц MDN это не следует. Если магазин нужен вам, это вопрос подрядчику, и в договоре стоит записать, кто за публикацию отвечает.

Нужна ли PWA вашему сайту?

Коротко: страницы, на которые опирается статья, не оценивают пользу PWA для вашего бизнеса, и статья её не обещает. Решение строится по функциям: нужен ли значок и отдельное окно, работа без сети, уведомления или магазин. Для каждой функции источники называют своё условие.

MDN описывает установку и работу без сети как разные возможности: для установки service worker не нужен. Поэтому подрядчика можно спрашивать о каждой функции отдельно и заказывать только нужные.

Что нужноЧто называют источникиУсловие
Значок и запуск в отдельном окнеМанифест с обязательными полями и HTTPS (MDN)Работает там, где браузер поддерживает установку: см. таблицу выше
Работа без сетиService worker (MDN); своя страница для случая, когда сети нет (MDN, «Best practices for PWAs», изменена 30.06.2025)Работу без сети нужно заказывать и проверять отдельно; справка Chrome предупреждает, что некоторым веб-приложениям нужен интернет
УведомленияPush API, Notifications API и service worker (WebKit)На iPhone запись WebKit описывает сайты на экране «Домой» и запрос по действию пользователя
Публикация в магазинеУпаковка PWA (MDN)Условия магазина

Для браузеров без установки у MDN есть такая фраза: «if a user encounters your PWA on the web, using a browser that can't install it, they can use it just like a normal website». Перевод: «если пользователь встречает ваше PWA в интернете в браузере, который не умеет его устанавливать, он может пользоваться им как обычным сайтом». Страница - «Making PWAs installable», изменена 07.09.2026.

Что спросить у подрядчика о PWA?

Коротко: девять вопросов, и каждый опирается на один из разделов статьи. Первый вопрос: что именно подрядчик называет PWA - установку, работу без сети, уведомления или магазин. Остальные уточняют манифест, HTTPS, service worker, браузеры, iPhone и договор. Последний вопрос - где всё это записано: в техническом задании и акте приёмки.

На главной странице BITSPARK шаг «Разработка» описан так: «Верстаем, программируем и подключаем сервисы. Технологии выбираем под задачу.» Услуги студии, цены и контакты - там же: bitspark.ru. Вопросы ниже составлены для любого исполнителя.

  1. Что именно вам предлагают под названием PWA: установку на устройство, работу без сети, уведомления, публикацию в магазине? По MDN это разные возможности.
  2. Какие поля стоят в манифесте: name или short_name, значки 192 и 512 пикселей, start_url, display, prefer_related_applications? Кто рисует значки? Подключён ли манифест на каждой странице сайта?
  3. Все ли страницы отдаются по HTTPS?
  4. Есть ли service worker, и если есть, что именно работает без сети? Предусмотрена ли своя страница для случая, когда сети нет? MDN в разделе «Best practices for PWAs» пишет об этом так. «At the very least, your PWA should provide a custom offline page that informs the user that they are offline instead of showing the generic browser error page». Перевод: «Как минимум, ваше PWA должно показывать свою офлайн-страницу, которая сообщает пользователю, что он не в сети, вместо общей страницы ошибки браузера».
  5. В каких браузерах и системах будет проверена установка? Таблица MDN показывает случаи, где установки по манифесту нет, например Firefox на компьютере.
  6. Нужна ли своя кнопка «Установить»? На iOS она не поддерживается (MDN), и там установка идёт вручную.
  7. Нужны ли уведомления? Если да, как они будут запрашиваться и как проверяются на iPhone?
  8. Нужна ли публикация в магазине, кто её делает и условия какого магазина прочитаны?
  9. Где всё это записано: в техническом задании и акте приёмки? Как в договоре на разработку сайта описывается результат работы, разобрано в статье Договор на разработку сайта: что говорит ГК и что проверить до подписи.

Что проверить при приёмке PWA?

Коротко: девять проверок на example.ru: установка в Chrome, запуск, Android, iPhone, Firefox, работа без сети, уведомления, экраны и запись в акт. Перечень составлен по разделам статьи, и каждая проверка нужна только тогда, когда функция заказана. В акт записывают браузеры, версии систем и дату проверки.

  1. Откройте example.ru в Chrome на компьютере. В меню под значком с тремя точками, в разделе «Транслировать, сохранить, поделиться», должен быть пункт «Установить страницу как приложение», а на некоторых сайтах справа от адресной строки появляется значок «Установить» (справка Google Chrome). Если предложения нет, вспомните условия web.dev: щелчок по странице и не менее 30 секунд на ней.
  2. Установите и запустите. Название и значок в запросе берутся из полей name и icons манифеста (MDN). Окно должно открыться так, как задано в display: при standalone - без элементов интерфейса браузера.
  3. На Android запишите, в каком браузере проверяли и что получилось: запись в списке приложений (WebAPK) или ярлык с пометкой браузера. Результат зависит от браузера и устройства, это видно по таблице MDN.
  4. На iPhone пройдите путь из справки Apple: «Поделиться», «На экран "Домой"», параметр «Открыть как веб‑приложение», «Добавить». Проверьте, что значок появился и сайт открывается как приложение.
  5. Firefox на компьютере: по таблице MDN он не поддерживает установку по манифесту. Если предложения установки там нет, сверьте это с таблицей до того, как записывать дефект.
  6. Если работу без сети заказывали, отключите интернет и откройте установленное приложение. По MDN как минимум нужна своя офлайн-страница, которая сообщает, что пользователь не в сети.
  7. Если заказывали уведомления, проверьте, что разрешение запрашивается после действия пользователя, например нажатия на кнопку подписки. На iPhone проверяйте на сайте, добавленном на экран «Домой».
  8. Откройте сайт на телефоне и на компьютере. MDN в «Best practices for PWAs» пишет: «Responsive design is crucial for PWAs to ensure the content is accessible on any screen size.» Перевод: «Адаптивный дизайн критически важен для PWA, чтобы содержимое было доступно на экране любого размера». Как проверять адаптив, разобрано в статье Адаптивный сайт: что это и как проверить адаптив до приёмки.
  9. Запишите в акт браузеры и версии систем, на которых проверяли, и дату проверки. Таблица поддержки на странице MDN изменена 07.09.2026, и перед следующей правкой сайта её стоит открыть заново.

Источники

Состояние источников - на 06.10.2026. Даты изменения - со страниц.

Обсудить проект в Telegram: t.me/billioniks

Читайте по теме

Все статьи раздела «Дизайн и элементы сайта» →