1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

// Battery-efficient mobile sync patterns
 
class MobileSyncManager {
  private pendingChanges: Change[] = [];
  private syncTimeout: NodeJS.Timeout | null = null;
  
  // Instead of syncing immediately, batch changes
  queueChange(change: Change): void {
    this.pendingChanges.push(change);
    
    // Batch changes over a window to reduce radio wake-ups
    if (!this.syncTimeout) {
      this.syncTimeout = setTimeout(() => this.sync(), 5000);
    }
  }
  
  // Sync efficiently - batch all pending changes
  private async sync(): Promise<void> {
    this.syncTimeout = null;
    if (this.pendingChanges.length === 0) return;
    
    // Check battery state - defer non-critical sync if low battery
    const battery = await navigator.getBattery?.();
    if (battery && battery.level < 0.15 && !this.hasUrgentChanges()) {
      // Low battery, defer non-urgent sync
      this.scheduleDefferredSync();
      return;
    }
    
    // Single request with all changes (one radio wake-up)
    const changes = [...this.pendingChanges];
    this.pendingChanges = [];
    
    try {
      await api.batchSync(changes);
    } catch (error) {
      // Re-queue on failure
      this.pendingChanges = [...changes, ...this.pendingChanges];
    }
  }
  
  // Use push instead of poll for real-time updates
  setupRealTimeUpdates(): void {
    // Push notifications are far more power-efficient than polling
    // OS handles delivery; no constant network activity
    
    // BAD: Polling every 30 seconds
    // setInterval(() => this.checkForUpdates(), 30000);
    
    // GOOD: Push notifications from server
    messaging.onMessage((message) => {
      if (message.data.type === 'sync_needed') {
        this.sync();
      }
    });
  }
  
