Periodic Background Sync API によるオフライン エクスペリエンスの拡充

ウェブアプリのデータをバックグラウンドで同期して、アプリのような操作性を実現します

Jeff Posnick

Joe Medley

次のような状況になったことはございますか？

• 不安定な、または接続できない電車や地下鉄に乗る
• 動画を視聴する回数が多すぎるため、携帯通信会社によってスロットリングされた
• 帯域幅が需要への対応に苦労している国に住んでいる

もしそうなら、おそらく プラットフォーム固有のアプリのほうが優れている理由が 可能性がありますプラットフォーム固有のアプリでニュース記事や天気情報などの最新のコンテンツを取得できる 事前に確認しておくことが大切です。地下鉄にネットワークがなくても ニュース

定期的なバックグラウンド同期により、ウェブ アプリケーションを定期的に同期 バックグラウンドで実行し、ウェブアプリをプラットフォーム固有の動作に近づけることができます。 。

試してみる

ライブデモで定期的なバックグラウンド同期をお試しいただけます アプリ。 使用する前に、次の点をご確認ください。

• Chrome 80 以降を使用している。
• マイページ インストール 定期的にバックグラウンド同期を有効にしてください。

コンセプトと使用方法

定期的なバックグラウンド同期により、プログレッシブ ウェブアプリの実行中に最新のコンテンツを表示できます Service Worker 型のページが起動されます。このために、Cloud Storage で アプリやページを使用していないときは背景に表示しません。これにより、 コンテンツの再生中に起動後に更新されないようにできます。さらに、 アプリが更新前にコンテンツ スピナーが表示されないようにします。

定期的にバックグラウンド同期を行わないと、ウェブアプリで ダウンロードします。プッシュ通知を使用してサービスを復帰させる一般的な例 できます。「新しいデータが利用可能」などのメッセージにより、ユーザーの操作が中断される。 データの更新は基本的に副作用です。サイレント モードの プッシュ通知を使用して、重要な最新情報や ニュース速報

定期的なバックグラウンド同期は、バックグラウンド同期と簡単に混同されます。しかし、 それぞれユースケースが異なります特に、 バックグラウンド同期は、問題が発生したときにサーバーにデータを再送信する場合によく使用されます。 失敗します。

ユーザー エンゲージメントを適切に把握する

定期的なバックグラウンド同期を誤ると、ユーザーの 説明します。Chrome はリリース前に試用期間を経て、 確認しましたこのセクションでは、Chrome の設計上の決定事項について説明します。 考えました。

Chrome が最初に行った設計上の決定事項は、ウェブアプリでは バックグラウンド同期が実行された後、ユーザーがそのアプリを自分のデバイスにインストールして、 独立したアプリケーションとしてリリースされました。定期的なバックグラウンド同期を利用できません Chrome の通常のタブのコンテキストで 表示することもできます

さらに、Chrome では使用されていないウェブアプリやめったに使用されないウェブアプリを不必要に利用したくないため、 バッテリーやデータを消費します。そのため Chrome では、 開発者はユーザーに価値を提供することで 収益を上げる必要があります具体的には Chrome ではサイト エンゲージメント スコアを使用しています （about://site-engagement/）定期的なバックグラウンド同期の可否と頻度を判別する 1 つのウェブアプリに対して行いますつまり、エンゲージメントが発生しない限り、periodicsync イベントはまったく呼び出されません。 スコアは 0 よりも大きく、その値はユーザーが出現する頻度に periodicsync イベントが発生する。こうすると、そのデバイスで同期しているアプリだけが バックグラウンドとは、アクティブに使っているものです。

定期的なバックグラウンド同期には、既存の API や Kubernetes との類似点があります。 実践演習を行いますたとえば 1 回限りのバックグラウンド同期や プッシュ通知を使用すると、ウェブアプリのロジックを（ Service Worker など）。ほとんどのプラットフォームでは ユーザーがインターネットに定期的にアクセスするアプリを 重要な更新のユーザー エクスペリエンスを向上させます。 コンテンツのプリフェッチ、データの同期などです。定期的なバックグラウンド同期も同様に ウェブアプリのロジックの寿命を延ばして、 一度に数分程度かかる場合があります。

