Веб-приложение, которое кеширует тайлы интерактивной карты Leaflet.js в браузере через IndexedDB. Это даёт офлайн-доступ к уже просмотренным участкам карты и заметно сокращает количество сетевых запросов при повторной навигации.
Исходный код: github.com/JohnCamelTry/leaflet-cache-tile.
Как это работает
При панорамировании и зуме тайлы загружаются обычными HTTP-запросами и тут же сохраняются в IndexedDB. При следующих обращениях к тем же тайлам они отдаются из локального хранилища, а не из сети — поэтому уже просмотренная область остаётся доступной даже без подключения.
Возможности
- Постоянное хранилище. Тайлы лежат в IndexedDB и переживают перезагрузку страницы — кеш хранится до тех пор, пока его не очистить вручную кнопкой «Clear cache».
- Контроль квоты. Приложение следит за заполнением хранилища и останавливает кеширование новых тайлов при использовании более 95% доступного объёма, не затирая уже сохранённые данные.
- Панель статуса. Отображает состояние сети, количество закешированных тайлов, использование хранилища и элементы управления кешем.
- Повторные попытки. Неудавшиеся запросы тайлов автоматически повторяются до трёх раз с задержками.
Стек
Leaflet.js · IndexedDB · Fetch API. Весь проект — клиентский HTML/JavaScript без сборки и бэкенда.