mobile-offline-support

Mobile Offline Support

Overview

Design offline-first mobile applications that provide seamless user experience regardless of connectivity.

When to Use

• Building apps that work without internet connection
• Implementing seamless sync when connectivity returns
• Handling data conflicts between device and server
• Reducing server load with intelligent caching
• Improving app responsiveness with local storage

Instructions

1. React Native Offline Storage

import AsyncStorage from '@react-native-async-storage/async-storage';
import NetInfo from '@react-native-community/netinfo';

class StorageManager {
  static async saveItems(items) {
    try {
      await AsyncStorage.setItem(
        'items_cache',
        JSON.stringify({ data: items, timestamp: Date.now() })
      );
    } catch (error) {
      console.error('Failed to save items:', error);
    }
  }

  static async getItems() {
    try {
      const data = await AsyncStorage.getItem('items_cache');
      return data ? JSON.parse(data) : null;
    } catch (error) {
      console.error('Failed to retrieve items:', error);
      return null;
    }
  }

  static async queueAction(action) {