PinItDown — это прогрессивное веб-приложение (PWA), которое предоставляет пользователю удобный интерфейс через файл index.html
, стилизованный с помощью style.css
. Основная логика приложения реализована в app.js
, который отвечает за операции создания, чтения, обновления и удаления заметок (CRUD). Эти заметки сохраняются локально в браузере с помощью localStorage
, что обеспечивает их сохранность между сессиями. Для отображения интерактивной карты используется библиотека Leaflet.js,
позволяющая пользователю прикреплять заметки к определённым географическим точкам. Чтобы обеспечить работу в офлайн-режиме и ускоренную загрузку, в app.js регистрируется service worker (service-worker.js)
— фоновый скрипт, который перехватывает все сетевые запросы на ресурсы приложения (HTML, CSS, JS, тайлы карты и др.).
Процесс работы следующий:
- Сначала service worker проверяет, есть ли нужный ресурс в кэше (используется Cache API).
- Если ресурс уже закэширован — он немедленно возвращается приложению, обеспечивая быстрый отклик и работу без подключения к сети.
- Если ресурс отсутствует в кэше — он загружается из интернета, может быть сохранён в кэш, а затем передаётся приложению.
Файл manifest.json
содержит метаданные (название, иконки, цвет темы, стартовая страница и др.), благодаря которым приложение можно установить на устройство.
- HTML5
- CSS3 (с адаптивным подходом "mobile-first")
- JavaScript (ES6+)
- Node.js для локального запуска сервера
- Leaflet.js - Библиотека для интерактивных карт
- OpenStreetMap - Поставщик картографических данных
- Принципы Progressive Web App (PWA):
- Service Worker для кэширования и офлайн-поддержки.
- Web App Manifest для возможности установки и свойств PWA.
-
Клонируйте репозиторий:
git clone https://github.com/L00kAhead/pwa-map.git
-
Перейдите в папку проекта:
cd pwa-map
Убедитесь, что все файлы там.
-
Установите Node.js, если у вас его еще нет. Скачайте Node.js
-
Установите один из локальных серверов для запуска приложения:
-
Вариант 1: установите
live-server
глобально и запустите его:npm install -g live-server live-server
После запуска сервер откроется по адресу 127.0.0.1:8080 или другому доступному порту.
-
Вариант 2: используйте http-server:
npm install -g http-server http-server -c-1
-
Альтернатива: если вы используете VS Code, установите расширение Live Server, затем щелкните правой кнопкой мыши файл index.html и откройте его с помощью Live Server. Приложение откроется в браузере автоматически.
Если все пойдет правильно, вы увидите этот экран:
- Разрешение Геолокации (Опционально): Если браузер запросит, разрешите доступ к вашему местоположению для центрирования карты. В противном случае карта будет отцентрирована на координатах по умолчанию.
- Добавление Заметки:
- Кликните в любом месте на карте, чтобы выбрать местоположение. Координаты автоматически появятся в форме.
- Введите "Title" (Заголовок) и "Content" (Содержание) для вашей заметки в форме.
- Нажмите "Save Note" (Сохранить заметку). Заметка появится в виде маркера на карте и в списке заметок.
- Просмотр Заметок:
- Заметки отображаются маркерами на карте. Кликните на маркер, чтобы увидеть всплывающее окно с заголовком и кратким содержанием.
- Список "Notes in View" (Заметки в области просмотра) или "All Notes" (Все заметки) на больших экранах показывает детали заметок.
- Редактирование Заметки:
- Кликните на маркер заметки на карте.
- Или кликните на элемент заметки в списке (или на кнопку "Edit" (Редактировать) рядом с ним).
- Данные заметки загрузятся в форму. Измените их и нажмите "Update Note" (Обновить заметку).
- Удаление Заметки:
- Когда данные заметки загружены в форму для редактирования, нажмите кнопку "Delete Note" (Удалить заметку).
- Или нажмите кнопку "Delete" (Удалить) рядом с заметкой в списке.
- Подтвердите удаление при запросе.
- Навигация по Карте: Перемещайте и масштабируйте карту. На небольших экранах список заметок будет обновляться, показывая только заметки в текущей видимой области карты.
Планшет/Просмотр на большом экране | Вот как это выглядит на смартфоне | Временный значок. При нажатии на карту |
---|---|---|
![]() |
![]() |
![]() |
Форма для создания заметки | После создания заметки она будет выглядеть на карте так | Редактировать заметку |
---|---|---|
![]() |
![]() |
![]() |
Заметки хранятся в localStorage | Ресурсы кэшируются в хранилище |
---|---|
![]() |
![]() |
.
├── app.js
├── diagram
│ └── pid-pwa.png
├── icons
│ ├── icon-144x144.png
│ ├── icon-152x152.png
│ ├── icon-192x192.png
│ ├── icon-512x512.png
│ ├── icon-72x72.png
│ ├── icon-96x96.png
│ └── mark.png
├── index.html
├── manifest.json
├── readme.md
├── screenshots
│ ├── cacheStorage.png
│ ├── edit-delete-note.png
│ ├── homescreen.png
│ ├── localStorage.png
│ ├── mobile-view.png
│ ├── multiple-notes.png
│ ├── note-form.png
│ ├── tap-to-see-created-note.png
│ └── temp-icon.png
├── service-worker.js
└── style.css
Этот проект распространяется под лицензией MIT. Подробности смотрите в файле LICENSE.
Если у вас есть предложения, баг-репорты или вы хотите внести вклад в развитие приложения, создайте issue или pull request в репозитории на GitHub.