Что такое PWA-приложение

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

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

Что такое PWA?

Что такое PWA приложение простыми словами: сайт, который после установки ведет себя как приложение. Термин Progressive Web Apps появился в 2015 году. Так назвали набор веб-технологий, которые вместе дают сайту свойства нативного приложения. Слово progressive означает постепенное улучшение: в старом браузере PWA открывается как обычный сайт, в современном получает все возможности.

Классическое определение сводится к трем условиям:

• сайт работает по защищенному протоколу HTTPS;
• у него есть web app manifest - JSON-файл с названием, иконками, цветами и режимом отображения;
• зарегистрирован service worker - скрипт, который работает в фоне отдельно от страницы, кеширует файлы и принимает push-уведомления.

Все остальное - обычный фронтенд: HTML, CSS, JavaScript и любой фреймворк, от React до Vue. Поэтому технология PWA доступна любой команде, которая умеет делать сайты, а для запуска не нужны отдельные мобильные разработчики.

Что такое PWA мобильное приложение?

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

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

Веб приложение PWA

Веб-приложение PWA держится на двух файлах поверх обычного сайта.

Web app manifest. Это app manifest.json, JSON-файл с описанием приложения, на который ссылается каждая страница. В нем указывают:

• name и short_name - полное и короткое название под иконкой;
• icons - набор иконок разных размеров;
• start_url - страница, с которой открывается приложение;
• display - режим окна, для вида приложения ставят standalone;
• theme_color и background_color - цвета панели и заставки при запуске.

Без app manifest браузер не поймет, как показать сайт в виде приложения, и не предложит его установить.

Service worker. Скрипт на JavaScript, который браузер запускает отдельно от вкладки. Он перехватывает сетевые запросы и решает, отдать ответ из кеша или сходить на сервер. Так PWA открывается без интернета, а повторные загрузки идут почти мгновенно. Через связку service worker и Web Push приходят push-уведомления, даже когда приложение закрыто.

Стратегию кеширования выбираем под контент. Статику (шрифты, стили, иконки) отдаем из кеша. Каталог и цены берем из сети, а копию в кеше держим на случай пропавшей связи. Страницу оформления заказа не кешируем вовсе, чтобы человек не увидел устаревшую сумму.

Данные между сессиями хранят в IndexedDB (встроенная база данных браузера). В ней, например, лежит корзина или черновик формы, пока нет сети. В браузерах с фоновой синхронизацией service worker сам отправит их на сервер, когда связь вернется, в остальных это делает страница при следующем открытии.

PWA App

Как PWA app попадает на устройство, зависит от операционной системы:

• Android. Браузеры на движке Chromium сами показывают предложение установить приложение, а сайт может вывести свою кнопку установки. Android PWA появляется в списке приложений рядом с нативными и открывается из него так же.
• iOS. Установка только вручную: в Safari через меню Поделиться и пункт На экран Домой, с iOS 16.4 это умеют и другие браузеры. С той же версии установленные PWA получают push-уведомления, но только после явного разрешения пользователя.
• Компьютер. Chromium-браузеры предлагают установку значком в адресной строке, PWA открывается в отдельном окне и закрепляется в панели задач.

На iOS подсказку об установке приходится рисовать самим: коротко показать пользователю, куда нажать. Без нее до главного экрана доходит мало людей, и push-уведомления на iPhone остаются недоступны.

PWA сайт

PWA сайт не выбирают вместо сайта: это тот же сайт, дополненный манифестом и service worker. Все, что у него было, сохраняется. Страницы индексируют поисковые системы, ссылки открываются из мессенджеров и соцсетей, реклама ведет на обычный адрес. По сути это сайт-приложение в одном продукте.

Преимущества PWA перед нативным приложением:

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

Недостатки PWA тоже конкретные:

• на iOS нет доступа к Bluetooth, NFC и ряду датчиков, фоновые задачи сильно ограничены;
• push-уведомления на iPhone работают только у тех, кто установил PWA на экран Домой;
• приложения нет в App Store, а часть аудитории ищет сервисы только там;
• браузер может очистить сохраненные данные, если приложением долго не пользуются;
• тяжелая графика, обработка видео и игры работают медленнее, чем в нативном коде.

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

Пример PWA приложения

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

Другой показательный случай - Twitter Lite, облегченная версия соцсети, выпущенная как PWA для рынков с медленным интернетом и недорогими смартфонами. Команда сделала ставку на маленький размер и работу при плохой сети, и этот проект до сих пор приводят как образец технологии.

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

Примеры PWA приложений

• Starbucks - заказ напитков из PWA, которое работает без сети: меню и корзина доступны без связи, заказ уходит при подключении.
• Pinterest - мобильная веб-версия переписана как PWA, чтобы ускорить загрузку ленты.
• Uber - облегченная веб-версия заказа поездки, рассчитанная на медленные мобильные сети.
• AliExpress - мобильный сайт магазина с установкой на главный экран.
• Spotify - веб-плеер, который можно установить на компьютер как приложение.

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

Как это выглядело бы у нас, покажем на демо-проектах студии:

• Грядка - демо магазина фермерских продуктов. Каталог, корзина и повтор прошлого заказа в PWA работают отлично, а покупатель ставит приложение прямо с сайта.
• Ритмика - демо фитнес-сервиса. Расписание занятий и запись в PWA, напоминания через push на Android и у тех, кто установил приложение на iPhone.
• Умникум - демо образовательной платформы. Конспекты и тесты кешируются и доступны без сети в дороге.
• Капиталика - демо финансового трекера. Для просмотра расходов PWA хватает, а виджеты с балансом на рабочем столе телефона уже требуют натива.
• Терапис - демо записи к психологу. Запись и оплата подходят для PWA, видеосессии работают в браузере через WebRTC.
• Трассер - демо приложения для курьеров. Здесь PWA не подходит: фоновая геолокация на iOS браузеру недоступна.

Как сделать PWA приложение?

Разработка PWA начинается не с кода, а с проверки задачи. Порядок работ у нас такой:

1. Выписать функции устройства, которые нужны продукту, и сравнить с тем, что умеет браузер на iOS. Если в списке фоновая геолокация, Bluetooth или NFC на iPhone, сразу считаем натив или кроссплатформу.
2. Перевести сайт на HTTPS, если этого еще нет.
3. Сделать сайт адаптивным и быстрым на мобильных. PWA не спасет медленный фронтенд, а только спрячет адресную строку.
4. Добавить manifest.json с иконками, названием, start_url и режимом standalone, подключить его в разметку всех страниц.
5. Написать service worker: стратегии кеширования, офлайн-страница, обработка push. В проекте на React удобнее взять плагин сборщика, например для Vite, или готовое решение для Next.js, которые генерируют service worker из конфигурации. Так делают PWA приложения на React без ручной работы с кешем.
6. Подключить push-уведомления через Web Push и сервер отправки, продумать момент, когда просить разрешение. Запрос сразу при первом входе чаще всего получает отказ.
7. Протестировать установку и офлайн-режим на реальных iPhone и Android, прогнать аудит PWA в инструментах разработчика браузера.
8. При необходимости упаковать PWA в APK через Trusted Web Activity и опубликовать в магазинах для Android, включая RuStore.

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

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