PWA Заметки

Прогрессивное веб-приложение (PWA) для создания и управления заметками с поддержкой офлайн-режима.

Основные функции

• Создание, редактирование и удаление заметок
• Работа в офлайн-режиме
• Сохранение данных в IndexedDB
• Возможность установки на домашний экран
• Адаптивный дизайн для мобильных устройств

Технический стек

• React 18
• TypeScript
• Vite
• PWA (Service Worker, Web App Manifest)
• IndexedDB (Dexie.js)
• CSS-модули

Установка и запуск

Требования

• Node.js 16+ и npm

Установка зависимостей

# Установка зависимостей
npm install

Запуск в режиме разработки

# Запуск сервера разработки
npm run dev

Приложение будет доступно по адресу http://localhost:5173/

Сборка для продакшена

# Сборка для продакшена
npm run build

Локальный предпросмотр продакшен-сборки

# Предпросмотр продакшен-сборки
npm run preview

Приложение будет доступно по адресу http://localhost:4173/

PWA функции

Для корректной работы PWA-функций необходимо:

1. Собрать приложение для продакшена (npm run build)
2. Использовать HTTPS или localhost
3. Предварительно загрузить необходимые данные в приложении
4. Проверить работу в офлайн-режиме (можно отключить сеть в инструментах разработчика браузера)

Установка на устройство

Android

1. Откройте приложение в Chrome
2. Нажмите на меню (три точки)
3. Выберите "Установить приложение"

iOS (Safari)

1. Откройте приложение в Safari
2. Нажмите на кнопку "Поделиться"
3. Выберите "На экран «Домой»"

Структура проекта

public/           # Статические файлы
  ├─ icons/       # Иконки для PWA
  ├─ manifest.json # Манифест для PWA
src/
  ├─ components/  # React компоненты
  ├─ db.ts        # Настройка IndexedDB с Dexie
  ├─ App.tsx      # Главный компонент приложения
  ├─ main.tsx     # Точка входа React приложения
  ├─ App.css      # Стили для App.tsx
  └─ index.css    # Глобальные стили

Лицензия

MIT