Перейти к содержанию

Progressive Web App (PWA)

Уровень: L2 (details) | ← Назад

Обзор

Приложение Plechiki реализовано как Progressive Web App с полной offline-поддержкой. Используется vite-plugin-pwa (Workbox) для автоматической генерации Service Worker с runtime caching.

Sequence Diagram: Жизненный цикл Service Worker

sequenceDiagram
    participant Browser
    participant SW as Service Worker
    participant Cache as Cache Storage
    participant Net as Network
    participant UI as React App

    Note over Browser,SW: Установка (первый визит)
    Browser->>SW: register()
    SW->>Cache: precache (js, css, html, icons)
    SW-->>Browser: onOfflineReady()

    Note over Browser,SW: Fetch (runtime)
    UI->>SW: fetch(/api/reference/colors)
    SW->>Cache: check 'reference-api'

    alt StaleWhileRevalidate
        Cache-->>UI: cached response (instant)
        SW->>Net: revalidate
        Net-->>Cache: update cache
    end

    UI->>SW: fetch(minio-api.../photo.jpg)
    SW->>Cache: check 'media-minio'

    alt CacheFirst
        Cache-->>UI: cached (if exists)
    else Cache miss
        SW->>Net: fetch photo
        Net-->>Cache: store
        Net-->>UI: response
    end

    Note over Browser,SW: Обновление
    Browser->>SW: Check for new SW
    SW-->>Browser: onNeedRefresh()
    Browser->>UI: show update prompt
    UI->>Browser: user clicks "Update"
    Browser->>SW: skipWaiting + reload

Диаграмма

Стратегии кеширования

graph LR
    subgraph "CacheFirst (офлайн-гарантия)"
        Media[MinIO Media<br/>2000 entries, 30 days]
        MediaSvc[Media Service<br/>2000 entries, 30 days]
        Images[Статич. изображения<br/>1000 entries, 7 days]
        Fonts[Шрифты<br/>30 days]
    end

    subgraph "StaleWhileRevalidate"
        RefAPI[Reference API<br/>20 entries, 7 days]
    end

    subgraph "Precache (build-time)"
        Static[JS / CSS / HTML<br/>icons, fonts]
    end

Диаграмма

URL Pattern Стратегия Cache Name Max Entries TTL
/api/reference/* StaleWhileRevalidate reference-api 20 7 дней
minio-api.plechiki.ru.* CacheFirst media-minio 2000 30 дней
media.plechiki.ru.* CacheFirst media-service 2000 30 дней
*.png/jpg/jpeg/webp/svg CacheFirst images 1000 7 дней
*.woff2/ttf CacheFirst fonts — 30 дней
*.js/css/html Precache — — Build-time

Manifest

Параметр Значение
name Плечики — цифровой гардероб
short_name Плечики
display standalone
theme_color #D18A62
background_color #F7F4EF
start_url /
Icons 192×192, 512×512, 512×512 maskable

Регистрация и обновление

Service Worker регистрируется в main.tsx через registerType: 'autoUpdate':

  1. Первый визит → SW устанавливается, precache загружается
  2. Повторный визит → SW проверяет обновления в фоне
  3. Обновление доступно → onNeedRefresh() → UI показывает prompt
  4. Пользователь подтверждает → window.location.reload()

Навигация