Мобильные приложения давно стали стандартом для интернет-сервисов. Однако разработка нативных решений для iOS и Android требует времени, бюджета и поддержки нескольких платформ. Поэтому всё больше компаний используют PWA (Progressive Web App) — технологию, позволяющую превратить обычный сайт в полноценное приложение.

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

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

Для банковского сектора это не просто технологический тренд, а стратегический вопрос выживания цифровых сервисов. PWA даёт возможность продолжить обслуживание клиентов на iOS и Android, даже если оригинальное приложение удалено из магазина. При этом сохраняется критически важный функционал: push-уведомления, биометрия (Face ID/Touch ID), работа с камерой и геолокацией.

Что такое PWA и почему это выгодно для бизнеса

PWA-приложение — это веб-приложение, созданное с использованием стандартных технологий HTML, CSS и JavaScript, которое может работать как полноценное приложение на устройстве пользователя.

Главная идея progressive web app — объединить преимущества сайтов и мобильных приложений.

Для бизнеса данная технология особенно привлекательна, потому что позволяет:

сократить стоимость разработки;
быстрее запустить продукт;
охватить больше пользователей;
улучшить мобильный опыт.

PWA vs нативные приложения: сравнение по скорости, стоимости и охвату аудитории

Нативные приложения можно разрабатывать отдельно под каждую платформу — Swift/Objective-C для iOS, Kotlin/Java для Android, либо использовать кроссплатформенные фреймворки вроде Flutter или React Native, которые позволяют писать один код сразу под обе ОС. Но в любом случае это отдельный проект со своей командой и циклом поддержки.

Это означает отдельные команды разработки и отдельную поддержку.

Progressive Web App работают через защищённое соединение браузера, поэтому одно приложение может работать на любом устройстве.

Для бизнеса это означает более быстрый запуск продукта и быстрый доступ пользователей к сервису.

Ключевые преимущества PWA для пользователей: офлайн-доступ, push-уведомления, быстрый запуск

Главная причина популярности Progressive Web App — улучшенный пользовательский опыт.

PWA-приложения позволяют:

получать офлайн-доступ к части контента;
отправлять push-уведомления;
обеспечивать быстрый запуск;
устанавливать иконки на главный экран устройства.

После установки приложение запускается так же, как нативное — через главный экран устройства.

Это снижает трение между пользователем и сервисом и повышает вовлечённость.

Реальные кейсы: как крупные компании используют PWA для роста вовлечённости

Многие крупные компании уже внедрили PWA-приложения, чтобы улучшить мобильный опыт пользователей и увеличить вовлечённость аудитории. Рассмотрим несколько известных кейсов, где переход на Progressive Web App дал измеримые результаты.

ВТБ Онлайн: антисанкционное PWA

В 2022 году мобильные приложения ВТБ оказались недоступны в App Store и Google Play. Чтобы клиенты не остались без сервиса, банк в сжатые сроки трансформировал интернет-банк в PWA-приложение, адаптированное под мобильные устройства.

Аудитория веб-версии выросла на 300% сразу после удаления приложений из сторов;
Каждый третий вход в ВТБ Онлайн сегодня совершается через PWA;
Вход по биометрии заработал в вебе — клиенты экономят время, а банк сэкономил уже 15 млн рублей на СМС;
Ежемесячно через PWA распознаётся более 100 тысяч QR-кодов для платежей.

Кроме того, ВТБ первым среди российских банков внедрил гибридную технологию на базе PWA, что позволило снизить стоимость разработки и поддержки в 2 раза и раскатывать обновления мгновенно, минуя модерацию магазинов. Сегодня 2 млн клиентов используют это решение на Android, и банк продолжает масштабировать технологию на iOS через PWA-версию.

Pinterest также полностью переработал мобильную веб-версию и превратил её в PWA-приложение, чтобы ускорить загрузку страниц и улучшить пользовательский опыт.

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

В результате компания получила более высокую вовлечённость аудитории и рост числа действий пользователей на платформе.

Starbucks

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

Progressive Web App позволило пользователям:

просматривать меню и добавлять товары в корзину даже офлайн;
быстро оформлять заказ при восстановлении соединения;
использовать приложение без загрузки тяжёлого мобильного клиента.

Интересно, что PWA-версия приложения оказалась примерно в 600 раз меньше нативного приложения для iOS (233 KB против 148 MB), что значительно ускорило доступ пользователей к сервису.

Проверка готовности сайта к конвертации в PWA

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

Этот инструмент анализирует ресурс и проверяет:

наличие Service Worker;
manifest.json;
безопасность соединения;
производительность.

Lighthouse показывает, соответствует ли сайт требованиям PWA-приложения.

Чтобы сервис работал как Progressive Web App, необходимо три ключевых компонента:

Service Worker

Скрипт, который управляет кэшированием и офлайн-режимом.

Web App Manifest

