mobile-offline-support

モバイルのオフライン対応

目次

• 概要
• 使用する場面
• クイックスタート
• リファレンスガイド
• ベストプラクティス

概要

接続状況にかかわらず、シームレスなユーザー体験を提供するオフラインファーストのモバイルアプリケーションを設計します。

使用する場面

• インターネット接続がなくても動作するアプリを構築する
• 接続が復旧した際にシームレスに同期する機能を実装する
• デバイスとサーバー間のデータ競合に対処する
• インテリジェントなキャッシュでサーバー負荷を軽減する
• ローカルストレージでアプリの応答性を高める

クイックスタート

最小限の実行可能な例：

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;
    }
  }

// ... (see reference guides for full implementation)

リファレンスガイド

references/ ディレクトリにある詳細な実装：

ガイド	内容
React Native Offline Storage	React Native オフラインストレージ
iOS Core Data Implementation	iOS Core Data の実装
Android Room Database	Android Room データベース

ベストプラクティス

✅ 推奨事項

• 堅牢なローカルストレージを実装する
• オンライン時に自動同期を使用する
• オフライン状態を視覚的にフィードバックする
• 後で同期するアクションをキューに追加する
• 競合に適切に対処する
• 頻繁にアクセスされるデータをキャッシュする
• 適切なエラー復旧を実装する
• オフラインのシナリオを十分にテストする
• 大容量データには圧縮を使用する
• ストレージ使用量を監視する

❌ 禁止事項

• 常時接続を前提にしない
• 大きなファイルを頻繁に同期しない
• ストレージの制限を無視しない
• 不要な同期を強制しない
• オフラインモードでデータを失わない
• 機密データを暗号化せずに保存しない
• キュー項目を無制限に蓄積しない
• 同期の失敗を黙って無視しない
• 短い間隔で同期を繰り返さない
• オフラインテストをせずにデプロイしない