Offline Functionality

Layered Data Access Implementation

// Data access layer that abstracts data sources
class DataService {
  constructor() {
    // Initialize storage
    this.db = null;
    this.initDatabase();
    
    // Track online status
    this.isOnline = navigator.onLine;
    window.addEventListener('online', () => {
      this.isOnline = true;
      this.syncData();
    });
    window.addEventListener('offline', () => {
      this.isOnline = false;
    });
  }
  
  // Initialize the database
  async initDatabase() {
    try {
      this.db = await new Promise((resolve, reject) => {
        const request = indexedDB.open('OfflineFirstDB', 1);
        
        request.onupgradeneeded = (event) => {
          const db = event.target.result;
          
          // Create object stores for different data types
          if (!db.objectStoreNames.contains('articles')) {
            const store = db.createObjectStore('articles', { keyPath: 'id' });
            store.createIndex('by_category', 'category', { unique: false });
            store.createIndex('by_date', 'publishedAt', { unique: false });
            store.createIndex('by_status', 'syncStatus', { unique: false });
          }
          
          if (!db.objectStoreNames.contains('comments')) {
            const store = db.createObjectStore('comments', { 
              keyPath: 'id',
              autoIncrement: true
            });
            store.createIndex('by_article', 'articleId', { unique: false });
            store.createIndex('by_status', 'syncStatus', { unique: false });
          }
          
          if (!db.objectStoreNames.contains('userActions')) {
            const store = db.createObjectStore('userActions', { 
              keyPath: 'id',
              autoIncrement: true
            });
            store.createIndex('by_type', 'type', { unique: false });
            store.createIndex('by_status', 'syncStatus', { unique: false });
          }
        };
        
        request.onsuccess = (event) => resolve(event.target.result);
        request.onerror = (event) => reject(event.target.error);
      });
      
      console.log('Database initialized');
      
      // Initial sync
      if (this.isOnline) {
        this.syncData();
      }
    } catch (error) {
      console.error('Failed to initialize database:', error);
    }
  }
  
  // Generic database operations
  async add(storeName, item) {
    await this.waitForDb();
    
    return new Promise((resolve, reject) => {
      const tx = this.db.transaction(storeName, 'readwrite');
      const store = tx.objectStore(storeName);
      
      // Add sync status for tracking
      item.syncStatus = 'pending';
      item.updatedAt = new Date().toISOString();
      
      const request = store.add(item);
      
      request.onsuccess = (event) => resolve(event.target.result);
      request.onerror = (event) => reject(event.target.error);
    });
  }
  
  async get(storeName, id) {
    await this.waitForDb();
    
    return new Promise((resolve, reject) => {
      const tx = this.db.transaction(storeName, 'readonly');
      const store = tx.objectStore(storeName);
      
      const request = store.get(id);
      
      request.onsuccess = (event) => resolve(event.target.result);
      request.onerror = (event) => reject(event.target.error);
    });
  }
  
  async put(storeName, item) {
    await this.waitForDb();
    
    return new Promise((resolve, reject) => {
      const tx = this.db.transaction(storeName, 'readwrite');
      const store = tx.objectStore(storeName);
      
      // Update sync status and timestamp
      item.syncStatus = 'pending';
      item.updatedAt = new Date().toISOString();
      
      const request = store.put(item);
      
      request.onsuccess = (event) => resolve(event.target.result);
      request.onerror = (event) => reject(event.target.error);
    });
  }
  
  async getAll(storeName, indexName = null, indexValue = null) {
    await this.waitForDb();
    
    return new Promise((resolve, reject) => {
      const tx = this.db.transaction(storeName, 'readonly');
      const store = tx.objectStore(storeName);
      
      let request;
      
      if (indexName && indexValue !== null) {
        const index = store.index(indexName);
        request = index.getAll(indexValue);
      } else {
        request = store.getAll();
      }
      
      request.onsuccess = (event) => resolve(event.target.result);
      request.onerror = (event) => reject(event.target.error);
    });
  }
  
