PWA-приложения: что это и как работают

У человека на телефоне обычно установлено несколько десятков приложений, но регулярно он открывает пять-шесть из них — остальные просто занимают память. Разработчики давно ищут способ обойти этот барьер: достучаться до пользователя, не заставляя его тратить мегабайты и терпеть загрузку из стора. Один из таких способов — PWA, прогрессивное веб-приложение. Ниже — подробно о том, что это за формат, какая технология за ним стоит, как самому поставить любой сайт на экран телефона и что требуется, чтобы превратить в PWA собственный проект.

Что такое PWA-приложение простыми словами

PWA расшифровывается как Progressive Web App (или Progressive Web Application). По сути это обычный сайт, которому добавили набор функций из мира мобильных приложений: 

• значок на рабочем столе, 

• запуск без браузерной строки, 

• работу без сети и уведомления. 

Формально пользователь по-прежнему находится на веб-странице, но выглядит и ощущается это как отдельная программа.

Технологию не стоит путать с адаптивной мобильной версией сайта. Адаптив меняет только верстку под размер экрана, а функциональность остается прежней. PWA-сайт добавляет то, чего у обычной мобильной версии нет: офлайн-доступ, значок приложения, push-уведомления. Как работает технология PWA

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

За это отвечает специальный скрипт — Service Worker. Он работает в фоновом режиме, отдельно от вкладки с сайтом, и перехватывает каждый сетевой запрос: решает, брать ли данные из сети или отдать уже сохраненную копию. Именно этот механизм дает офлайн-режим и возможность присылать push-уведомления даже тогда, когда сайт не открыт.

Второй обязательный элемент — манифест приложения, простой файл в формате JSON. В нем прописано, как оформить значок на разных экранах, какое имя показать под иконкой, в каком цвете и режиме открывать страницу — например, на весь экран, без верхней панели браузера. Без манифеста браузер не поймет, что сайт вообще претендует на роль приложения, и предложит обычную закладку.

Третье условие — защищенное соединение HTTPS. Без сертификата безопасности браузер попросту заблокирует регистрацию Service Worker. Поэтому первый практический шаг для любого сайта, который хочет стать PWA, — проверить, что он уже переведен на HTTPS.

Все три элемента работают одновременно и незаметно для пользователя: он просто нажимает на иконку и получает мгновенный запуск, а вся логика — что показать из кеша, а что запросить заново — остается скрытой внутри браузера.

Чем PWA отличается от сайта и нативного приложения

Три формата — обычный сайт, PWA и нативное приложение — закрывают на первый взгляд одну задачу, но устроены и ведут себя по-разному.

• Способ попасть на устройство. Сайт остается закладкой в браузере. PWA добавляется на экран напрямую с сайта, причем это касается не только смартфонов: Chrome и Edge умеют ставить такие приложения и на компьютер, открывая их отдельным окном без интерфейса браузера. Нативное приложение требует скачивания из App Store или Google Play.

• Поведение без связи. Сайт без интернета не откроется вовсе. PWA покажет то, что успело закешироваться — от заглушки до полноценного интерфейса, в зависимости от настроек разработчика. Нативное приложение тоже работает офлайн, но занимает при этом заметно больше места на устройстве.

• Присутствие в поиске. И обычный сайт, и PWA индексируются Google и Яндексом — на них можно перейти прямо по поисковой выдаче. Нативное приложение поисковики не видят: чтобы его нашли, пользователь должен сам зайти в стор и ввести название.

• Стоимость поддержки. У сайта и PWA — общий код: правка на сервере сразу видна всем, отдельных версий под iOS и Android вести не нужно. Нативные приложения обновляются только через магазин и требуют отдельной сборки под каждую платформу.

Разбор с акцентом на выбор технологии для конкретного проекта — есть в другом нашем материале: «Мобильные приложения: сравниваем натив, кроссплатформу и PWA».

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

Ставить PWA на экран умеют все основные браузеры, но кнопка или пункт меню в каждом расположены по-своему. Ниже — три самых частых сценария.

На iPhone (через Safari)

1. Откройте адрес сайта в Safari — на iOS это единственный браузер, где кнопка добавления доступна; в сторонних браузерах на айфоне ее обычно нет из-за ограничений платформы.

2. Тапните по значку «Поделиться» внизу экрана — квадрат со стрелкой.

3. В открывшемся списке найдите пункт «На экран «Домой»».

4.  Проверьте название приложения и нажмите «Добавить» в правом верхнем углу.

Готовая иконка окажется на рабочем столе рядом с остальными приложениями и будет запускаться без адресной строки Safari.

На Android (через Chrome)

1. Зайдите на сайт в Chrome, откройте меню из трех точек справа сверху.

2. Найдите пункт «Установить приложение» — он появляется, если сайт технически готов к установке, — либо «Добавить на главный экран».

3. Подтвердите действие во всплывающем окне.

Есть и более простой путь: Chrome нередко сам показывает баннер с предложением установить сайт при повторном визите — тогда достаточно нажать на встроенную кнопку, не заходя в меню.

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

В Яндекс Браузере

Логика похожа на Chrome: если сайт поддерживает PWA, в адресной строке Яндекс Браузера появляется отдельный значок установки. Один кликпо нему — и браузер предложит добавить сайт на рабочий стол или на главный экран телефона, пункт может называться «Установить как приложение».

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

Со стороны разработки речь идет не о новом продукте, а о доработке существующего сайта — том же наборе из манифеста, Service Worker и HTTPS, только теперь их предстоит создать, а не воспользоваться готовыми.

