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

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (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` (en-US)

`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());
  }
});
```

仕様書
---

| Specification |
| --- |
| Web Periodic Background Synchronization  |

ブラウザーの互換性
---------

### api.PeriodicSyncManager

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.ServiceWorkerGlobalScope.periodicsync\_event

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

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