Offline-first çalışan bir web uygulamasını (ör. not alma uygulaması) nasıl tasarlarsınız?

Offline-first'te veri önce lokalde (IndexedDB) okunur ve yazılır, ağ ise arka planda senkronizasyon için kullanılır. UI ağ durumundan bağımsız olarak anında tepki verir.

Parçalar

1. Service Worker: Uygulama kabuğunu (HTML/JS/CSS) ve statik varlıkları önbelleğe alır (Workbox ile).
2. IndexedDB: Asıl veri deposu (Dexie gibi bir sarmalayıcıyla).
3. Outbox (bekleyen işlemler kuyruğu): Offline yapılan değişiklikler {id, op, payload, timestamp} olarak saklanır, bağlantı gelince sırayla sunucuya gönderilir.
4. Senkronizasyon katmanı: Sunucudan değişiklikleri çekme (since=lastSyncAt), çakışma çözme.

Önbellek stratejileri

Çakışma çözümü

• Last-write-wins (basit, veri kaybı riski).
• Alan bazlı birleştirme veya versiyon numarası ile çakışmayı kullanıcıya gösterme.
• Eşzamanlı düzenleme gerekiyorsa CRDT (Yjs, Automerge).

Dikkat edilecekler

• navigator.onLine güvenilir değildir; gerçek bağlantıyı istek sonucu belirler.
• Background Sync API sadece Chromium tabanlı tarayıcılarda vardır; diğerlerinde uygulama açılınca/online event'inde kuyruğu boşaltın.
• Depolama kotası ve tarayıcının veriyi silmesi: navigator.storage.persist() isteyin.
• Service worker güncellemesi: yeni sürüm hazır olduğunda kullanıcıya "yenile" bildirimi gösterin.
• UI'da senkronizasyon durumunu gösterin (kaydedildi / bekliyor / hata).