0Pricing
Vue Academy · レッスン

オフライン対応とバックグラウンド同期

APIレスポンスのキャッシュ、オフラインデータ用のIndexedDB、遅延アクション用のバックグラウンド同期

「オフライン対応とバックグラウンド同期」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

オフラインファーストの考え方

本当のオフライン対応とは、ネットワークがなくてもアプリが動作し続けることです。読み取りはローカルストアから行い、書き込みはキューに入れて、接続が戻ったときに同期します。

ローカルストレージに IndexedDB を使う

IndexedDB は、ブラウザーが提供する大容量で構造化された非同期ストレージです。生の API は冗長なため、多くのアプリでは小規模なラッパーライブラリ idb を使います。

npm install idb

idb でデータベースを開く

openDB は promise ベースのデータベースハンドルを返します。upgrade コールバックでオブジェクトストアを定義します。

import { openDB } from "idb";

const db = await openDB("app-db", 1, {
  upgrade(db) {
    db.createObjectStore("todos", { keyPath: "id" });
    db.createObjectStore("outbox", { keyPath: "id", autoIncrement: true });
  }
});

読み取りと書き込み

get、getAll、put を使ってレコードを読み取り、保存します。これらは await できる promise を返します。

await db.put("todos", { id: 1, text: "Buy milk" });
const all = await db.getAll("todos");

navigator.onLine でオフラインを検出する

navigator.onLine は接続状態を示す boolean 値です。これを読み取って、ネットワークを使う処理とローカル処理を分岐します。

if (!navigator.onLine) {
  // work from IndexedDB only
}

接続イベントへの対応

window は online イベントと offline イベントを発生させます。これらをリアクティブな ref にバインドすると、UI に状態をリアルタイムで反映できます。

import { ref, onMounted, onUnmounted } from "vue";

const online = ref(navigator.onLine);
const on = () => (online.value = true);
const off = () => (online.value = false);
onMounted(() => {
  window.addEventListener("online", on);
  window.addEventListener("offline", off);
});
onUnmounted(() => {
  window.removeEventListener("online", on);
  window.removeEventListener("offline", off);
});

オフライン時の変更をキューに入れる

オフライン中に書き込みが発生したら、送信する代わりに outbox ストアへ保存します。UI はローカル状態に基づいて楽観的に更新します。

async function saveTodo(todo) {
  await db.put("todos", todo);
  if (!navigator.onLine) {
    await db.add("outbox", { type: "saveTodo", payload: todo });
  } else {
    await api.save(todo);
  }
}

再接続時の同期

online イベントが発生したら outbox を処理します。キューに入っている各変更をサーバーに対して再実行し、その後 outbox を空にします。

async function flushOutbox() {
  const items = await db.getAll("outbox");
  for (const item of items) {
    await api.send(item);
    await db.delete("outbox", item.id);
  }
}
window.addEventListener("online", flushOutbox);

Background Sync API

タブを閉じた後も同期するには、サービスワーカーの Background Sync API によって同期タグを登録します。ブラウザーは接続が戻ると、そのタグに対応する同期処理を実行します。

const reg = await navigator.serviceWorker.ready;
await reg.sync.register("flush-outbox");

Worker での sync の処理

サービスワーカーは sync イベントを待ち受け、バックグラウンドでフラッシュ処理を実行します。

// service worker
self.addEventListener("sync", (event) => {
  if (event.tag === "flush-outbox") {
    event.waitUntil(flushOutbox());
  }
});

競合に関する考慮事項

キューに入れた書き込みを再実行すると、サーバー側の変更と競合する可能性があります。バージョン、タイムスタンプ、または最終書き込み優先のルールを使用し、解決できない競合はユーザーに提示してください。

確認テスト

アプリがオフラインの間、書き込みはどのように処理すべきですか？

まとめ

オフライン対応では、idbライブラリを介してIndexedDBにデータを保存し、navigator.onLineとonline/offlineイベントで接続状態を検出します。オフライン中はミューテーションをアウトボックスにキューへ追加し、再接続時に同期します。必要に応じて、サービスワーカーのBackground Sync APIも利用できます。キューに入れた書き込みを再実行する際の競合にも備えてください。

よくある質問

「オフライン対応とバックグラウンド同期」レッスンは無料ですか？

はい。「オフライン対応とバックグラウンド同期」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「オフライン対応とバックグラウンド同期」で何を学びますか？

APIレスポンスのキャッシュ、オフラインデータ用のIndexedDB、遅延アクション用のバックグラウンド同期 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「オフライン対応とバックグラウンド同期」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. vite-plugin-pwaの設定
  2. Service Workerの戦略
  3. オフライン対応とバックグラウンド同期
  4. Vue PWAでのプッシュ通知
← Vue Academyに戻る