Progressive Web App (PWA) архитектура позволяет переносить веб-картографические приложения в режим, близкий к нативным мобильным решениям, сохраняя при этом работу через браузер и офлайн-доступ к ключевым функциям. В сочетании с картографическими сервисами HERE Technologies и HERE Maps API PWA становится инструментом для создания устойчивых, быстрых и автономных геоприложений.
Progressive Web App строится на трёх ключевых компонентах: манифесте приложения, сервис-воркере и HTTPS-слое доставки.
В картографическом приложении каждый из этих компонентов выполняет специфическую роль:
HERE Maps API предоставляет набор SDK и REST-сервисов для работы с картами, геокодированием, маршрутизацией и тайлами. В PWA-архитектуре он чаще всего используется в двух режимах:
Основная задача PWA — не просто отобразить карту, а обеспечить её доступность даже при нестабильном соединении.
Базовая инициализация карты в JavaScript SDK HERE выглядит следующим образом:
const platform = new H.service.Platform({
apikey: 'YOUR_API_KEY'
});
const defaultLayers = platform.createDefaultLayers();
const map = new H.Map(
document.getElementById('map'),
defaultLayers.vector.normal.map,
{
center: { lat: 40.7128, lng: -74.0060 },
zoom: 12,
pixelRatio: window.devicePixelRatio || 1
}
);
const beh * avior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
const ui = H.ui.UI.createDefault(map, defaultLayers);В PWA эта инициализация дополняется логикой кеширования слоёв и ресурсов.
Основная сложность карт в PWA — большой объём тайлов. Карта в стандартном режиме загружает десятки или сотни HTTP-запросов на плитки.
Service Worker перехватывает запросы и кеширует:
Пример стратегии кеширования:
self.addEventListener('install', event => {
event.waitUntil(
caches.open('here-map-cache-v1').then(cache => {
return cache.addAll([
'/',
'/index.html',
'/app.js',
'/styles.css'
]);
})
);
});
self.addEventListener('fetch', event => {
if (event.request.url.includes('tile')) {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request).then(fetchRes => {
const clone = fetchRes.clone();
caches.open('tile-cache').then(cache => {
cache.put(event.request, clone);
});
return fetchRes;
});
})
);
}
});Карты HERE используют динамическую генерацию тайлов по координатам и масштабу. URL тайла обычно включает параметры:
Для PWA важно разделять кеш:
Рекомендуемая стратегия:
Офлайн-режим в картографических PWA не означает полную функциональность. Он реализуется через уровни деградации:
В режиме офлайн отключаются:
Сохраняются:
HERE Geocoding API позволяет преобразовывать адреса в координаты и обратно. В PWA добавляется слой локального кеша:
async function geocode(query) {
const cached = await getFromIndexedDB(query);
if (cached) return cached;
const response = await fetch(
`https://geocode.search.hereapi.com/v1/geocode?q=${query}&apiKey=YOUR_API_KEY`
);
const data = await response.json();
await saveToIndexedDB(query, data);
return data;
}Таким образом снижается зависимость от сети и уменьшается количество API-запросов.
Маршрутизация в HERE API требует серверной обработки, поэтому в PWA применяется гибридная модель:
function renderRoute(map, routeLine) {
const lineString = new H.geo.LineString();
routeLine.forEach(point => {
lineString.pushPoint(point);
});
const polyline = new H.map.Polyline(lineString, {
style: { strokeColor: 'blue', lineWidth: 4 }
});
map.addObject(polyline);
}Для хранения кеша используется IndexedDB:
Структура базы:
Особенность PWA-карт — необходимость хранения больших бинарных данных, поэтому применяется компрессия (например, gzip или LZ-string).
В PWA-картах производительность критична из-за большого количества объектов:
Оптимизации:
map.getViewPort().addEventListener('mapviewchange', () => {
requestAnimationFrame(() => {
updateVisibleObjects();
});
});PWA позволяет использовать push-уведомления для геозависимых сценариев:
Service Worker обрабатывает события:
self.addEventListener('push', event => {
const data = event.data.json();
event.waitUntil(
self.registration.showNotification(data.title, {
body: data.message,
icon: '/icons/map.png'
})
);
});Картографические PWA работают с чувствительной информацией:
Реализуются меры:
Обновление картографического PWA включает:
Стратегия обычно строится на versioned cache:
Старая версия удаляется после успешного обновления новой.
Комбинация PWA и HERE Technologies позволяет реализовать:
Такие системы строятся вокруг принципа: минимальная зависимость от сети при максимальной локальной автономности данных.