PWA
Кейсы использования для партнерских предложений в Delivery Club

Никита Борисов
Frontend Developer at Delivery Club
Focused on making better UX
In love with Angular, RxJS and PWA

О чем этот доклад?
Направления Delivery Club
Сложности приложений на Web View
Как развивается веб и что такое PWA?
Улучшение UX за счет использования браузерных API

О Delivery Club
Топ 1 фудтех компания в России
12000+ ресторанов
Работаем в 120 городах
Среднее время доставки — 35 минут

Сделали 4 миллиона заказов за
весь 2018 год

Сделали уже 3 миллиона заказов
только за сентябрь 2019

Основные направления Delivery Club
Рестораны
Курьеры
Пользователи

Vendor App
Обработка заказов в реальном времени
Работает в браузере
Пользуются несколько тысяч партнеров
ежедневно

Сложности
Необходимость в standalone приложении для нескольких платформ
Потребность в push уведомлениях
Проблемы с сетью у партнеров

Возможные варианты решения
Cordova или кастомное решение с Web View
Гибридное мобильное приложение на React Native/NativeScript/
Flutter
Нативное приложение под Android

Cordova/Web View
Плюсы
⁃ Возможность быстро портировать
текущее веб приложение на
другие платформы
⁃ Набор готовых плагинов
Минусы:
⁃ Проблемы при отладке
⁃ При появлении бага, нет понимания, на
чьей он стороне
⁃ В cordova и ее плагинах присутствует
большое количество багов

React Native/NativeScript/Flutter
Плюсы
Не найдено
Минусы:
⁃ Сложности в разработке и отладке
⁃ Сложности в поддержке
⁃ Отдельная платформа, уход от веба
⁃ Непредсказуемые баги в плагинах

Нативное приложение
Плюсы
⁃ Оптимальное решение без
костылей
⁃ Хорошая производительность
Минусы:
⁃ Долгий старт
⁃ Необходимость иметь отдельную
команду разработчиков

Но есть еще кое-что

PWA (Progressive Web Applications)
Бесперебойная и безотказная работа
Отзывчивость
Максимально вовлечение пользователя
Приложения, которые
соответствуют лучшим UX практикам:

Как мы делали из веб
приложения PWA

Что мы хотим?
Иметь возможность установки как standalone
Показывать push уведомления на нужные эвенты
Иметь поддержку оффлайн режима

Что для этого необходимо?
The Web App Manifest Service Worker

The Web App Manifest
JSON файл
Содержит информацию о поведении приложения, когда оно будет установлено
Подключается в html через <link>

manifest.json index.html

Service Worker
Один из видов Web Worker
Активируется только при настроенном https
Может перехватывать fetch запросы
Может подписываться на push уведомления

Push уведомления
Получение нового заказа
Оповещение о том, что курьер скоро прибудет
Уведомление о проблемах с сетью

Как мы сделали поддержку offline?
Кэшируем бандлы и ассеты с помощью Workbox
Запросы к бэкенду кэшируем вручную

Почему не Workbox для кэширования запросов?
Отсутствие возможности кастомизировать механизм кэширования
Cache API не такой и сложный для работы
Необходимость в кэшировании POST запросов

История о том, как Background Sync
API помог нам решить еще одну
проблему

Background Sync API
Отправляет запрос на синхронизацию в Service Worker
Внутри Service Worker слушаем ивенты sync
При срабатывании ивента синхронизации отправим все нужные
запросы на бэкенд

index.js
serviceWorker.js

Что мы получили в итоге?

Итоги
Открыли возможность перевода с android и windows приложений на
PWA
Расширили функциональность приложения для тех пользователей,
которые пользовались приложением в браузере
Значительно улучшили UX приложения, упростив дальнейшую
разработку
Улучшили производительность по сравнению с приложением на Web
View

Что дальше?
Ресерч и внедрение браузерных API
Паблишинг приложения как TWA
Внедрение PWA в остальные продукты

Спасибо!
Twitter: @south_iceberg
Telegram: @donttextmeplz
email: n.borisov@corp.mail.ru
Contacts: