Инструкция по PWA "Коллекционер"

📋 Оглавление

О приложении
Основные возможности
⚡ Оптимизация изображений (ВАЖНО!)
💾 Управление памятью и квотой
🔄 Экспорт / Импорт / Синхронизация
🚀 Как ускорить базу в 10 раз
❓ Частые вопросы

1. О приложении

"Коллекционер" — это прогрессивное веб-приложение (PWA) для ведения коллекций предметов (монеты, марки, книги, игрушки и т.д.).

Ключевая особенность: данные хранятся локально в вашем браузере (IndexedDB), а не в облаке.

✅ Работает офлайн, без интернета
✅ Быстрый доступ к коллекциям
⚠️ При очистке данных браузера коллекция может быть удалена
⚠️ Для переноса на другое устройство используйте Экспорт/Импорт

2. Основные возможности

Коллекции

Создавайте коллекции, группируйте предметы, добавляйте описания и характеристики по шаблонам.

Фотографии

Прикрепляйте фото к предметам. Поддержка сжатия, формата WebP и автоматических миниатюр.

Экспорт / Импорт

Резервное копирование в файл .json. Версионирование формата для совместимости.

Синхронизация

Перенос коллекций между устройствами через 6-значный код (требует интернет).

3. ⚡ Оптимизация изображений (КРИТИЧЕСКИ ВАЖНО!)

Правильная настройка сжатия — это экономия места в 10-20 раз и ускорение загрузки в 5 раз.

🔧 Как открыть настройки:

Прокрутите страницу в самый низ
Раскройте аккордеон "🔽 Резервирование и сохранность БД"
Нажмите кнопку "⚙️ Настройки изображений"

📊 Рекомендуемые параметры:

Параметр	Рекомендация	Эффект
Макс. ширина	1920 px (для экранов) или 1280 px (для экономии)	Уменьшает размер в 2-4 раза
Качество	70-80%	Визуально неотличимо, экономия 30-50%
Формат	WebP (если поддерживается) или JPEG	WebP экономит ещё 20-30% относительно JPEG

💡 Совет: Перед сохранением нажмите "🧪 Тест формата" — если превью отобразилось, WebP будет работать на вашем устройстве.

🔄 Оптимизация уже загруженных коллекций:

В настройках выберите нужные параметры
✅ Поставьте галочку "Оптимизировать изображения в уже созданных коллекциях"
Нажмите "💾 Сохранить настройки"
Дождитесь завершения прогресс-бара (100%)

⚠️ Важно: После оптимизации старые фото будут заменены на сжатые версии. Если вы хотите сохранить оригиналы — сначала сделайте Экспорт!

🖼️ Миниатюры (автоматически):

При оптимизации приложение создаёт две версии каждого фото:

full — полное изображение (для просмотра в карточке)
thumb — миниатюра 300px (для быстрого отображения в списке)

Благодаря этому список коллекций грузится мгновенно, даже если в базе тысячи фото.

4. 💾 Управление памятью и квотой

В нижней части страницы отображается индикатор:

💾 Занято: 14.2 МБ из 2.0 ГБ (1%)

📈 Что означают цвета:

🟢 Зеленый (<60%) — всё в порядке
🟡 Желтый (60-80%) — пора сделать Экспорт
🔴 Красный (>80%) — критично! Браузер может начать удалять данные

🚀 Лайфхак: Если индикатор показывает >80%, не паникуйте. Просто:

Сделайте Экспорт (резервную копию)
Оптимизируйте изображения (раздел 3)
Удалите ненужные коллекции
Индикатор вернётся в зелёную зону

🗑️ Что занимает место:

📷 Фотографии — до 95% объёма базы
📝 Текстовые описания — менее 1%
🏷️ Свойства и метаданные — ~4%

Вывод: оптимизация фото — самый эффективный способ освободить место.

5. 🔄 Экспорт / Импорт / Синхронизация

📤 Экспорт (резервная копия)

Раскройте "🔽 Резервирование и сохранность БД"
Нажмите "Экспорт"
Скачается файл collections_YYYY-MM-DD.json
Сохраните его в надёжное место (облако, флешка, второй диск)

📥 Импорт (восстановление)

Нажмите "Импорт" и выберите файл .json
Если файл содержит тяжёлые фото, появится диалог:

✅ Оптимизировать	Сжать фото по текущим настройкам + создать миниатюры
⏭️ Без изменений	Загрузить как есть (быстро, но база будет большой)
⚙️ Отмена → Настройки	Сначала изменить параметры сжатия, затем импортировать заново

⚠️ Внимание: Импорт полностью заменяет текущие коллекции. Перед импортом всегда делайте Экспорт текущих данных!

🔗 Синхронизация по коду (между устройствами)

На устройстве-источнике: нажмите "Выгрузить на другое устройство" → запомните 6-значный код
На целевом устройстве: нажмите "Загрузить с другого устройства" → введите код
Дождитесь завершения и перезагрузки

Код одноразовый и действует ограниченное время
Требуется интернет на обоих устройствах
Данные на целевом устройстве будут полностью заменены

6. 🚀 Как ускорить базу в 10 раз (ПРАКТИЧЕСКИЕ СОВЕТЫ)

Эти шаги гарантированно ускорят работу приложения и уменьшат размер базы.

✅ Шаг 1: Оптимизируйте фото ПРИ ИМПОРТЕ

При импорте большого файла всегда выбирайте "✅ Оптимизировать". Это:

Сразу создаст миниатюры для быстрого рендеринга
Уменьшит размер базы в 10-20 раз
Избежит необходимости повторной оптимизации

✅ Шаг 2: Используйте разумные параметры

Не гонитесь за максимальным качеством:

1920px / 70% — идеально для просмотра на экране
1280px / 80% — если важна экономия места
WebP — если браузер поддерживает (экономия +20-30%)

Разница между 100% и 70% качества визуально почти незаметна, а размер файла уменьшается в 2-3 раза.

✅ Шаг 3: Регулярно делайте "чистку"

Раз в месяц проверяйте индикатор памяти
Удаляйте коллекции, которые больше не нужны
Если база выросла — запустите оптимизацию с галочкой "для уже созданных коллекций"

✅ Шаг 4: Готовьте фото ДО загрузки

Если вы добавляете фото вручную:

Уменьшайте их в редакторе до 1920px по широкой стороне
Сохраняйте в формате JPEG с качеством 80-90%
Это ускорит загрузку в приложение и уменьшит итоговый размер

📊 Ожидаемый результат:

Показатель	Без оптимизации	С оптимизацией
Размер базы (100 фото)	~300 МБ	~15-25 МБ
Время загрузки списка	5-10 сек	<1 сек
Время экспорта	2-5 мин	10-30 сек
Риск переполнения	Высокий	Минимальный

7. ❓ Частые вопросы

Коллекции хранятся на вашем устройстве, внутри браузера (IndexedDB). Это удобно — можно работать без интернета. Но это не аккаунт в облаке: на другом устройстве данных не будет, пока вы их не перенесёте через Экспорт/Импорт или код синхронизации.

Оптимизация применяет сжатие: уменьшает разрешение, снижает качество, может конвертировать в WebP. Это намеренное поведение для экономии места. Если вы хотите сохранить оригиналы — при импорте выбирайте "⏭️ Без изменений" или предварительно сделайте Экспорт.

Скорее всего, проблема в размере фото. Выполните:

Откройте "⚙️ Настройки изображений"
Установите 1920px / 70% / WebP
✅ Поставьте галочку "Оптимизировать уже созданные коллекции"
Сохраните и дождитесь завершения

После этого список коллекций должен грузиться мгновенно.

Нет, оптимизация необратима (сжатые данные не восстанавливаются до оригинала). Поэтому всегда делайте Экспорт перед оптимизацией, если хотите сохранить возможность возврата к исходным фото.

При открытии настроек приложение проверяет поддержку формата. Если ваш браузер не умеет создавать WebP, опция будет заблокирована. Если вы импортировали коллекцию с WebP на неподдерживающее устройство — фото могут не отобразиться. В этом случае:

Смените формат в настройках на JPEG
Запустите повторную оптимизацию с галочкой "для уже созданных"
Все фото будут переконвертированы в универсальный JPEG

Откройте DevTools (F12) → Console и вставьте:

(async () => { const db = await new Promise(r => { const req = indexedDB.open("CollectionsDB"); req.onsuccess = () => r(req.result); }); const tx = db.transaction(["collections"], "readonly"); const store = tx.objectStore("collections"); const all = await new Promise(r => { const req = store.getAll(); req.onsuccess = () => r(req.result); }); let newFmt = 0, oldFmt = 0; all.forEach(c => c.items?.forEach(i => { if (i.images?.[0]?.full) newFmt++; else if (typeof i.images?.[0] === "string") oldFmt++; })); console.table({newFormat: newFmt, oldFormat: oldFmt, status: oldFmt===0?"✅ ALL OPTIMIZED":"⚠️ NEEDS OPTIMIZATION"}); })();

Если oldFormat: 0 — все фото имеют миниатюры.

Главное правило: делайте Экспорт регулярно, оптимизируйте фото при импорте, и ваша база всегда будет быстрой и компактной.