Прогрессивное веб-приложение (PWA): что это и как проверить

Прогрессивное веб-приложение (PWA) — это сайт на стандартных веб-технологиях, который ведёт себя как приложение под конкретную платформу: его можно установить, он открывается в отдельном окне со своей иконкой и может работать офлайн. MDN определяет PWA как «приложение, созданное на технологиях веб-платформы, но дающее такой же опыт, как приложение под конкретную платформу» (MDN, декабрь 2025). Основную работу делают два файла: манифест веб-приложения, который его описывает, и service worker для офлайн-режима.

Что такое прогрессивное веб-приложение

PWA сохраняет свойства сайта и добавляет часть возможностей нативного приложения. По данным MDN, от сайтов оно берёт единую кодовую базу для всех операционных систем и прямой доступ из веба. От приложений под конкретную платформу — установку (из магазина приложений или прямо из веба), запуск как отдельного приложения с иконкой, работу офлайн и в фоне, полноэкранный режим без интерфейса браузера и интеграцию с ОС, например приём данных из меню «Поделиться» (share targets).

PWA — обычный сайт плюс две технические возможности:

• манифест веб-приложения, JSON-файл, из которого браузер узнаёт название приложения, иконки и способ запуска;
• service worker, скрипт, который управляет страницами приложения и, как пишет MDN, может запрашивать ресурсы с сервера и добавлять их в локальный кэш.

Web.dev описывает ту же идею: PWA использует прогрессивное улучшение, чтобы работать надёжнее и теснее встраиваться в систему, и может быть установлено (web.dev, сентябрь 2024).

Что нужно для установки PWA

Устанавливаемость определяет браузер, и критерии у них разные. Для браузеров на Chromium (Chrome, Samsung Internet, Edge) MDN перечисляет такие требования (MDN, Making PWAs installable, октябрь 2026):

Прежде чем Chrome вызовет событие beforeinstallprompt, он ждёт признаков вовлечённости: пользователь должен хотя бы раз кликнуть или коснуться страницы и провести на ней не меньше 30 секунд (web.dev, сентябрь 2024).

Service worker в этом списке нет. MDN прямо пишет, что для установки он не нужен, хотя многие PWA используют его для офлайн-режима. Минимальный манифест, который соответствует таблице, выглядит так:

{
  "name": "My PWA",
  "short_name": "MyPWA",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    { "src": "/icons/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icons/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Подключите его на каждой странице через <link rel="manifest" href="/manifest.webmanifest">.

Как PWA работает офлайн

Офлайн-режим возможен благодаря service worker: он перехватывает сетевые запросы и отвечает из кэша. Зарегистрируйте его на странице, затем обработайте событие fetch в самом воркере. Подход cache-first из MDN в сокращённом виде:

// на странице
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js');
}

// service-worker.js
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => cached || fetch(event.request))
  );
});

Этот набросок отдаёт ответ из кэша и обращается к сети, если там пусто, но сам кэш не наполняет. В полном примере MDN есть шаг записи в кэш и резервная страница. MDN также отмечает, что при стратегии cache-first выше шанс получить устаревший ответ, а при network-first воркер обращается к кэшу, только когда устройство офлайн; лучшая стратегия зависит от приложения. Service workers входят в Baseline widely available (с октября 2020 года; первые версии в web-features 3.44.0: Chrome 45, Firefox 44 и Safari 11.1).

Чем отличаются iOS и Android

PWA устанавливаются и на Android, и на iOS, но способы и часть возможностей разные. По состоянию на октябрь 2026 года, по данным MDN, Apple и web-features:

Разработчику стоит знать три особенности iOS:

• beforeinstallprompt на iOS не поддерживается (MDN), поэтому собственную кнопку установки там не показать. Вместо неё опишите в интерфейсе шаги через меню «Поделиться»; web.dev замечает, что дизайнеры иногда добавляют для этого отдельные экраны.
• Начиная с iOS 26, «каждый сайт, добавленный на экран „Домой“, по умолчанию открывается как веб-приложение», а пользователь может отключить «Open as Web App», даже если у сайта есть манифест (блог WebKit, 9 июня 2025).
• Web Push на iOS и iPadOS доступен веб-приложениям с экрана «Домой» начиная с iOS 16.4. Сайт считается таким приложением, если в манифесте display равен standalone или fullscreen, а запрос разрешения должен идти от действия пользователя (блог WebKit, 16 февраля 2023). Web-features относит Push к Baseline newly available с марта 2023 года и к widely available с сентября 2025 года; первые версии — Safari 16 и Safari iOS 16.4.

Детали «Добавить на экран „Домой“» меняются с каждым релизом iOS, поэтому проверяйте ту версию, которую поддерживаете.

Примеры PWA

В руководстве web.dev по PWA перечислены компании, которые сообщают о результатах после запуска PWA; цифры принадлежат самим компаниям, web.dev их только собрал (сентябрь 2024, web.dev):

Это результаты, о которых компании сообщили для собственных продуктов.

PWA или нативное приложение

Практическое правило: выбирайте PWA, если важнее всего одна веб-кодовая база и распространение через веб, и нативное приложение, если нужны возможности платформы, которых нет в вебе. MDN называет распространение через магазины приложений тем, что PWA тоже умеет, так что варианты не исключают друг друга. Если рядом с сайтом вы выпускаете нативное приложение, ссылки могут открывать его напрямую; настройка описана в статье про universal links и Android App Links.

Как проверить PWA на телефоне

Проверяйте PWA в три прохода: DevTools для файлов, настоящий телефон для установки и экран размером с телефон для раскладки.

1. DevTools: в Chrome DevTools панель Application, раздел Manifest, показывает поля приложения и иконки, а раздел Installability описывает ошибку, если что-то не так. В панели Service Workers есть флажок Offline, который переводит DevTools в офлайн-режим (Chrome for Developers). Проверка PWA в Lighthouse объявлена устаревшей (страница обновлена в апреле 2024), поэтому пользуйтесь панелью Application.
2. Настоящий телефон: установите приложение из браузера, переведите телефон в режим полёта и откройте приложение по иконке. Сделайте это и на iOS, и на Android, потому что порядок установки и поведение push различаются.
3. Размеры телефонов: проверьте страницы на ширинах телефонов, как у любого мобильного сайта, по руководству как сделать сайт удобным на телефоне и чек-листу тестирования мобильного сайта; для iOS без устройства есть статья как проверить сайт на iPhone без iPhone.

Mobile View Extension перезагружает текущую вкладку с user agent, размером экрана и pixel ratio телефона, так что это быстрый способ увидеть страницы PWA в телефонных размерах. Установить PWA, запустить service workers и автономный режим так, как это делает телефон, расширение не может: оно работает на движке десктопного Chrome, ввод идёт мышью, а поведения экрана «Домой» нет. Установку и офлайн проверяйте на телефоне. Скорость разобрана отдельно в руководстве по тесту скорости мобильной страницы.

Частые вопросы

Что такое PWA простыми словами?

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

Какие требования у PWA?

Для установки в браузерах на Chromium: HTTPS, манифест с названием, иконками 192 px и 512 px, start_url и display, а prefer_related_applications не должно быть равно true. Для установки service worker не нужен, но для офлайн-режима он необходим.

Работают ли PWA на iPhone?

Да. С iOS 16.4 их можно установить через меню «Поделиться» в Safari, Chrome, Edge, Firefox и Orion, а веб-приложения с экрана «Домой» получают Web Push. beforeinstallprompt на iOS нет, поэтому пользователи устанавливают приложение через меню «Поделиться».

Может ли PWA работать офлайн?

Да, если service worker кэширует нужные страницы и файлы. Без service worker приложение всё равно можно установить в браузерах на Chromium, но собственной обработки офлайн-режима у него не будет.