ウェブ定期バックグラウンド同期 API

定期バックグラウンド同期 API により、ウェブアプリケーションが定期的にサービスワーカーに更新を行うよう知らせることができます。利用法としては、端末が Wi-Fi に接続している間に最新のコンテンツを取得したり、アプリケーションをバックグラウンドで更新したりすることが挙げられます。

API が呼び出された際には最小の時間間隔が設定されますが、ユーザーエージェントはサービスワーカーがそのイベントを受け取るタイミングに影響を与える様々な要素を考慮します。その要素には、例えばウェブサイトのエンゲージメントや特定のネットワークへの接続などがあります。

PeriodicSyncManager インターフェースは ServiceWorkerRegistration.periodicSync によって提供されます。一意のタグが sync イベントの 'name' として設定され、これは ServiceWorker スクリプト内で取得することができます。イベントを受け取った際には、キャッシュの更新や新たなリソースの取得といった任意の利用可能な機能を実行することができます

この API はサービスワーカーに依存しているため、この API も安全なコンテキストでしか利用できません。

PeriodicSyncManager

ネットワーク接続がある状態で、定期的にサービスワーカーの中で実行されるタスクを登録します。これらのタスクは、定期バックグラウンド同期要求として参照されます。

PeriodicSyncEvent

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

定期バックグラウンド同期仕様では、定期バックグラウンド同期を使用するためのエントリーポイントを提供するために、サービスワーカー API に以下のような追加項目を指定しています。

ServiceWorkerRegistration.periodicSync 読取専用

特定の間隔で実行するタスクを登録するための PeriodicSyncManager インターフェイスへの参照を返します。

onperiodicsync

periodicsync イベントが発生したときに発行されるイベントハンドラーです。これは PeriodicSyncManager を登録する際に指定した、時刻を指定した間隔で実行されます。

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

次の非同期関数は、閲覧コンテキストから最小 1 日間隔の定期バックグラウンド同期を登録するものです。

async function registerPeriodicNewsCheck() {
  const registration = await navigator.serviceWorker.ready;
  try {
    await registration.periodicSync.register("get-latest-news", {
      minInterval: 24 * 60 * 60 * 1000,
    });
  } catch {
    console.log("Periodic Sync could not be registered!");
  }
}

このコードは、指定されたタグを持つ定期バックグラウンド同期タスクが登録されているかどうかを調べるものです。

navigator.serviceWorker.ready.then((registration) => {
  registration.periodicSync.getTags().then((tags) => {
    if (tags.includes("get-latest-news")) skipDownloadingLatestNewsOnPageLoad();
  });
});

以下のコードでは、定期バックグラウンド同期タスクを削除し、バックグラウンドでの記事の同期を停止しています。

navigator.serviceWorker.ready.then((registration) => {
  registration.periodicSync.unregister("get-latest-news");
});

以下の例では、サービスワーカーの定期的な同期イベントに応答する方法を示しています。

self.addEventListener("periodicsync", (event) => {
  if (event.tag === "get-latest-news") {
    event.waitUntil(fetchAndCacheLatestNews());
  }
});

• An article on using Periodic Background Sync
• A Periodic Background Sync demo app