Файл конфигурации приложения.

Web App Manifest — это файл, содержащий:

название приложения;
иконки;
стартовую страницу;
режим отображения.
HTTPS

HTTPS обеспечивает безопасность передачи данных между сервером и пользователем.

Типичные ошибки: что мешает сайту стать PWA и как их исправить

Даже если сайт написан на современных технологиях, это ещё не означает, что его можно сразу превратить в PWA-приложение. Браузеры предъявляют к таким приложениям ряд требований, и если хотя бы одно из них не выполнено, пользователи не смогут установить приложение на устройство или использовать его ключевые возможности.

Рассмотрим основные ошибки, которые чаще всего мешают ресурсу стать полноценным Progressive Web App, и способы их устранения.

Отсутствие HTTPS

Одно из обязательных требований для PWA-приложения — работа через защищённое соединение. Progressive Web App работают через защищённое соединение HTTPS, потому что браузер должен быть уверен в безопасности передачи данных между сервером и устройством пользователя.

Без HTTPS не будут работать:

Service Worker;
push-уведомления;
офлайн-режим;
установка приложения на устройство.

Если сайт ещё использует HTTP, необходимо установить SSL-сертификат и настроить автоматическое перенаправление на HTTPS.

Пример настройки редиректа на HTTPS

Чтобы браузеры могли корректно регистрировать Service Worker и предлагать установку PWA, сайт должен работать по HTTPS. Вот как настроить принудительный редирект с HTTP на HTTPS для самых распространённых серверов.

Для Apache

Вариант 1. Через .htaccess

Файл .htaccess кладётся в корневую директорию сайта:

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Где разместить: в корне сайта (обычно public_html или www).

Вариант 2. Через конфигурацию сайта Apache

В конфигурации виртуального хоста для порта 80:

<VirtualHost *:80>
    ServerName example.com
    Redirect permanent / https://example.com/
</VirtualHost>

Где разместить: в /etc/apache2/sites-available/example.com.conf (Ubuntu/Debian) или /etc/httpd/conf.d/example.conf (CentOS). После изменений перезапустите Apache:

sudo systemctl restart apache2   # Ubuntu/Debian
sudo systemctl restart httpd     # CentOS

Для Nginx

В конфигурации сайта для порта 80:

server {
    listen 80;
    server_name example.com www.example.com;
    return 301 https://example.com$request_uri;
}

Где разместить: в /etc/nginx/sites-available/example.com или /etc/nginx/conf.d/example.conf.

После изменений проверьте конфигурацию и перезапустите Nginx:

bash
sudo nginx -t
sudo systemctl restart nginx

Важно: После настройки редиректа убедитесь, что SSL-сертификат установлен корректно. Для проверки достаточно зайти на сайт по HTTP — должно происходить автоматическое перенаправление на HTTPS.

Ошибки в Web App Manifest

Второй критически важный элемент — Web App Manifest. Это файл конфигурации приложения, который сообщает браузеру, как должен выглядеть и запускаться установленный сервис.

Файл manifest.json содержит:

название приложения;
стартовую страницу;
цвет оформления темы;
иконки;
режим отображения (например, полноэкранный).

Типичные ошибки:

неправильный путь к файлу manifest.json;
отсутствие обязательных полей;
неверные пути к иконкам;
отсутствие нужных размеров изображений.

Параметр display в манифесте PWA

Параметр display определяет, какой интерфейс браузера показывать при запуске установленного Progressive Web App. От этого зависит, будет ли приложение выглядеть как нативное или останется похожим на обычный сайт в браузере.

Основные значения display:

Если браузер не поддерживает указанный режим, он автоматически переключается на следующий по цепочке: fullscreen → standalone → minimal-ui → browser.

Другие полезные параметры манифеста

Вот пример манифеста с дополнительными свойствами, которые улучшают восприятие приложения:

{
  "name": "Моё приложение",
  "short_name": "PWA",
  "description": "Описание приложения",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait",
  "theme_color": "#3367D6",
  "background_color": "#FFFFFF",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "shortcuts": [
    {
      "name": "Новый заказ",
      "url": "/new-order",
      "icons": [{ "src": "/icons/shortcut.png", "sizes": "96x96" }]
    }
  ]
}

Пояснения к параметрам:

orientation — закрепляет ориентацию экрана (portrait для портретной, landscape для альбомной).
theme_color — цвет панели инструментов (на мобильных) или заголовка окна (на десктопе).
background_color — цвет фона, отображаемый до загрузки стилей (используется в заставке при запуске).
shortcuts — быстрые действия при долгом тапе на иконку (Android) или клике правой кнопкой (Windows).

Где посмотреть все параметры: Полный список доступен в документации MDN и Web.dev. Отладку манифеста удобно проводить в Chrome DevTools (вкладка Application → Manifest).

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

Неправильная регистрация Service Worker

