PWA + Metacom + Local-first

Готовый стек для local-first web-приложения: PWA на клиенте + Service Worker как прокси Metacom + OPFS для локального хранения + Node.js + WebSocket для синхронизации.

Полная архитектура

Браузер:
  ┌─ UI (любой framework)
  ├─ Metacom client (proxy через SW)
  ├─ Business logic (внутри SW или вкладки)
  ├─ Local storage: OPFS + IndexedDB
  └─ Service Worker
        ↓ WebSocket
Сервер:
  └─ Impress + Metacom + Global Storage

Слои

Слой Технология
UI React / Vue / Solid / vanilla
Network proxy Metacom Proxy + MessagePort API
Background Service Worker
Sync transport WebSocket (основной), WebRTC (P2P)
Local persistence OPFS (файлы) + IndexedDB (структура)
Conflict resolution CRDT
Discovery Blockchain (опционально)
Crypto Web Crypto API (подписи)

Цикл работы

  1. Приложение открывается → Service Worker регистрируется.
  2. Service Worker открывает WebSocket к серверу.
  3. UI ↔ Service Worker через MessagePort.
  4. Запись данных → локальный OPFS/IndexedDB.
  5. Service Worker асинхронно синхронизирует через CRDT с сервером.
  6. Изменения с сервера → обновление локального стора → UI реагирует.

Offline режим

  • При потере связи UI продолжает работать с локальным сторджем.
  • Изменения копятся локально.
  • При восстановлении сети — Service Worker синхронизирует через CRDT.

PWA-установка даёт права

После «Add to Home Screen»:

  • Полноэкранный режим без браузерной обвязки.
  • Push-уведомления.
  • Доступ к OPFS без квот.
  • Service Worker живёт дольше (background sync).

Введение для разработчика

Пишется (2025-08-04):

  • «Один Service Worker на много вкладок».
  • «SW как прокси с кэшем для fetch».
  • «Сервер инициирует обновление кэша».
  • «Broadcast между табами без сервера».
  • «Установка PWA даёт расширенные права».

Эволюция в курсе автора

Курс рисуется как путь:

  1. WebSocket-чат на чистой ноде.
    • Service Worker (один WS на вкладки).
    • OPFS (локальное хранение).
    • CRDT (merge без конфликтов).
    • бизнес-логика внутри SW.
    • Global Storage с подменяемыми стратегиями.
    • P2P через WebRTC, чат-боты, full-text search, smart-контракты.

Где это пробовать

  • Yjs + y-protocols — production-ready CRDT для документов.
  • Automerge — CRDT для произвольных структур.
  • Replicache — мейнстрим local-first для бизнес-приложений.
  • PouchDB ↔ CouchDB — sync через replication API.
  • Metarhia GlobalStorage — в разработке, авторский подход.

🎓 Источники

См. также