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.

1. Клонируйте репозиторий:

   git clone https://github.com/L00kAhead/pwa-map.git

2. Перейдите в папку проекта:

   cd pwa-map

   Убедитесь, что все файлы там.

3. Установите Node.js, если у вас его еще нет. Скачайте Node.js

4. Установите один из локальных серверов для запуска приложения:

• Вариант 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. Приложение откроется в браузере автоматически.

Если все пойдет правильно, вы увидите этот экран:

1. Разрешение Геолокации (Опционально): Если браузер запросит, разрешите доступ к вашему местоположению для центрирования карты. В противном случае карта будет отцентрирована на координатах по умолчанию.
2. Добавление Заметки:
   • Кликните в любом месте на карте, чтобы выбрать местоположение. Координаты автоматически появятся в форме.
   • Введите "Title" (Заголовок) и "Content" (Содержание) для вашей заметки в форме.
   • Нажмите "Save Note" (Сохранить заметку). Заметка появится в виде маркера на карте и в списке заметок.
3. Просмотр Заметок:
   • Заметки отображаются маркерами на карте. Кликните на маркер, чтобы увидеть всплывающее окно с заголовком и кратким содержанием.
   • Список "Notes in View" (Заметки в области просмотра) или "All Notes" (Все заметки) на больших экранах показывает детали заметок.
4. Редактирование Заметки:
   • Кликните на маркер заметки на карте.
   • Или кликните на элемент заметки в списке (или на кнопку "Edit" (Редактировать) рядом с ним).
   • Данные заметки загрузятся в форму. Измените их и нажмите "Update Note" (Обновить заметку).
5. Удаление Заметки:
   • Когда данные заметки загружены в форму для редактирования, нажмите кнопку "Delete Note" (Удалить заметку).
   • Или нажмите кнопку "Delete" (Удалить) рядом с заметкой в списке.
   • Подтвердите удаление при запросе.
6. Навигация по Карте: Перемещайте и масштабируйте карту. На небольших экранах список заметок будет обновляться, показывая только заметки в текущей видимой области карты.

Планшет/Просмотр на большом экране	Вот как это выглядит на смартфоне	Временный значок. При нажатии на карту

Форма для создания заметки	После создания заметки она будет выглядеть на карте так	Редактировать заметку

Заметки хранятся в 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.