jeffemmett
/
canvas-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
canvas-website/backlog/tasks/task-051 - Offline-storage-...

3.2 KiB
Raw Permalink Blame History

id title status assignee created_date updated_date labels dependencies priority
task-051 Offline storage and cold reload from offline state Done
2025-12-15 04:58 2025-12-25 23:38
feature
offline
storage
IndexedDB
high

Description

Implement offline storage fallback so that when a browser reloads without network connectivity, it automatically loads from local IndexedDB storage and renders the last known state of the board for that user.

Implementation Summary (Completed)

Changes Made:

  1. Board.tsx - Updated render condition to allow rendering when offline with local data (isOfflineWithLocalData flag)
  2. useAutomergeStoreV2 - Added isNetworkOnline parameter and offline fast path that immediately loads records from Automerge doc without waiting for network patches
  3. useAutomergeSyncRepo - Passes isNetworkOnline to useAutomergeStoreV2
  4. ConnectionStatusIndicator - Updated messaging to clarify users are viewing locally cached canvas when offline

How It Works:

  1. useAutomergeSyncRepo detects no network and loads data from IndexedDB
  2. useAutomergeStoreV2 receives handle with local data and detects offline state
  3. Offline Fast Path immediately loads records into TLDraw store
  4. Board.tsx renders with local data
  5. ConnectionStatusIndicator shows "Working Offline - Viewing locally saved canvas"
  6. When back online, Automerge automatically syncs via CRDT merge

Acceptance Criteria

  • #1 Board renders from local IndexedDB when browser reloads offline
  • #2 User sees 'Working Offline' indicator with clear messaging
  • #3 Changes made offline are saved locally
  • #4 Auto-sync when network connectivity returns
  • #5 No data loss during offline/online transitions

Implementation Notes

Testing Required

  • Test cold reload while offline (airplane mode)
  • Test with board containing various shape types
  • Test transition from offline to online (auto-sync)
  • Test making changes while offline and syncing
  • Verify no data loss scenarios

Commit: 4df9e42 pushed to dev branch

Code Review Complete (2025-12-25)

All acceptance criteria implemented:

AC #1 - Board renders from IndexedDB offline:

  • Board.tsx line 1225: isOfflineWithLocalData = !isNetworkOnline && hasStore
  • Line 1229: shouldRender = hasStore && (isSynced || isOfflineWithLocalData)

AC #2 - Working Offline indicator:

  • ConnectionStatusIndicator shows 'Working Offline' with purple badge
  • Detailed message explains local caching and auto-sync

AC #3 - Changes saved locally:

  • Automerge Repo uses IndexedDBStorageAdapter
  • Changes persisted via handle.change() automatically

AC #4 - Auto-sync on reconnect:

  • CloudflareAdapter has networkOnlineHandler/networkOfflineHandler
  • Triggers reconnect when network returns

AC #5 - No data loss:

  • CRDT merge semantics preserve all changes
  • JSON sync fallback also handles offline changes

Manual testing recommended:

  • Test in airplane mode with browser reload
  • Verify data persists across offline sessions
  • Test online/offline transitions