01 — Гайды · 2 мин чтения

Карта мероприятия в приложении: чек-лист WebView

Чтобы встроить карту в приложение мероприятия, нужен WebView и несколько деталей, которые легко упустить. Пройдитесь по этому списку до публикации в сторах.

Адрес и язык

Откройте адрес карты мероприятия и передайте язык приложения (?lang=). Если в приложении можно сменить язык, вызовите мост — карта переключится без перезагрузки.

Обработчики сообщений

Зарегистрируйте получателя сообщений карты: WKScriptMessageHandler в iOS, JavaScript-интерфейс в Android, onMessage в react-native-webview. Используйте имена из конфигурации карты.

Дождитесь «ready»

Не вызывайте карту до загрузки. Дождитесь события ready, проверьте версию моста и только потом отправляйте команды — открыть место или построить маршрут.

Используйте события

Карта сообщает приложению, когда открыто место, построен маршрут или что-то отправлено. События «Поделиться» позволяют открыть собственный диалог приложения вместо браузерного.

Пуш-уведомление или QR-код может содержать ссылку на карту — место, маршрут, язык. Направляйте такие ссылки в WebView, чтобы они открывались в нужной точке.

Офлайн в iOS и Android

Карта работает офлайн благодаря service worker. В WKWebView на iOS service worker работает только для App-Bound Domains: укажите домен карты в WKAppBoundDomains в Info.plist и ограничьте навигацию этими доменами.

В Android включите в настройках WebView JavaScript и DOM storage, чтобы карта могла хранить свои данные.

Разрешения и пуши

Геолокацию и камеру (для QR-кодов) разрешают приложению; передавайте их в WebView, только если они нужны карте.

Web push внутри WebView не работает. Отправляйте уведомления из приложения, а оповещения карты подключите к своему пуш-сервису.

Тестируйте как гость

Перед релизом проверьте на реальных устройствах:

  • Карта открывается на языке приложения
  • Место, открытое из нативного экрана, показывает свою карточку
  • «Поделиться» открывает диалог приложения
  • Ссылка из пуша ведёт в нужное место
  • Карта загружается в авиарежиме после одного визита онлайн
  • Безопасные зоны экрана и жест «назад» работают как в остальном приложении

Приложение с картой фестиваля
Noctara Run: демо карты трассы забега

Финиш

Готовите фестиваль?

Пришлите план площадки, сцены и даты — мы ответим, что потребуется для карты вашего фестиваля.