Rork でオフライン対応アプリを構築する — AsyncStorage と SQLite を使ったキャッシュ戦略の実践

import AsyncStorage from '@react-native-async-storage/async-storage';
 
// キャッシュの書き込み（TTL付き）
const cacheData = async (key: string, data: unknown, ttlMinutes: number = 60) => {
  const cacheEntry = {
    data,
    timestamp: Date.now(),
    ttl: ttlMinutes * 60 * 1000,
  };
  await AsyncStorage.setItem(key, JSON.stringify(cacheEntry));
};
 
// キャッシュの読み取り（期限切れチェック付き）
const getCachedData = async <T>(key: string): Promise<T | null> => {
  const raw = await AsyncStorage.getItem(key);
  if (\!raw) return null;
 
  const entry = JSON.parse(raw);
  const isExpired = Date.now() - entry.timestamp > entry.ttl;
 
  if (isExpired) {
    await AsyncStorage.removeItem(key);
    return null;
  }
 
  return entry.data as T;
};

import * as SQLite from 'expo-sqlite';
 
const db = SQLite.openDatabaseSync('app_cache.db');
 
// テーブル初期化（アプリ起動時に1回実行）
const initDatabase = () => {
  db.execSync(`
    CREATE TABLE IF NOT EXISTS articles (
      id TEXT PRIMARY KEY,
      title TEXT NOT NULL,
      category TEXT,
      content TEXT,
      cached_at INTEGER,
      is_synced INTEGER DEFAULT 1
    )
  `);
  db.execSync(`
    CREATE INDEX IF NOT EXISTS idx_articles_category 
    ON articles(category)
  `);
};
 
// データの一括キャッシュ（API レスポンス → SQLite）
const cacheArticles = (articles: Article[]) => {
  const now = Date.now();
  const stmt = db.prepareSync(
    'INSERT OR REPLACE INTO articles (id, title, category, content, cached_at) VALUES (?, ?, ?, ?, ?)'
  );
 
  db.execSync('BEGIN TRANSACTION');
  for (const article of articles) {
    stmt.executeSync(article.id, article.title, article.category, article.content, now);
  }
  db.execSync('COMMIT');
};
 
// カテゴリ別取得（オフラインでも高速検索可能）
const getArticlesByCategory = (category: string): Article[] => {
  return db.getAllSync<Article>(
    'SELECT * FROM articles WHERE category = ? ORDER BY cached_at DESC',
    category
  );
};

import NetInfo from '@react-native-community/netinfo';
import { useEffect, useState, useCallback } from 'react';
 
const useNetworkAwareData = <T>(
  fetchFn: () => Promise<T>,
  cacheKey: string
) => {
  const [data, setData] = useState<T | null>(null);
  const [source, setSource] = useState<'network' | 'cache' | 'none'>('none');
  const [isRefreshing, setIsRefreshing] = useState(false);
 
  const loadData = useCallback(async () => {
    const netState = await NetInfo.fetch();
 
    if (netState.isConnected) {
      try {
        setIsRefreshing(true);
        const freshData = await fetchFn();
        setData(freshData);
        setSource('network');
        await cacheData(cacheKey, freshData);
      } catch {
        // ネットワーク接続はあるが API が落ちている場合
        const cached = await getCachedData<T>(cacheKey);
        if (cached) {
          setData(cached);
          setSource('cache');
        }
      } finally {
        setIsRefreshing(false);
      }
    } else {
      // オフライン: キャッシュから読み取り
      const cached = await getCachedData<T>(cacheKey);
      if (cached) {
        setData(cached);
        setSource('cache');
      }
    }
  }, [fetchFn, cacheKey]);
 
  useEffect(() => { loadData(); }, [loadData]);
 
  return { data, source, isRefreshing, refresh: loadData };
};

const ArticleList = () => {
  const { data, source, isRefreshing, refresh } = useNetworkAwareData(
    fetchArticles,
    'articles_list'
  );
 
  return (
    <View>
      {source === 'cache' && (
        <View style={styles.offlineBanner}>
          <Text>オフラインモード — 最後に取得したデータを表示中</Text>
        </View>
      )}
      <FlatList
        data={data}
        refreshing={isRefreshing}
        onRefresh={refresh}
        renderItem={({ item }) => <ArticleCard article={item} />}
      />
    </View>
  );
};

const usePendingActions = () => {
  const addPendingAction = async (action: PendingAction) => {
    const pending = await getCachedData<PendingAction[]>('pending_actions') || [];
    pending.push({ ...action, createdAt: Date.now() });
    await cacheData('pending_actions', pending, 7 * 24 * 60); // 7日間保持
  };
 
  const syncPendingActions = async () => {
    const pending = await getCachedData<PendingAction[]>('pending_actions') || [];
    const failed: PendingAction[] = [];
 
    for (const action of pending) {
      try {
        await executeAction(action);
      } catch {
        failed.push(action);
      }
    }
 
    await cacheData('pending_actions', failed, 7 * 24 * 60);
    return { synced: pending.length - failed.length, failed: failed.length };
  };
 
  return { addPendingAction, syncPendingActions };
};

const handleLike = async (articleId: string) => {
  // 1. UI を即座に更新（楽観的）
  setLiked(true);
  setLikeCount(prev => prev + 1);
 
  // 2. ペンディングアクションに追加
  await addPendingAction({
    type: 'like',
    payload: { articleId },
  });
};