オフライン対応は、ネットワークが不安定な環境でもユーザーがアプリケーションを利用できるようにするための重要な要素です。本章では、PWA（プログレッシブウェブアプリ）化、Service WorkerのReact統合、オフライン時の状態管理とデータ同期について解説します。

1. PWA化によるオフライン対応

PWAの特徴

• オフライン対応:
  • キャッシュ機能を利用して、インターネット接続なしでもアプリが動作可能。
• インストール可能:
  • ユーザーがアプリをデスクトップやホーム画面に追加可能。
• プッシュ通知:
  • リアルタイムで通知を送信可能。

PWA化の手順

1. create-react-appでPWAを有効化:

   • create-react-appを使用すると、PWAサポートがデフォルトで含まれます。

   npx create-react-app my-app --template cra-template-pwa

2. manifest.jsonの設定:

   • アイコンやアプリ名、テーマカラーなどを指定。

   {
     "short_name": "MyApp",
     "name": "My Progressive Web App",
     "icons": [
       {
         "src": "icon-192x192.png",
         "sizes": "192x192",
         "type": "image/png"
       }
     ],
     "start_url": ".",
     "display": "standalone",
     "theme_color": "#000000",
     "background_color": "#ffffff"
   }

3. HTTPSでホスティング:

   • PWAはHTTPSが必須。NetlifyやVercelなどのホスティングサービスを利用。

2. Service WorkerをReactと統合

Service Workerの役割

• リクエストのキャッシュ。
• オフライン時のリソース提供。
• プッシュ通知のハンドリング。

service-worker.jsの基本例

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open("my-cache").then((cache) => {
      return cache.addAll(["/", "/index.html", "/static/js/main.js"]);
    })
  );
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

ReactでのService Worker登録

• 登録ファイル:
  • src/serviceWorkerRegistration.js

export function register() {
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker
      .register("/service-worker.js")
      .then((registration) => {
        console.log("Service Worker registered with scope:", registration.scope);
      })
      .catch((error) => {
        console.error("Service Worker registration failed:", error);
      });
  }
}

• アプリ内での使用:

  import { register } from "./serviceWorkerRegistration";
  
  register();

---

3. オフライン時の状態管理とデータ同期

状態管理の工夫

• オフライン対応ストレージ:
  • IndexedDBやlocalStorageを使用して状態を永続化。

IndexedDBの使用例

import { openDB } from "idb";

const dbPromise = openDB("app-store", 1, {
  upgrade(db) {
    db.createObjectStore("keyval");
  },
});

export async function setItem(key, val) {
  const db = await dbPromise;
  await db.put("keyval", val, key);
}

export async function getItem(key) {
  const db = await dbPromise;
  return db.get("keyval", key);
}

データ同期の仕組み

• オフライン時のキャッシュ:
  • サーバーへのリクエストをキューに格納。

キューの例

const requestQueue = [];

function addRequestToQueue(request) {
  requestQueue.push(request);
}

function syncRequests() {
  while (requestQueue.length > 0) {
    const request = requestQueue.shift();
    fetch(request.url, request.options).catch((error) => {
      console.error("Sync failed for request:", request, error);
      requestQueue.push(request); // 再度キューに追加
    });
  }
}

• オンライン時に同期:

  window.addEventListener("online", syncRequests);

データ同期ライブラリの活用

• Workbox:
  • Googleが提供するPWA向けライブラリで、高度なキャッシュ戦略をサポート。

---

オフライン対応は、信頼性の高いアプリケーションを構築する上で重要です。本章で紹介したPWA化、Service Workerの統合、データ同期の仕組みを活用し、ユーザーにとってより便利なアプリケーションを提供しましょう。