この動作をブラウザで制限なく頻繁に許可すると、 プライバシーに関する懸念が生じる可能性があります。Chrome のこの課題への対処 定期的なバックグラウンド同期のリスク:

• バックグラウンド同期のアクティビティは、デバイスが接続しているネットワーク上でのみ発生します 接続しますChrome では、 保護します。
• 他のインターネット通信と同様に、定期的なバックグラウンド同期によって、 クライアントが通信しているサーバー、クライアントの名前が あります。この脆弱性を悪用する場合、アプリがこの脆弱性を悪用する場合と 同期されていた場合、ブラウザによって、 ユーザーがそのアプリを使用する頻度に合わせて、アプリのバックグラウンドが同期されます。条件 アプリの操作を頻繁に停止する、定期的なバックグラウンド同期 トリガーが停止しますこれは、プラットフォーム固有の現状をはるかに上回る改善です。 。

いつ使用できるようになりますか？

使用ルールはブラウザによって異なります。以上をまとめると、Chrome では 定期的なバックグラウンド同期に関する次の要件があります。

• 特定のユーザー エンゲージメント スコア。
• 以前に使用したネットワークの存在。

同期のタイミングは、デベロッパーが制御するものではありません。「 同期頻度は、アプリの使用頻度に合わせます。（なお、 プラットフォーム固有のアプリでは、現時点ではこのことは行われません）。また、デバイスの電力を消費し、 接続状態が維持されます

使用に適したケース

Service Worker が復帰して periodicsync イベントを処理すると、 データをリクエストする機会がありますが、リクエストする義務ではありません。取り扱いについて ネットワーク状態と利用可能なストレージを ダウンロードすることになるからです次を使用: 次のリソースをご覧ください。

• Network Information API
• データセーバー モードの検出
• 利用可能なストレージの見積もり

権限

Service Worker をインストールしたら、権限 API でクエリを実行 （periodic-background-sync）。その際はウィンドウまたは コンテキストで識別されます。

const status = await navigator.permissions.query({
  name: 'periodic-background-sync',
});
if (status.state === 'granted') {
  // Periodic background sync can be used.
} else {
  // Periodic background sync cannot be used.
}

定期的な同期の登録

すでに説明したように、定期的なバックグラウンド同期には Service Worker が必要です。取得 ServiceWorkerRegistration.periodicSync を使用して PeriodicSyncManager を作成し、 register()。登録には、タグと 1 つ以上の 同期間隔（minInterval）。タグは、登録済みの同期を識別するタグです。 複数の同期を登録できます。以下の例では、タグ名は 'content-sync'、minInterval は 1 日です。

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  try {
    await registration.periodicSync.register('content-sync', {
      // An interval of one day.
      minInterval: 24 * 60 * 60 * 1000,
    });
  } catch (error) {
    // Periodic background sync cannot be used.
  }
}

登録の確認

periodicSync.getTags() を呼び出して、登録タグの配列を取得します。「 以下の例では、タグ名を使用してキャッシュの更新が有効であることを確認し、 再度更新されます。

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  const tags = await registration.periodicSync.getTags();
  // Only update content if sync isn't set up.
  if (!tags.includes('content-sync')) {
    updateContentOnPageLoad();
  }
} else {
  // If periodic background sync isn't supported, always update.
  updateContentOnPageLoad();
}

getTags() を使用して、ウェブで有効な登録のリストを表示することもできます アプリの設定ページで、ユーザーは特定の種類のリソースを有効または無効にすることができます。 あります。

定期的なバックグラウンド同期イベントに応答する

