ウェブ定期バックグラウンド同期 API - Web API | MDN

Toggle sidebar

Theme

OS default
Light
Dark

日本語

Remember language Learn more

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

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

ウェブ定期バックグラウンド同期 API (Web Periodic Background Synchronization API) は、サービスワーカー上で定期的にネットワーク通信ができる状況で実行されるタスクを登録する機能を提供します。それらのタスクを定期バックグラウンド同期リクエスト (periodic background sync requests) と呼びます。

ウェブ定期バックグラウンド同期の概念と用法

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

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

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

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

メモ: 執筆時点では、ウェブ定期バックグラウンド同期 API は、インストールされたプログレッシブウェブアプリを介してのみ利用可能です。

ウェブ定期バックグラウンド同期インターフェイス

PeriodicSyncManager

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

PeriodicSyncEvent

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

サービスワーカーへの追加

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

ServiceWorkerRegistration.periodicSync 読取専用

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

onperiodicsync

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

例

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

定期バックグラウンド同期のリクエスト

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

js
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!");
  }
}

定期バックグラウンド同期をタグで検証

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

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

定期バックグラウンド同期タスクを削除

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

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

サービスワーカーの定期バックグラウンド同期の待ち受け

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

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

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025年4月4日 by MDN contributors.

View this page on GitHub • Report a problem with this content

ウェブ定期バックグラウンド同期 API
インターフェイス
1. PeriodicSyncEvent
2. PeriodicSyncManager
プロパティ
1. ServiceWorkerRegistration.periodicSync
イベント
1. ServiceWorkerGlobalScope: periodicsync

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

In this article

ウェブ定期バックグラウンド同期の概念と用法

ウェブ定期バックグラウンド同期インターフェイス

サービスワーカーへの追加

例

定期バックグラウンド同期のリクエスト

定期バックグラウンド同期をタグで検証

定期バックグラウンド同期タスクを削除

サービスワーカーの定期バックグラウンド同期の待ち受け

仕様書

ブラウザーの互換性

api.PeriodicSyncManager

api.ServiceWorkerGlobalScope.periodicsync_event

関連情報

Help improve MDN