  // Use system-provided sync opportunities
  registerBackgroundSync(): void {
    // iOS: Background App Refresh
    // Android: WorkManager
    // Web: Background Sync API
    
    if ('serviceWorker' in navigator && 'sync' in ServiceWorkerRegistration.prototype) {
      navigator.serviceWorker.ready.then((registration) => {
        // Browser will invoke sync when it's convenient (charging, on WiFi, etc.)
        return registration.sync.register('background-sync');
      });
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

// Mobile storage management for thick clients
 
class MobileStorageManager {
  // Check available quota before heavy writes
  async checkStorageQuota(): Promise<StorageEstimate> {
    if ('storage' in navigator && 'estimate' in navigator.storage) {
      const estimate = await navigator.storage.estimate();
      return {
        quota: estimate.quota ?? 0,
        usage: estimate.usage ?? 0,
        available: (estimate.quota ?? 0) - (estimate.usage ?? 0),
        percentUsed: ((estimate.usage ?? 0) / (estimate.quota ?? 1)) * 100
      };
    }
    // Fallback for older browsers
    return { quota: 50 * 1024 * 1024, usage: 0, available: 50 * 1024 * 1024, percentUsed: 0 };
  }
  
  // Request persistent storage (reduces eviction risk)
  async requestPersistence(): Promise<boolean> {
    if ('storage' in navigator && 'persist' in navigator.storage) {
      const isPersisted = await navigator.storage.persist();
      console.log(`Storage persistence: ${isPersisted ? 'granted' : 'denied'}`);
      return isPersisted;
    }
    return false;
  }
  
  // Intelligent cache prioritization
  async pruneCache(targetFreeBytes: number): Promise<void> {
    const db = await openDatabase();
    
    // Get all cached items with metadata
    const items = await db.table('cached_data').toArray();
    
    // Score items for eviction (lower score = evict first)
    const scoredItems = items.map(item => ({
      ...item,
      evictionScore: this.calculateEvictionScore(item)
    })).sort((a, b) => a.evictionScore - b.evictionScore);
    
    // Evict lowest-scored items until we have enough space
    let freedBytes = 0;
    for (const item of scoredItems) {
      if (freedBytes >= targetFreeBytes) break;
      
      await db.table('cached_data').delete(item.id);
      freedBytes += item.sizeBytes;
    }
  }
  
  private calculateEvictionScore(item: CachedItem): number {
    // Higher score = keep longer
    let score = 0;
    
    // Recency: recently accessed = higher score
    const hoursSinceAccess = (Date.now() - item.lastAccessedAt) / (1000 * 60 * 60);
    score += Math.max(0, 100 - hoursSinceAccess);
    
    // Frequency: frequently accessed = higher score
    score += Math.min(item.accessCount * 5, 100);
    
    // User-created content = much higher score (don't lose user data!)
    if (item.isUserGenerated) score += 500;
    
    // Pending sync = never evict
    if (item.pendingSync) score += 1000;
    
    return score;
  }
  
  // Detect and handle storage eviction
  async detectEviction(): Promise<boolean> {
    const lastKnownVersion = localStorage.getItem('db_version');
    const currentDb = await openDatabase();
    
    if (lastKnownVersion && !currentDb.isOpen) {
      // Database was evicted - need to re-sync from server
      return true;
    }
    return false;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

// React Native thick client capabilities example
 
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Camera } from 'react-native-camera';
import NetInfo from '@react-native-community/netinfo';
import BackgroundFetch from 'react-native-background-fetch';
import PushNotification from 'react-native-push-notification';
 
// Native thick client: Robust local storage
async function saveOffline(key: string, data: any): Promise<void> {
  // AsyncStorage persists reliably (unlike web IndexedDB eviction)
  await AsyncStorage.setItem(key, JSON.stringify(data));
}
 
// Native thick client: Background sync
function setupBackgroundSync(): void {
  BackgroundFetch.configure({
    minimumFetchInterval: 15, // minutes
    enableHeadless: true,
    startOnBoot: true,
  }, async (taskId) => {
    // This runs even when app is closed
    await syncPendingChanges();
    BackgroundFetch.finish(taskId);
  });
}
 
// Native thick client: Network awareness
function setupNetworkMonitoring(): void {
  NetInfo.addEventListener(state => {
    if (state.isConnected && state.isInternetReachable) {
      // Regained connectivity - sync immediately
      syncPendingChanges();
    }
  });
}
 
// Native thick client: Push notifications
function setupPushNotifications(): void {
  PushNotification.configure({
    onNotification: function(notification) {
      // Handle notification - maybe trigger sync
      if (notification.data.type === 'new_data') {
        syncFromServer();
      }
    },
  });
}
 
// Native thick client: Advanced camera
async function captureWithProcessing(): Promise<void> {
  const camera = Camera.current;
  const photo = await camera.takePictureAsync({
    quality: 0.8,
    exif: true,
    // Native: Full camera control
  });
  
  // Local processing before upload
  const processed = await applyFiltersLocally(photo);
  await saveOffline('pending_upload', processed);
  await uploadWhenOnline(processed);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

// PWA offline strategy for mobile
 
// service-worker.ts
const CACHE_VERSION = 'v1';
const APP_SHELL_CACHE = `app-shell-${CACHE_VERSION}`;
const DATA_CACHE = `data-${CACHE_VERSION}`;
 
// Precache app shell for instant launch
const APP_SHELL_FILES = [
  '/',
  '/index.html',
  '/app.js',
  '/app.css',
  '/manifest.json',
  // Critical images and fonts
];
 
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(APP_SHELL_CACHE)
      .then(cache => cache.addAll(APP_SHELL_FILES))
      .then(() => self.skipWaiting())
  );
});
 
// Serve app shell from cache (instant launch)
// Fetch data from network with cache fallback
self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  
  // App shell: cache-first for instant loading
  if (url.pathname === '/' || url.pathname.endsWith('.html')) {
    event.respondWith(
      caches.match(event.request)
        .then(cached => cached || fetch(event.request))
    );
    return;
  }
  
  // API data: network-first with cache fallback
  if (url.pathname.startsWith('/api/')) {
    event.respondWith(
      fetch(event.request)
        .then(response => {
          // Cache successful responses
          if (response.ok) {
            const clone = response.clone();
            caches.open(DATA_CACHE).then(cache => cache.put(event.request, clone));
          }
          return response;
        })
        .catch(() => caches.match(event.request))
    );
    return;
  }
  
  // Static assets: cache-first
  event.respondWith(
    caches.match(event.request)
      .then(cached => cached || fetch(event.request))
  );
});
 