1. Проверить протокол. Если сайт все еще работает по HTTP, сначала подключают SSL-сертификат — без этого шага остальные не имеют смысла.

2. Собрать манифест. Указать название, набор иконок под разные экраны, фоновый цвет и режим отображения. На простом одностраничном сайте это занимает около дня работы, на крупном каталоге с разными разделами — дольше, потому что нужно продумать иконки и заголовки для каждого раздела отдельно.

3. Написать Service Worker. Определить, какие страницы, стили и изображения кешировать, настроить логику push-уведомлений. Это самый долгий этап: важно не просто сохранить контент, а не дать ему устареть при обновлении сайта.

4. Протестировать результат. Проверить установку на разных устройствах и корректность офлайн-режима. Для быстрой самопроверки годится бесплатный аудит Lighthouse, встроенный в Chrome, — он показывает, чего сайту не хватает до полноценного PWA.

По деньгам и срокам такая доработка почти всегда выходит выгоднее, чем параллельная разработка двух нативных приложений — держать одну кодовую базу дешевле, чем содержать команды под iOS и Android отдельно. Но самостоятельно без разработчика довести дело до стабильной работы сложно: офлайн-логика ломается при любом обновлении сайта, если ее не сопровождать.

Из известных примеров такого перехода — облегченная версия Twitter (сейчас X) под названием Twitter Lite, которая при том же интерфейсе весит в разы меньше нативного приложения и наравне с ним работает без сети. 

Издание Forbes перевело часть своего мобильного сайта на PWA, чтобы ускорить открытие статей на медленном мобильном интернете.

Сервис для поиска отелей Trivago использовал PWA, чтобы поднять число обращений от посетителей, которые заходили с рекламы и не собирались ставить полноценное приложение ради разового поиска.

После запуска PWA требует такого же сопровождения, как обычный сайт: кеш нужно обновлять при значимых правках интерфейса, а новые версии проверять на совместимость со старыми браузерами. Отдельно стоит держать в уме разницу платформ — на Android и на компьютере PWA работает предсказуемо и полно, а на iOS часть функций, например push-уведомления, стала доступна лишь в поздних версиях системы.

Если решение о самом факте разработки приложения еще не принято, полезно сначала разобраться — нужно ли бизнесу отдельное приложение вообще: «Мобильное приложение для бизнеса: запускать или нет».

Когда PWA бизнесу подойдет, а когда лучше разработать нативное приложение

В пользу PWA обычно говорят такие условия:

• Ограниченный бюджет и сжатые сроки. Один код работает на всех платформах сразу, поэтому запуск обходится дешевле и быстрее, чем параллельная разработка под iOS и Android.

• Нерегулярные визиты аудитории. Если человек заходит раз в несколько месяцев — например, что-то один раз купить или сравнить цены, — уговорить его скачать приложение из стора почти невозможно, а PWA открывается сразу по ссылке.

• Приоритет на скорость и охват. Для СМИ, каталога или сервиса бронирования важнее, чтобы страница открылась мгновенно у любого пользователя по прямой ссылке из рекламы или мессенджера, чем чтобы ее нашли в сторе.

Нативная разработка оправдана, если:

• Продукту нужен полный доступ к «железу» — камере, датчикам, Bluetooth, геолокации в реальном времени — PWA дает такой доступ лишь частично и по-разному на iOS и Android.

• Присутствие в App Store или Google Play — часть доверия к продукту. Часть аудитории проверяет приложение в сторе перед тем, как начать им пользоваться, особенно в финансовой и медицинской сфере.

• Приложение рассчитано на ежедневное интенсивное использование со сложной анимацией и высокой нагрузкой — в этом нативный код по-прежнему обгоняет веб-технологии по производительности.

Более подробный разбор этой развилки — в чек-листе: «Мобильное приложение или сайт: чек-лист».

Часто задаваемые вопросы

Чем PWA отличается от обычного мобильного приложения?

PWA остается сайтом с расширенными возможностями: его добавляют на экран прямо из браузера, публикация в App Store или Google Play не обязательна, а обновления происходят сами при каждом заходе. Нативное приложение собирают отдельно под каждую платформу, оно тяжелее по весу, зато получает полный доступ к функциям устройства.

Нужно ли скачивать PWA-приложение отдельно, как обычную программу?

Нет, отдельного файла для скачивания не существует — установка происходит прямо в браузере через пункт меню или кнопку «Добавить на экран». Формально это добавление ярлыка с расширенными правами, а не загрузка дистрибутива.

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

Да, но с оговоркой на выбор браузера: добавить сайт на экран как приложение можно только через Safari — сторонние браузеры на iOS такой функции обычно лишены из-за политики самой платформы.

Приходят ли push-уведомления от PWA на iPhone?

Приходят, но не на всех версиях системы: полноценная поддержка push для PWA появилась в iOS начиная с версии 16.4. На более старых прошивках уведомления от такого сайта не работают, и это стоит учитывать, если среди аудитории много владельцев старых iPhone.

Сколько стоит перевести сайт в формат PWA?

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

Чем PWA отличается от адаптивной мобильной версии сайта?

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

Что в итоге выбрать бизнесу — PWA или нативное приложение?

Единого ответа нет: PWA дешевле и быстрее в разработке, но не дает такого же глубокого доступа к возможностям устройства, как нативный код. Решение стоит принимать исходя из того, как часто используется продукт, и, насколько критичен для задачи доступ к камере, датчикам или офлайн-производительности — подробнее об этих критериях в разделе про выбор технологии выше.