  // Wait for database to be initialized
  async waitForDb() {
    if (this.db) return;
    
    let attempts = 0;
    while (!this.db && attempts < 50) {
      await new Promise(resolve => setTimeout(resolve, 100));
      attempts++;
    }
    
    if (!this.db) {
      throw new Error('Database initialization timed out');
    }
  }
  
  // Sync data with the server
  async syncData() {
    if (!this.isOnline) return false;
    
    try {
      console.log('Starting data synchronization');
      
      // Sync pending articles
      await this.syncPendingItems('articles', '/api/articles');
      
      // Sync pending comments
      await this.syncPendingItems('comments', '/api/comments');
      
      // Sync user actions
      await this.syncUserActions();
      
      // Fetch new data from server
      await this.fetchLatestData();
      
      console.log('Data synchronization completed');
      return true;
    } catch (error) {
      console.error('Data synchronization failed:', error);
      return false;
    }
  }
  
  // Sync pending items to the server
  async syncPendingItems(storeName, apiEndpoint) {
    try {
      // Get all pending items
      const pendingItems = await this.getAll(storeName, 'by_status', 'pending');
      
      if (pendingItems.length === 0) {
        console.log(`No pending ${storeName} to sync`);
        return { success: true, count: 0 };
      }
      
      console.log(`Syncing ${pendingItems.length} ${storeName}`);
      
      // Process each item
      const results = await Promise.allSettled(
        pendingItems.map(async (item) => {
          try {
            // Determine if it's a new item or an update
            const isNew = !item.serverId;
            const method = isNew ? 'POST' : 'PUT';
            const url = isNew ? apiEndpoint : `${apiEndpoint}/${item.serverId}`;
            
            // Send to server
            const response = await fetch(url, {
              method,
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify(item)
            });
            
            if (!response.ok) {
              throw new Error(`Server responded with ${response.status}`);
            }
            
            const serverItem = await response.json();
            
            // Update local item with server data
            item.syncStatus = 'synced';
            
            // If it's a new item, store the server ID
            if (isNew && serverItem.id) {
              item.serverId = serverItem.id;
            }
            
            // Update other fields from server
            item.lastSynced = new Date().toISOString();
            
            // Save updated item
            await this.put(storeName, item);
            
            return { success: true, item };
          } catch (error) {
            console.error(`Failed to sync ${storeName} item:`, error);
            return { success: false, item, error };
          }
        })
      );
      
      // Count results
      const succeeded = results.filter(result => 
        result.status === 'fulfilled' && result.value.success
      ).length;
      
      console.log(`${storeName} sync: ${succeeded}/${pendingItems.length} succeeded`);
      
      return { success: true, count: succeeded };
    } catch (error) {
      console.error(`Error syncing ${storeName}:`, error);
      return { success: false, error };
    }
  }
  
  // Sync user actions (likes, follows, etc.)
  async syncUserActions() {
    try {
      // Get all pending actions
      const pendingActions = await this.getAll('userActions', 'by_status', 'pending');
      
      if (pendingActions.length === 0) {
        console.log('No pending user actions to sync');
        return { success: true, count: 0 };
      }
      
      console.log(`Syncing ${pendingActions.length} user actions`);
      
      // Process each action
      const results = await Promise.allSettled(
        pendingActions.map(async (action) => {
          try {
            // Send to appropriate endpoint based on action type
            let endpoint;
            
            switch (action.type) {
              case 'like':
                endpoint = `/api/likes/${action.isAdd ? 'add' : 'remove'}`;
                break;
              case 'bookmark':
                endpoint = `/api/bookmarks/${action.isAdd ? 'add' : 'remove'}`;
                break;
              case 'follow':
                endpoint = `/api/follows/${action.isAdd ? 'add' : 'remove'}`;
                break;
              default:
                endpoint = '/api/user-actions';
            }
            
            // Send to server
            const response = await fetch(endpoint, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify(action.data)
            });