Доработка PWA-приложения страховой компании
Мы приняли участие в доработке сайта страховой компании. Клиенту в уже готовое PWA-приложение требовалось добавить аутентификацию по биометрии и пуш-уведомления.
Клиент
Страхования компания.
Задача
Перед командой разработки стояли две основные задачи.
-
Упростить и ускорить авторизацию пользователей — сделать вход в PWA-приложение более удобным и безопасным за счёт биометрической аутентификации, а затем снизить количество проблем, связанных с вводом и восстановлением данных для входа.
-
Повысить оперативность взаимодействия с пользователями — внедрить пуш-уведомления, чтобы быстрее информировать клиентов о важных событиях и снизить зависимость от смс-рассылок.
Решение
Планировали добавить пуш-уведомления и авторизацию по биометрии. Для этого использовали набор технологий и архитектурных решений, которые на практике выступают стандартом в современной веб‑разработке.
1. Биометрическая авторизация
Реализовали вход по FaceID / TouchID через Web Authentication API (веб-стандарт для строгой аутентификацию без традиционных паролей). Добавили привязку устройства, проверку поддержки браузера, безопасное хранение учетных данных и резервный путь на стандартный вход.
2. Пуш-уведомления
Настроили Web Push API (отправляет пользователям уведомления даже когда само приложение не открыто в браузере) и Firebase Cloud Messaging (облачный сервис для отправки пуш-уведомлений между серверами приложений и клиентскими устройствами). Реализовали запрос разрешений, регистрацию пуш-токена, сервис‑воркер для получения уведомлений и обработки отказов/ошибок.
3. Интеграция в сайт клиента
Встроили биометрию и пуш в существующие сценарии авторизации и личного кабинета. Подключили взаимодействие с программным интерфейсом Бэкенд API, настройки пользователя и поддержку PWA (технология, которая расширяет функционал сайта до уровня приложения, сохраняя его веб‑природу).
4. Верстка страниц
Сверстали экраны авторизации и настроек: включение/отключение биометрии, управление уведомлениями, статусы подключения, ошибки и состояния недоступности функций.
Результат
Добавлен требуемый функционал. На стороне сервера разработали генерацию challenge (проверочное задание, которое система предъявляет пользователю), запустили проверку подписи, хранение открытого ключа, идентификатор учётных данных, счетчиков; сделали привязку к пользователю для работы с сервисом биометрической аутентификации, настроили FCM для работы с пуш-уведомлениями; на стороне PWA разработали систему хранения и обновления токенов для получения пуш-сообщений.
Бизнес-эффект
В результате внедрения биометрической аутентификации получили:
-
сокращение времени авторизации на 40-60%;
-
снижение количества ошибок при авторизации;
-
снижение обращений в поддержку для восстановления доступа на 10-30%;
-
рост удовлетворения пользователей на 15%, увеличение удержания или возврата в приложение.
В результате внедрения пуш-уведомлений получили:
-
снижение затрат на смс-рассылку: 15-20%
-
увеличение скорости реакции на уведомления компании
Трудности
Через Web Authentication API браузер работает с passkey (технология аутентификации без пароля), поведение требуемых API различается на разных браузерных движках. В связи с этим пришлось детально погрузиться в исследование и проектирование архитектуры для обеспечения полной совместимости.
Вызывало сложности достижение корректной работы пуш-уведомлений на iOS, из-за закрытости платформы и многих ее ограничений.
Технологии
VueJS, TypeScript, PWA, Web Authentication API, Web Push API, Firebase.