// Handle iOS storage eviction gracefully
async function handleStorageEviction(): Promise<void> {
  // Check if our IndexedDB was cleared
  const db = await openDatabase();
  const hasData = await db.table('user_data').count() > 0;
  
  if (!hasData && wasLoggedIn()) {
    // Data was evicted - show message and re-sync
    showResyncing Message();
    await resyncFromServer();
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

// App Shell pattern for fast mobile launch
 
// 1. App shell loads instantly (cached by service worker)
function App() {
  return (
    <AppShell>
      <Header />
      <Navigation />
      <MainContent /> {/* Data fetched after shell renders */}
      <TabBar />
    </AppShell>
  );
}
 
// 2. Content loads data after shell is visible
function MainContent() {
  // Show cached data immediately if available
  const cachedData = useCachedData('feed');
  // Then fetch fresh data in background
  const { data, isLoading } = useQuery('feed', fetchFeed, {
    initialData: cachedData,
    staleTime: 30000, // Cached data is valid for 30s
  });
  
  // User sees content instantly (cached), then it refreshes
  return (
    <div>
      {cachedData && <FeedList items={cachedData} />}
      {isLoading && !cachedData && <FeedSkeleton />}
      {data && <FeedList items={data} />}
    </div>
  );
}
 
// 3. Prefetch likely-needed data
function Navigation() {
  const prefetch = usePrefetch();
  
  return (
    <nav>
      <NavItem 
        to="/feed" 
        onHover={() => prefetch('feed')}
      />
      <NavItem 
        to="/profile" 
        onHover={() => prefetch('profile')}
      />
    </nav>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

// Offline-first pattern for mobile apps
 
class OfflineFirstClient {
  private db: LocalDatabase;
  private syncManager: SyncManager;
  
  async createItem(item: Item): Promise<Item> {
    // 1. Generate local ID
    const localItem = {
      ...item,
      id: generateLocalId(),
      syncStatus: 'pending',
      createdAt: Date.now(),
    };
    
    // 2. Save locally FIRST - this is instant
    await this.db.items.add(localItem);
    
    // 3. Update UI immediately (optimistic)
    this.notifyListeners('item:created', localItem);
    
    // 4. Queue for sync
    this.syncManager.queue({
      type: 'create',
      entity: 'item',
      data: localItem,
    });
    
    // 5. Attempt sync if online
    if (navigator.onLine) {
      this.syncManager.syncNow();
    }
    
    // User sees result instantly, regardless of network
    return localItem;
  }
  
  async getItems(): Promise<Item[]> {
    // Always read from local database
    // This is instant - no network wait
    return this.db.items.toArray();
  }
  
  async syncFromServer(): Promise<void> {
    if (!navigator.onLine) return;
    
    const lastSyncTime = await this.db.getSyncTimestamp();
    const changes = await api.getChangesSince(lastSyncTime);
    
    for (const change of changes) {
      if (change.type === 'upsert') {
        await this.db.items.put(change.data);
      } else if (change.type === 'delete') {
        await this.db.items.delete(change.id);
      }
    }
    
    await this.db.setSyncTimestamp(Date.now());
    this.notifyListeners('sync:complete');
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

// Smart sync: sync when conditions are favorable
 
class SmartSyncManager {
  async shouldSync(): Promise<{
    shouldSync: boolean;
    reason: string;
    defer?: boolean;
  }> {
    // Check network quality
    const connection = navigator.connection;
    
    // Don't sync on metered connections unless urgent
    if (connection?.saveData) {
      return { shouldSync: false, reason: 'Data saver enabled' };
    }
    
    // Prefer WiFi for large syncs
    if (connection?.type === 'cellular' && this.hasLargeSync()) {
      return { shouldSync: false, reason: 'Large sync deferred to WiFi', defer: true };
    }
    
    // Check battery
    const battery = await navigator.getBattery?.();
    if (battery && battery.level < 0.20 && !battery.charging) {
      return { shouldSync: false, reason: 'Low battery', defer: true };
    }
    
    // Check if we have urgent changes
    const urgentChanges = await this.getUrgentChanges();
    if (urgentChanges.length > 0) {
      return { shouldSync: true, reason: 'Urgent changes pending' };
    }
    
    // Check time since last sync
    const lastSync = await this.getLastSyncTime();
    const hoursSinceSync = (Date.now() - lastSync) / (1000 * 60 * 60);
    
    if (hoursSinceSync > 1) {
      return { shouldSync: true, reason: 'Stale data' };
    }
    
    return { shouldSync: false, reason: 'No sync needed' };
  }
  
  async scheduleOptimalSync(): Promise<void> {
    // Use the Periodic Background Sync API where available
    if ('periodicSync' in ServiceWorkerRegistration.prototype) {
      const registration = await navigator.serviceWorker.ready;
      
      try {
        await registration.periodicSync.register('content-sync', {
          minInterval: 12 * 60 * 60 * 1000, // 12 hours
        });
      } catch {
        // Fall back to manual scheduling
        this.scheduleManualSync();
      }
    }
  }
}