Service Worker — это основной механизм, который делает PWA-приложения похожими на нативные приложения. Он отвечает за:

кэширование ресурсов;
работу офлайн;
ускорение загрузки страниц;
обработку сетевых запросов.

Если Service Worker не зарегистрирован или содержит ошибки, приложение не сможет использовать кэш и не будет работать без интернета.

Пример базовой регистрации:

if ('serviceWorker' in navigator) {
 navigator.serviceWorker.register('/sw.js')
   .then(() => console.log('Service Worker registered'));
}

Также важно убедиться, что Service Worker расположен в правильной директории. Если он находится слишком глубоко в структуре сайта, он не сможет управлять всеми страницами.

Отсутствие адаптации под мобильные устройства

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

Чтобы PWA-приложение корректно работало на любом устройстве, необходимо:

использовать адаптивную вёрстку;
правильно настроить метатег viewport;
обеспечить удобное touch-управление;
оптимизировать размеры изображений.

Пример meta-тега viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

Это позволяет интерфейсу корректно масштабироваться на разных устройствах.

Отсутствие кэширования ресурсов

Если приложение не кэширует статические файлы, пользователи не смогут работать с сайтом при слабом интернете.

Service Worker должен кэшировать:

HTML-файлы;
CSS-стили;
JavaScript-код;
изображения;
основные API-ответы.

Пример простого кэширования:

self.addEventListener('install', event => {
 event.waitUntil(
   caches.open('app-cache').then(cache => {
     return cache.addAll([
       '/',
       '/styles.css',
       '/app.js'
     ]);
   })
 );
});

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

Как проверить, что сайт готов стать PWA

После исправления этих ошибок рекомендуется снова провести аудит сайта. Самый удобный инструмент для этого — Lighthouse.

Он проверит:

наличие manifest.json;
регистрацию Service Worker;
безопасность соединения;
возможность установки приложения.

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

Пошаговая инструкция: превращаем сайт в PWA за 5 шагов

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

Шаг 1. Создаём Web App Manifest

Файл web app manifest сообщает браузеру, как должно выглядеть приложение после установки на устройство пользователя. В нём задаются название приложения, иконки, стартовая страница и режим отображения интерфейса.

После создания файл необходимо добавить в HTML‑документ:

<link rel="manifest" href="/manifest.json">

Также здесь можно задать режим отображения, например, полноэкранный, чтобы приложение запускалось без интерфейса браузера.

Шаг 2. Генерируем иконки разных размеров

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

Обычно используются размеры:

192×192;
512×512.

Эти изображения используются для установки иконки на главный экран устройства.

Иконки добавляются в файл manifest.json:

"icons": [
  {
    "src": "/icons/icon-192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/icons/icon-512.png",
    "sizes": "512x512",
    "type": "image/png"
  }
]

Браузер автоматически подберёт иконку подходящего размера для конкретного устройства.

Шаг 3. Добавляем Service Worker

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

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

Пример регистрации Service Worker:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

Простейший пример Service Worker с кэшированием:

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('app-cache').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/app.js'
      ]);
    })
  );
});

Такой механизм позволяет PWA-приложениям загружаться быстрее и работать даже при слабом интернет-соединении.

Шаг 4. Тестируем в DevTools

После настройки необходимо проверить, что PWA-приложение работает корректно.

открыть вкладку Application;
проверить раздел Manifest;
убедиться, что Service Worker зарегистрирован;
проверить кэширование ресурсов.

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

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

Развёртывание и публикация: как сделать PWA доступным для пользователей

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

Установка на Android

На Android установка PWA-приложений происходит напрямую через браузер. Если сайт соответствует требованиям Progressive Web App (имеет manifest, иконки, HTTPS и service worker), браузер автоматически предложит пользователю установить приложение.

Процесс установки выглядит так:

Пользователь открывает сервис в Chrome или другом поддерживаемом браузере.
В адресной строке или меню появляется кнопка Install / Установить приложение.
После подтверждения браузер устанавливает приложение.
На домашнем экране устройства появляется иконка приложения, которая запускает PWA как отдельное приложение.

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

Установка на iOS

На iOS установка Progressive Web App работает иначе. В Safari нет автоматического предложения установки, поэтому пользователь должен добавить приложение вручную.

Процесс установки:

Пользователь открывает сайт в Safari.
Нажимает кнопку Share (Поделиться).
Выбирает пункт Add to Home Screen / Добавить на экран «Домой».
Подтверждает установку.

После этого иконка сайта появляется на домашнем экране и может запускаться как отдельное приложение.

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

Итоги: стоит ли превращать сайт в PWA-приложение

Технология Progressive Web App позволяет быстро превратить обычный сайт в полноценное приложение. Пользователи получают быстрый доступ к сервису через главный экран устройства, а бизнес — возможность запускать мобильные решения без сложной разработки.

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

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

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