0Pricing
JavaScript Academy · レッスン

バックグラウンド同期と更新

オンラインに戻ったときにキャッシュを更新して同期します。

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

キャッシュを最新に保つ

オフラインに対応したアプリでは、更新を適切に処理する必要があります。新しいアセットを配布し、古いアセットを削除し、接続が戻ったときに失敗した操作を再試行します。サービスワーカーは、この3つすべてのための機能を提供します。

バージョン付きキャッシュ名

最もシンプルな更新方法は、バージョン付きのキャッシュ名を使うことです。バージョンを上げると新しいキャッシュが作成され、古いキャッシュはアクティベーション時に削除できます。

const CACHE = 'app-v2'; // was 'app-v1'
self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open(CACHE).then(c => c.addAll(ASSETS))
  );
});

古いキャッシュの削除

activate イベントで、すべてのキャッシュ名を一覧にし、現在のバージョンでないものを削除します。これによりストレージを解放し、古いアセットを取り除けます。

self.addEventListener('activate', (e) => {
  e.waitUntil(
    caches.keys().then(names =>
      Promise.all(
        names.filter(n => n !== CACHE)
             .map(n => caches.delete(n))
      )
    )
  );
});

待機中のワーカー

デフォルトでは、新しいワーカーはインストールされても、古いワーカーが制御しているすべてのページが閉じられるまで待機中の状態に留まります。これにより、セッション途中でバージョンが食い違うのを防ぎます。

skipWaiting

self.skipWaiting() は、待機中のワーカーにすぐアクティベートするよう指示し、タブが閉じられるのを待たずに制御を開始させます。更新をすぐに適用したい場合は、install 内で呼び出します。

self.addEventListener('install', (event) => {
  self.skipWaiting(); // activate as soon as installed
});

clients.claim

アクティベート後に self.clients.claim() を呼び出すと、新しいワーカーはすでに開いているページをすぐに制御できます。これにより、今後のナビゲーションだけでなく、既存のページも制御対象になります。

self.addEventListener('activate', (event) => {
  event.waitUntil(self.clients.claim());
});

ページからの更新の検出

ページでは、登録の updatefound イベントを使って新しいワーカーを検出し、最新バージョンを取得するために再読み込みするようユーザーに促せます。

reg.addEventListener('updatefound', () => {
  const sw = reg.installing;
  sw.addEventListener('statechange', () => {
    if (sw.state === 'installed') {
      console.log('new version available - reload to update');
    }
  });
});

バックグラウンド同期

Background Sync API を使うと、デバイスが接続状態になるまで操作（フォームの送信など）を延期できます。同期タグを登録すると、オンラインになったときにブラウザーが sync イベントを発生させます。

// In the page, after queuing data:
reg.sync.register('send-messages')
  .then(() => console.log('sync scheduled'));

sync イベントの処理

サービスワーカーで sync を監視し、タグを照合します。waitUntil を使うと、再試行が完了するまでブラウザーがワーカーを稼働させ続けます。

self.addEventListener('sync', (event) => {
  if (event.tag === 'send-messages') {
    event.waitUntil(sendQueuedMessages());
  }
});

キューに入れてから同期するパターン

堅牢なオフライン処理の流れは、保留中の操作を IndexedDB に保存し、同期を登録して、sync ハンドラーでキューを読み取り、各項目を POST して成功したら削除するというものです。

async function sendQueuedMessages() {
  const items = await readQueueFromIndexedDB();
  for (const item of items) {
    await fetch('/api/messages', {
      method: 'POST',
      body: JSON.stringify(item)
    });
  }
  await clearQueue();
}

更新と同期のまとめ

これらの機能を組み合わせることで、アプリの回復力が高まります。バージョン付きキャッシュとクリーンアップでアセットを最新に保ち、skipWaiting/clients.claim で適用のタイミングを制御し、ユーザーがオンラインに戻ったら Background Sync で操作を確実に完了できます。

クイックチェック

更新とバックグラウンド同期についての理解度を確認します。

まとめ

バックグラウンド同期と更新について学びました。

  • バージョン付きキャッシュ名を使い、activate で古いキャッシュを削除する。
  • skipWaiting と clients.claim で更新のタイミングを制御する。
  • updatefound で新しいバージョンを検出する。
  • Background Sync は sync イベントを使い、オンラインになるまで操作を延期する。
  • IndexedDB にキューを保存し、同期時に送信する。

Service Workers とオフラインキャッシュの学習は完了です。

よくある質問

「バックグラウンド同期と更新」レッスンは無料ですか？

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

「バックグラウンド同期と更新」で何を学びますか？

オンラインに戻ったときにキャッシュを更新して同期します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

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

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

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

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

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

  1. Service Worker を登録する
  2. Cache API
  3. キャッシュ戦略
  4. バックグラウンド同期と更新
← JavaScript Academyに戻る