Как создать PWA на существующем сайте и сравнить его с нативным приложением

PWA (Progressive Web App) — это сайт, который ставится на главный экран и работает как приложение за счет двух вещей: Service Worker и файла manifest.json. Пользователь устанавливает продукт прямо из браузера, а не идет в магазин приложений. Разбираем, из чего состоит PWA, как собрать его на существующем сайте и когда он выгоднее нативной разработки.

Что такое PWA и как оно работает

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

Технология опирается на 3 части: HTTPS для безопасности, Service Worker и Web App Manifest. Манифест — это JSON-файл с именем, иконкой, цветом и режимом отображения.

Service Worker — JavaScript-скрипт, который браузер запускает в фоне независимо от страницы. Он перехватывает сетевые запросы, управляет кэшем (HTML, CSS, JS, изображения) и отвечает за push-уведомления и фоновую синхронизацию. Зона его действия зависит от места файла: по описанию одной экспертной статьи, воркер по адресу example.com/my-pwa/sw.js управляет любой навигацией по пути my-pwa или ниже.

Разница с нативом заметна в обновлениях. По данным одной экспертной статьи, каждое обновление нативного приложения проходит модерацию в App Store и Google Play, и она занимает до 7 дней.

По данным одной экспертной статьи, PWA одной известной кофейной сети занимает 233 КБ против 148 МБ у ее нативного приложения. Идея таких сайтов появилась по инициативе Google в 2015 году.

Как собрать PWA на существующем сайте

1. Проверьте HTTPS. Без защищенного протокола браузер не зарегистрирует Service Worker, а кэш, офлайн и push-уведомления будут недоступны.
2. Убедитесь, что изображения, скрипты и шрифты тоже грузятся через HTTPS: ошибки смешанного контента могут помешать Service Worker.
3. Создайте manifest.json с названием, иконками, стартовым URL и режимом отображения и подключите его в <head> страницы.
4. Напишите и зарегистрируйте Service Worker: определите, что кэшировать и как отвечать на запросы без сети. На старте хватит простой стратегии кэширования статики. В примере из одной статьи файл sw.js лежит в корне проекта, обрабатывает события install, activate и fetch и создает кэш pwa-version-1.
5. Упростите кэширование и обновления готовыми библиотеками Workbox, набором инструментов от Google.
6. Проверьте результат: откройте PWA на Android в Chrome и на iOS в Safari, посмотрите офлайн-режим, иконку, запуск в standalone-режиме и push-уведомления. Затем прогоните Lighthouse: он оценивает соответствие стандартам PWA, производительность, доступность и SEO и дает рекомендации.

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

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

PWA. Это один сайт и одна кодовая база. Достаточно хостинга, комиссий магазинов нет: пользователи ставят приложение прямо с сайта. По оценке одной экспертной статьи, PWA обходится дешевле почти в 2-10 раз. Минус в ограничениях устройства, о них ниже.

Нативное приложение. Здесь нужна отдельная разработка под Android и iOS. По оценке одной экспертной статьи, простое приложение стоит от 2,5 млн рублей за одну платформу, а чтобы выйти на обе, бюджет приходится удвоить. Зато у нативных приложений нет тех ограничений доступа к Bluetooth, продвинутым функциям камеры и некоторым сенсорам, которые бывают у PWA.

По срокам простое PWA запускается максимум за пару недель, если сайт уже есть и его не нужно создавать с нуля (движок значения не имеет). При этом разработка нативных версий занимает от 3-х месяцев за MVP. Из текущих расходов у натива комиссия App Store и Google Play — до 30% с каждой транзакции, плюс аккаунты разработчика за 99 $ в App Store и 25 $ в Google Play ежегодно, а еще поддержка двух кодовых баз.

Есть причины, по которым натив остается. Push-уведомления на iOS появились только с версии 16.4 и работают менее стабильно, чем на Android. PWA на iOS приостанавливаются почти сразу после сворачивания.

Доступ к контактам, NFC (частично), Bluetooth, биометрии и расширенным функциям камеры ограничен или отсутствует. Кроме того, в разных браузерах PWA ведут себя неодинаково. Если вам нужны эти возможности, PWA не выбирайте.

PWA ставится из браузера, а натив стоит дороже и дольше

• PWA берет у сайта индексируемость, а у приложения — установку, офлайн и push-уведомления.
• Работает это на HTTPS, Service Worker и Web App Manifest; без HTTPS скрипт не зарегистрируется.
• Порядок сборки: проверить протокол, подключить манифест, зарегистрировать Service Worker с кэшем статики, проверить на Android и iOS.
• Простое нативное приложение стартует от 2,5 млн рублей за платформу и занимает от 3-х месяцев за MVP, а простое PWA запускается максимум за пару недель, если сайт уже есть.
• Если важны Bluetooth, биометрия или стабильная фоновая работа на iPhone, PWA не лучший вариант.

Если хотите понять, где в ваших процессах пригодится искусственный интеллект, в QIO помогут с внедрением ИИ в бизнес и оценкой состава работ.