定期的なバックグラウンド同期イベントに応答するには、periodicsync イベントを追加します。 Service Worker に追加します。渡される event オブジェクトには、 登録中に使用された値と一致する tag パラメータ。たとえば、 定期的なバックグラウンド同期が 'content-sync' という名前で登録され、その後 event.tag は 'content-sync' になります。

self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'content-sync') {
    // See the "Think before you sync" section for
    // checks you could perform before syncing.
    event.waitUntil(syncContent());
  }
  // Other logic for different tags as needed.
});

同期の登録解除

登録済みの同期を終了するには、名前を指定して periodicSync.unregister() を呼び出します。 クリックします。

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  await registration.periodicSync.unregister('content-sync');
}

インターフェース

ここでは、[Periodic Background]機能によって提供されるインターフェースを簡単に説明します。 Sync API。

• PeriodicSyncEvent。ServiceWorkerGlobalScope.onperiodicsync イベント ハンドラに渡されます。 自動的に作成されます。
• PeriodicSyncManager。定期的な同期の登録と登録解除を行い、登録済みの 同期できます。このクラスのインスタンスを ServiceWorkerRegistration.periodicSync から取得 プロパティです。
• ServiceWorkerGlobalScope.onperiodicsync。PeriodicSyncEvent を受け取るハンドラを登録します。
• ServiceWorkerRegistration.periodicSync。PeriodicSyncManager への参照を返します。

例

コンテンツの更新

次の例では、定期的なバックグラウンド同期を使用して、ニュースサイトやブログの最新記事をダウンロードしてキャッシュに保存しています。同期の種類を示すタグ名に注意してください（'update-articles'）。updateArticles() の呼び出しは event.waitUntil() でラップされているため、記事がダウンロードされて保存される前に Service Worker が終了しません。

async function updateArticles() {
  const articlesCache = await caches.open('articles');
  await articlesCache.add('/api/articles');
}

self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'update-articles') {
    event.waitUntil(updateArticles());
  }
});

既存のウェブアプリに定期的なバックグラウンド同期を追加する

この一連の変更は、 既存の PWA への定期的なバックグラウンド同期。この例には、実行内容を記述する有用なロギング ステートメントがいくつか含まれています。 ウェブアプリでの定期的なバックグラウンド同期の状態。

デバッグ

定期的なバックグラウンド同期の状況をエンドツーエンドで把握するのは難しい場合がある おすすめします。有効な登録に関する情報、おおよその同期 過去の同期イベントのログにより、デバッグ中に貴重なコンテキストを提供 動作を調整することもできますこれらの情報は テストすることもできます。

ローカル アクティビティを記録しています

DevTools の [定期的なバックグラウンド同期] セクションは、キーイベントを中心に構成されています。 定期的なバックグラウンド同期のライフサイクルで、同期の登録、同期の実行、 バックグラウンド同期、登録解除を行いますこれらのイベントに関する情報を取得するには、 [録画を開始] をクリックします。

</ph> <ph type="x-smartling-placeholder">をご覧ください。

記録中、イベントに対応するエントリが DevTools に表示され、 コンテキストとメタデータがログに記録されます。

</ph> <ph type="x-smartling-placeholder">をご覧ください。

録画を一度有効にすると、最長 3 日間有効です。 DevTools でバックグラウンド同期に関するローカル デバッグ情報をキャプチャできます。 何時間もかかることもあります

イベントのシミュレーション

バックグラウンド アクティビティを記録しておくと役立ちますが、 periodicsync ハンドラをすぐにテストする場合、 イベントを通常の頻度で発生します

これを行うには、Cloud コンソールの [Application] パネルにある [Service Workers] セクション Chrome DevTools。[Periodic Sync] フィールドでは、同期に使用するタグを指定できます。 トリガーでき 必要に応じて何度でもトリガーできます

DevTools インターフェースを使用する

Chrome 81 以降では、[定期的なバックグラウンド同期] セクションが DevTools の [Application] パネル。