Offline Mode

​

Overview

• Full read access to previously loaded data
• Queue-based write operations
• Automatic background sync when online
• Conflict resolution for concurrent edits

​

How Offline Mode Works

​

Data Storage Strategy

​

Network Detection

// Network status monitoring
window.addEventListener('online', handleOnline);
window.addEventListener('offline', handleOffline);

function handleOffline() {
  // Pause real-time sync
  // Enable offline mode indicator
  // Queue pending operations
}

function handleOnline() {
  // Resume sync
  // Process queued operations
  // Update UI to online state
}

​

Offline Workflows

​

Reading Data

• Patient records (pets, owners, medical history)
• Appointment schedule
• Medical record templates
• Recent SOAP notes
• Clinical insights from last session

• Real-time call monitoring
• New AI-generated content (requires server)
• Fresh dashboard metrics
• New appointment bookings from phone system

​

Creating Records Offline

const payload = {
  id: `local-${Date.now()}`,
  patientId: selectedPatient,
  soap: noteContent,
  status: 'draft',
  offline: true,
  createdAt: new Date().toISOString(),
};
localStorage.setItem('vetassist_records', JSON.stringify(records));

​

Updating Existing Data

1. No conflict: Local version is newer → upload to server
2. Server newer: Prompt user to review changes and merge manually
3. Concurrent edits: Show diff view and allow user to choose version

​

Offline Features by Section

​

Dictation & SOAP Notes

• Audio recording (stored locally as WebM)
• Manual text entry
• File upload (PDF, images, audio)
• Draft saving

• AI transcription (OpenAI Whisper API)
• SOAP note generation (OpenAI GPT-4)
• Clinical insights

const SpeechRecognitionCtor = 
  window.SpeechRecognition || window.webkitSpeechRecognition;

const recognition = new SpeechRecognitionCtor();
recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = 'en-US';

​

Patient Records

• View all previously loaded patient profiles
• Search and filter local patient database
• View medical history and attachments
• Add photos using device camera

• Update patient information
• Add vaccination records
• Create new patients

​

Appointments

• Today’s appointment schedule
• Next 7 days of appointments
• Appointment details and notes

• Mark appointments as checked-in
• Add appointment notes
• Update appointment status

• Cannot create new appointments (requires server validation)
• No real-time updates from AI phone system

​

Dashboard

<div className="text-xs text-muted-foreground">
  Last synced: {lastSyncTime}
  {isOffline && <Badge variant="outline">Offline</Badge>}
</div>

​

Sync Queue Management

​

Queue Structure

interface QueuedOperation {
  id: string;
  type: 'create' | 'update' | 'delete';
  resource: 'pets' | 'appointments' | 'medical_records';
  data: any;
  timestamp: string;
  retries: number;
  status: 'pending' | 'processing' | 'failed';
}

​

Sync Process

​

Retry Logic

async function processSyncQueue() {
  const queue = getSyncQueue();
  
  for (const operation of queue) {
    try {
      await syncOperation(operation);
      removeFromQueue(operation.id);
    } catch (error) {
      operation.retries++;
      
      if (operation.retries >= 3) {
        operation.status = 'failed';
        notifyUser('Sync failed', operation);
      } else {
        // Exponential backoff
        await sleep(1000 * Math.pow(2, operation.retries));
      }
    }
  }
}

​

Storage Limits

​

iOS Storage Quotas

​

Managing Storage

1. Store only essential data locally (last 30 days of records)
2. Compress large files before storing
3. Periodically clean up old cached data
4. Prompt user when storage is >80% full

async function cleanupOldData() {
  const thirtyDaysAgo = Date.now() - (30 * 24 * 60 * 60 * 1000);
  
  // Remove old medical records
  const records = await db.medicalRecords
    .where('createdAt')
    .below(thirtyDaysAgo)
    .delete();
  
  // Keep only recent photos
  const photos = await db.photos
    .where('uploadedAt')
    .below(thirtyDaysAgo)
    .delete();
    
  console.log(`Cleaned up ${records + photos} old items`);
}

​

Offline Indicators

​

UI Feedback

​

User Messaging

You're now offline. Changes will sync when connection is restored.

Back online! Syncing 3 pending records...

All changes synced successfully.

Failed to sync 1 record. Tap to retry.

​

Testing Offline Mode

​

Simulating Offline Conditions

​

Test Scenarios

1. Create new SOAP note while offline → go online → verify sync
2. Update patient record offline → update same record online elsewhere → test conflict resolution
3. Record audio offline → upload when online → verify transcription
4. Load app offline → verify dashboard shows cached data
5. Toggle network rapidly → ensure queue doesn’t duplicate operations

​

Advanced Configuration

​

Sync Settings

const offlineConfig = {
  // Enable offline mode
  enabled: true,
  
  // Max items to store locally
  maxLocalRecords: 500,
  
  // Auto-sync interval when online (ms)
  syncInterval: 30000,
  
  // Max retry attempts for failed syncs
  maxRetries: 3,
  
  // Items to keep offline (days)
  retentionDays: 30,
  
  // Enable conflict detection
  detectConflicts: true,
};

​

Background Sync

1. Select project → Signing & Capabilities
2. Add Background Modes capability
3. Check Background fetch
4. Check Background processing

import BackgroundTasks

BGTaskScheduler.shared.register(
  forTaskWithIdentifier: "com.pawandcare.vetassist.sync",
  using: nil
) { task in
  handleSyncTask(task: task as! BGProcessingTask)
}

​

Troubleshooting

​

Sync Not Working

• Verify network connectivity with ping to server
• Check browser console for sync errors
• Inspect sync queue: localStorage.getItem('sync_queue')
• Ensure Supabase client is initialized correctly

​

Data Loss

• Never clear localStorage without user confirmation
• Always backup queued operations before clearing
• Use Supabase real-time subscriptions for critical data
• Implement periodic cloud backups

​

Duplicate Records

• Multiple sync attempts without proper deduplication
• Concurrent writes from different devices

• Use unique ID generation (local-${Date.now()}-${Math.random()})
• Check for existing records before creating new ones
• Implement idempotent sync operations

​

Best Practices

​

Next Steps