Разработка кроссплатформенных приложений
в Санкт-Петербурге

Кросс-платформенное PWA подходит когда нужно охватить iOS, Android, десктоп с единой кодовой базой и ограниченным бюджетом. Хороший выбор для образовательных платформ ВУЗов Санкт-Петербурга — ИТМО, СПбГУ, Политеха — где аудитория использует разные устройства. Для корпоративных порталов с мобильным доступом — единое решение для офисных сотрудников за десктопом и полевых работников в смартфоне. Для медиа-проектов с массовой аудиторией. Для интернет-магазинов малого и среднего бизнеса где не оправдывается стоимость отдельных нативных приложений.

Подбираем стек под задачу. Next.js или Nuxt.js для производительности и SEO. React для большинства проектов. Vue или Svelte — когда заказчик предпочитает или есть особенности проекта. PWA-функциональность реализуем через Workbox для управления Service Workers. Для нативного-feel интерфейса используем компонентные библиотеки — Ionic Framework (специально для PWA с нативным UX), Quasar Framework для Vue. Адаптивный дизайн под все размеры — от мобильного до десктопного. Учитываем особенности iOS Safari, Android Chrome, десктопных браузеров.

Кросс-платформенный подход дает существенную экономию по сравнению с разработкой нативных приложений для каждой платформы. Фокусированное PWA — 12-18 недель против 6-10 месяцев для параллельной iOS+Android+веб-разработки. Полноценное кросс-платформенное PWA со средним функционалом — 5-9 месяцев. PWA с расширенной функциональностью, серьезными интеграциями и мультиязычностью — 7-12 месяцев. Экономия времени особенно заметна на проектах с большим количеством бизнес-логики.

PWA адаптируется под устройство через responsive дизайн. На десктопе работает как полноценное веб-приложение в браузере с возможностью «установки» через Chrome или Edge. На Android устанавливается из браузера и работает практически как нативное — push, офлайн, доступ через иконку. На iOS работает с ограничениями iOS Safari — установка через «Добавить на экран Домой», ограниченные push-уведомления (с iOS 16.4+ только при установке на главный экран). Учитываем эти отличия в проектировании UX — не делаем функций, недоступных на одной из платформ.

Кросс-платформенный дизайн требует продуманной адаптивности. Делаем дизайн mobile-first с разрастанием для планшета и десктопа. Используем CSS Grid и Flexbox для гибких лейаутов. Адаптируем навигацию — нижняя tab-навигация на мобильном, sidebar на десктопе. Адаптируем плотность контента — на десктопе можно показать больше информации одновременно. Учитываем сенсорное взаимодействие на мобильном и работу с мышью+клавиатурой на десктопе — размер кликабельных областей, hover-состояния, шорткаты. Поддерживаем оба режима — светлый и темный.

Тестирование кросс-платформенного PWA требует серьезной матрицы. Тестируем на iOS Safari в разных версиях iOS на iPhone разных моделей и iPad. На Chrome для Android на разных производителях устройств — Samsung, Xiaomi, Huawei (без Google Services), Pixel. На Chrome, Edge, Firefox для десктопа на Windows и macOS. Тестируем PWA-специфическую функциональность — установка, офлайн, push, обновления Service Worker. Используем BrowserStack или эквивалент для тестирования на реальных устройствах. Автоматизированное тестирование через Playwright или Cypress для функциональных проверок.

Большинство веб-интеграций работают одинаково на всех платформах PWA. ЮKassa, Тинькофф Касса, СБП работают через стандартный веб-checkout. Apple Pay поддерживается в Safari через Payment Request API. Google Pay — в Chrome. Push-уведомления отлично работают на Android и десктопе через Web Push API, на iOS с ограничениями. Аналитика — Яндекс.Метрика, AppMetrica (с веб-поддержкой), GA4 работают везде одинаково. Карты — Яндекс.Карты, 2GIS, OpenStreetMap через стандартные JS-библиотеки. Видео и аудио — стандартные HTML5 API.

Кросс-платформенное PWA требует поддержки сразу для нескольких платформ. Мониторим как PWA работает на каждой платформе отдельно — может появиться особенность работы на новой версии iOS Safari или Android Chrome. Тестируем после обновлений ОС и браузеров. Обновляем зависимости — фреймворки, библиотеки, Workbox. Поддерживаем обновления Service Worker без поломки пользователей со старыми версиями кэша. Развиваем функциональность с учетом всех платформ — нельзя ввести функцию, не работающую на одной из них. Для крупных PWA-проектов Санкт-Петербурга выделяем команду с пониманием специфики каждой платформы.

Разработчик общего кода, дизайнер, тестировщик и руководитель.

Он нужен для связок с системными возможностями.

От двух на небольшом приложении.

Он нужен при своём сервере.

Недельные отрезки с демонстрацией сборки в конце.

Заказчик видит движение и правит курс рано.

Короткая сверка команды и созвон с заказчиком раз в неделю.

В трекере с описанием и приёмочными условиями.

Что должно получиться и как это проверить.

Описывают решения и границы модулей.

Их оценивают и ставят в очередь, а не вклинивают.

Объём и результат этапа описывают до начала.

Их ставят на телефон и проходят по списку.

Он нужен с первого дня.

Правки читает второй разработчик до слияния.

Она собирает и раздаёт версии без разработчика.

Через механизмы закрытого тестирования.

Список изменений ведут по выпускам.

Документация и разбор кода снижают зависимость от одного человека.

На долгом проекте он снимает риск.

Задачи описаны, и работу подхватывают.

Он держит сроки, состав и связь с заказчиком.

Нужен один человек, принимающий решения.

Несколько часов в неделю.

Согласования растягиваются и сдвигают сроки.

Они проверяют рабочие сценарии лучше сторонних.

Передают инструкции и проводят разбор.

Код, доступы, документация и инструкция сборки.

Поддержку оформляют отдельным договором.

Список отложенного собирают по ходу первой.

Их расставляют по влиянию на пользователей.

Оценки дают по задачам, а не по проекту целиком.

Их пересматривают после первых недель работы.

При работе по часам отчёт обязателен.

Их называют в начале и держат в поле зрения.

Ограниченный объём первой версии и быстрая приёмка.