Если коротко: PWA — это обычный сайт, который умеет устанавливаться на экран, работать без сети и открываться как отдельное приложение. Распознать его можно за пару минут по трём признакам: предложению установки, файлу манифеста в коде и поведению страницы без интернета. Ниже — чек-лист, категории примеров без брендов, методика разбора чужого PWA и список того, что копировать нельзя.
Признаки PWA у открытого сайта
Один признак ничего не доказывает. Кнопка установки может появиться у сайта с минимальным набором файлов, а офлайн-режим бывает у обычной страницы с кэшем браузера. Поэтому смотрим на связку признаков.
Кнопка или предложение установки
В десктопном браузере на движке Chromium у подходящего сайта в адресной строке появляется значок установки. В мобильном браузере то же доступно через меню: «Установить приложение» или «Добавить на главный экран». Иногда сайт показывает собственный баннер. Если пункта нет, это ещё не приговор: причина может быть в браузере, в уже установленной версии или в ошибке конфигурации. Подробнее — в разборе диагностики установки PWA.
Манифест в коде
В исходном коде страницы ищем тег link с атрибутом rel="manifest". Он ведёт на файл с названием, иконками, стартовым адресом и режимом отображения. Если режим скрывает адресную строку, сайт задуман как приложение. Как устроен файл, объясняет материал про манифест PWA и сервис-воркер.
Service worker
Это фоновый скрипт, который управляет кэшем и запросами. В инструментах разработчика открываем вкладку «Приложение» (Application), раздел сервис-воркеров. Зарегистрированный скрипт со статусом «активен» означает, что основа PWA на месте.
Работа без сети
Во вкладке «Сеть» включаем офлайн-режим и перезагружаем страницу. Возможны три исхода: открывается полноценная страница, открывается заглушка с понятным сообщением или браузер показывает ошибку. Первые два говорят о рабочем service worker, третий — об отсутствии офлайн-логики.
Запуск без адресной строки
После установки открываем иконку с экрана. Если окно живёт отдельно от браузера, без адресной строки и вкладок, манифест настроен на формат приложения.
Сводная таблица
| Признак | Где смотреть | Что значит |
|---|---|---|
| Значок или пункт установки | Адресная строка, меню браузера | Браузер считает сайт устанавливаемым |
| Ссылка на манифест | Исходный код страницы | Есть описание приложения |
| Service worker | Вкладка «Приложение» | Есть фоновый скрипт и кэш |
| Офлайн-открытие | Вкладка «Сеть», режим офлайн | Кэш реально работает |
| Окно без адресной строки | После установки | Режим приложения включён |
Если совпали три пункта и больше, перед вами, скорее всего, полноценное PWA.
Категории примеров без брендов
Названий не даём: они быстро устаревают, а проверить каждое мы не можем. Типовые категории узнаются легко.
- Медиа и новости: быстрые ленты, сохранённые материалы для чтения без сети, уведомления о свежих публикациях.
- Магазины и сервисы заказа: каталог, корзина, статус заказа в уведомлениях. PWA заменяет тяжёлое приложение лёгкой версией.
- Инструменты и трекеры: заметки, списки задач, калькуляторы, таймеры. Лучше всего показывают офлайн-режим, потому что не требуют постоянного сервера.
- Соцсети и мессенджеры: облегчённые версии для слабых устройств и медленной сети.
- Витрины и страницы под трафик: в арбитраже PWA используют как оболочку: пользователь ставит иконку и возвращается по ней или по уведомлению. Результат зависит от оффера, источника и качества трафика, обещаний тут быть не может. Как это выглядит в нише, смотрите в материалах про PWA под гемблинг и беттинг и PWA под нутру и товарку.
Как разобрать чужое PWA для идей
- Открываем манифест: название, короткое название, иконки, цвет темы, стартовый адрес.
- Смотрим иконки и название: как они выглядят на экране телефона и читаются ли в малом размере.
- Изучаем стратегию кэширования: что сохраняется сразу, что подгружается позже.
- Проверяем офлайн-страницу: что видит пользователь без сети.
- Фиксируем момент запроса на уведомления: сразу при входе или после действия.
В заметках записываем, когда показывается предложение установки, какими словами оно подано, как сайт возвращает пользователя и что происходит после отказа. Эти наблюдения ценнее скриншотов.
Хватает встроенных инструментов разработчика и аудита Lighthouse: он показывает, какие требования PWA выполнены. Оценки меняются от версии к версии, поэтому смотрим на список замечаний, а не на итоговый балл.
Чего копировать нельзя
- Чужие тексты, иконки, названия и графику. Это авторские права и прямой путь к жалобам.
- Код и ресурсы один в один. У скриптов есть лицензии, а в манифесте и путях остаются следы, по которым копию легко найти.
- Обманные механики. Имитация системных окон, ложные уведомления и маскировка под чужой бренд нарушают правила площадок и ведут к блокировкам.
- Агрессивный запрос уведомлений. Просьба разрешить пуши в первую секунду снижает доверие и часто заканчивается отказом. О рабочей логике читайте в материале про web push уведомления.
Частые ошибки
- Считать PWA любой сайт с кнопкой «Добавить на главный экран». Без манифеста и service worker это лишь закладка.
- Проверять только в одном браузере. Установка в разных браузерах и на iPhone ведёт себя по-разному, см. PWA на iPhone.
- Судить по итоговому баллу аудита, а не по реальному поведению без сети.
- Копировать структуру вместе с контентом, а не идею механики.
Вопрос–ответ
Как понять, что это PWA, а не обычный сайт? Проверьте три вещи: есть ли ссылка на манифест в коде, зарегистрирован ли service worker и открывается ли страница без сети. Если все три на месте, это PWA.
Может ли PWA работать без интернета полностью? Только в части, сохранённой заранее. Данные, приходящие с сервера в реальном времени, без сети недоступны, поэтому хорошие PWA показывают понятную офлайн-страницу.
Чем PWA отличается от обычного сайта? Установкой на экран, фоновым скриптом, офлайн-режимом и запуском в отдельном окне. Подробности — в статье чем PWA отличается от сайта.
Нужно ли PWA размещаться в сторе? Не обязательно: установка идёт прямо из браузера. Нюансы описаны в ответе на вопрос нужен ли стор для PWA.
Можно ли использовать чужое PWA как шаблон? Брать можно идеи: логику показа установки, структуру экранов, подход к кэшу. Тексты, графику и код нужно делать свои.
Проверено: 30.10.2026. Правила сторов и возможности платформ описаны на дату проверки; точные формулировки смотрите в официальной справке Apple, Google и MDN. Нашли неточность — напишите на redakciya@pwa-arbitrazh.com.