バックグラウンド同期 API

概念と使用法

バックグラウンド同期 API は、デバイスがオフラインのとき、ウェブアプリケーションがサーバーとの同期処理を延期して後でサービスワーカーで処理できるようにします。用途として、アプリケーションの使用中に送信できなかったリクエストをバックグラウンドで送信することがあるかもしれません。

たとえば、電子メールのクライアントアプリケーションは、デバイスがネットワークに接続されていないときを含め、いつでもユーザーがメッセージを書いて送信できるようにできます。このアプリケーションのフロントエンドは同期リクエストを登録するだけであり、ネットワークが再び使用可能になった時サービスワーカーが通知を受けて同期を処理します。

SyncManager インターフェイスが ServiceWorkerRegistration.sync を通じて利用可能です。一意なタグ識別子が同期イベントにおいて 'name' に設定され、このイベントは ServiceWorker のスクリプト内で受け取ることができます。イベントを受信したら、サーバーにリクエストを送信するなど、利用可能な任意の機能を実行することができます。

この API はサービスワーカーに依存しているので、この API が提供する機能は保護されたコンテキストでのみ利用可能です。

インターフェイス

SyncManager Experimental

後でネットワークが接続されたときサービスワーカーで実行するタスクを登録します。このようなタスクは バックグラウンド同期の要求 と呼ばれます。

SyncEvent Experimental

同期イベントを表します。このイベントは、ServiceWorker のグローバルスコープに送信されます。これは、デバイスがネットワークに接続されたときタスクをサービスワーカーで実行する方法を提供します。

他のインターフェイスの拡張

Service Worker API に追加された以下が、バックグラウンド同期をセットアップするためのエントリーポイントを提供します。

ServiceWorkerRegistration.sync 読取専用

デバイスがネットワークに接続されたときに実行するタスクを登録するための SyncManager インターフェイスへの参照を返します。

sync イベント

sync イベントが発生した際常に実行されるイベントハンドラーです。これは、ネットワークが利用可能になるとすぐに発生します。

例

以下の例は、インターフェイスの使い方を示します。

バックグラウンド同期を要求する

以下の非同期関数は、ブラウジングコンテキストからバックグラウンド同期を登録します。

async function syncMessagesLater() {
  const registration = await navigator.serviceWorker.ready;
  try {
    await registration.sync.register("sync-messages");
  } catch {
    console.log("バックグラウンド同期の登録に失敗しました！");
  }
}

タグを用いてバックグラウンド同期を確認する

このコードは、指定のタグがついたバックグラウンド同期タスクが登録されているかを確認します。

navigator.serviceWorker.ready.then((registration) => {
  registration.sync.getTags().then((tags) => {
    if (tags.includes("sync-messages")) {
      console.log("メッセージの同期は既に登録されています");
    }
  });
});

サービスワーカー内でバックグラウンド同期イベントを受け取る

以下の例は、サービスワーカーでバックグラウンド同期イベントに応答する方法を示します。

self.addEventListener("sync", (event) => {
  if (event.tag === "sync-messages") {
    event.waitUntil(sendOutboxMessages());
  }
});

仕様書

ブラウザーの互換性

api.SyncManager

api.ServiceWorkerGlobalScope.sync_event

関連情報

• Introducing Background Sync