このページは Cloud Translation API によって翻訳されました。

バックグラウンド同期の導入

Jake Archibald

バックグラウンド同期は、ユーザーが安定した状態になるまでアクションを延期できる新しいウェブ API です。接続性が向上しますこれにより、ユーザーが送信しようとしているものが確実に送信されます。

問題

インターネットは時間を無駄にするのに最適な場所です。インターネットに無駄な時間を費やさなければ、猫は花を嫌い、カメレオンはバブルが好きなこと、エリックビデルマンが90 年代後半のパットパットゴルフのヒーローであることは知りません。

時間を無駄にしたくない場合もあるでしょう目的のユーザー次のような点に優れています

スマートフォンをポケットから取り出しました。
小さな目標を達成する
ポケットにスマートフォンを戻しました。
活動を再開する。

残念ながら、この状況は接続が不安定なために頻繁に中断されます。誰にもあることです。白い画面またはスピナーを見つめて、あきらめて人生をやり直す必要があることはわかっていますが、念のためさらに 10 秒待ちます。その 10 秒後はどうでしょうか。特になし。

でも、なぜあきらめたの？あなたはすでに時間を費やしているので、何も持たずに立ち去るのは無駄なので、そのまま待ちます。この時点までにあきらめたいものの、2 度目になると、待っているだけではすべてが読み込まれる前の 2 回目になることがわかっています。

Service Worker は、キャッシュからコンテンツを提供できるようにすることで、ページ読み込みの部分を解決します。しかし、ページからサーバーに何かを送信する必要がある場合はどうでしょうか。

この時点でユーザーが [送信] をクリックすると完了するまでスピナーをじっと見る必要がありますユーザーがタブから移動したりタブを閉じたりしようとすると、onbeforeunload を使用して「いいえ、このスピナーをもう少し凝視する必要があります。申し訳ありません。」ユーザーが接続していない場合は、「しばらくしてからもう一度お試しください」というメッセージが表示されます。

これはくだらない。バックグラウンド同期を使うとさらに便利に。

ソリューション

次の動画は、絵文字のみのチャットのデモである Emojoy を示しています。プログレッシブウェブアプリで、オフラインファーストで動作します。アプリはプッシュメッセージと通知を使用し、バックグラウンド同期を使用します。

接続がないときにユーザーがメッセージを送信しようとした場合、メッセージは接続が確立されるとバックグラウンドで送信されます。

2016 年 3 月現在、バックグラウンド同期は Chrome バージョン 49 以降でご利用いただけます。実際の動作は以下の手順で確認できます。

[Emojoy] を開きます。
オフラインにします（機内モードを使うか、お近くのファラデーケージに足を運んでください）。
メッセージを入力します。
ホーム画面に戻ります（必要に応じてタブまたはブラウザを閉じます）。
インターネットに接続してください。
メッセージをバックグラウンドで送信

このようにバックグラウンドで送信できることも、パフォーマンスの向上を実感しています。アプリはメッセージの送信に関してそれほど大きなことをする必要がないため、すぐにメッセージを出力に追加できます。

バックグラウンド同期をリクエストする方法

真の拡張可能なウェブスタイルでは、必要なことを自由に実行できるローレベルの機能です。あなたはユーザーが接続したときに発生します。これはユーザーがすでに接続されていますイベントをリッスンして必要があります。

プッシュメッセージと同様に、イベントターゲットとして Service Worker が使用されるため、ページが開いていないときにも動作します。開始するには、ページから同期に登録します。

// Register your service worker:
navigator.serviceWorker.register('/sw.js');

// Then later, request a one-off sync:
navigator.serviceWorker.ready.then(function(swRegistration) {
  return swRegistration.sync.register('myFirstSync');
});
 ```

Then listen for the event in `/sw.js`:

```js
self.addEventListener('sync', function(event) {
  if (event.tag == 'myFirstSync') {
    event.waitUntil(doSomeStuff());
  }
});

これで完了です。上記で、doSomeStuff() は、行おうとしているすべての処理の成功/失敗を示す Promise を返す必要があります。処理が完了すると、同期が完了します。失敗した場合は、別の同期が再試行されるようにスケジュールされます。再試行の同期も接続を待機し、指数バックオフを使用します。

同期のタグ名（上記の例では「myFirstSync」）は、特定の同期に対して一意である必要があります。保留中の同期と同じタグを使用して同期を登録すると、既存の同期と結合されます。「クリアアウトボックス」機能ユーザーがメッセージを送信するたびに同期しますが、オフライン中に 5 件のメッセージを送信しても、オンラインになったときに同期されるのは 1 回だけです。5 つの個別の同期イベントが必要な場合は、一意のタグを使用してください。

必要最小限の操作を行うシンプルなデモをご覧ください。同期イベントを使用して通知を表示します。

バックグラウンド同期の用途

ページの存続期間を超えて重要なデータ送信をスケジュール設定するために使用するのが理想的です。チャットメッセージ、メール、ドキュメントの更新、設定の変更、写真のアップロードなど、ユーザーが移動したりタブを閉じたりした場合でも、サーバーに届くあらゆるもの。「送信トレイ」に保存してIndexingDB に格納し、Service Worker でそれらを取得して送信します。

ただし、少量のデータを取得するためにも使用できます。

別のデモです。

これは、ページ読み込みの強化用に作成した Wikipedia のオフラインデモです。それ以来、バックグラウンド同期のマジックを追加しました。

実際に試してみましょう。Chrome 49 以降を使用していることを確認してから、次の操作を行います。

Chrome などに関する記事にアクセスします。
オフラインにします（機内モードを使用するか、以前のように携帯通信会社を利用します）。
別の記事へのリンクをクリックします。
ページの読み込みに失敗したことを示すメッセージが表示されます（ページの表示に時間がかかっている場合にも表示されます）。
通知に同意します。
ブラウザを閉じます。
オンライン
記事のダウンロード、キャッシュ、表示の準備が完了すると、通知が届きます。

このパターンを使用すると、ユーザーはスマートフォンをポケットに入れて生活を始められます。欲しいものが持ち上がったときに通知が届くので、安心です。

権限

お見せしたデモではウェブ通知を使用していますが、これには権限が必要ですが、バックグラウンド同期自体には必要ありません。

同期イベントは多くの場合、ユーザーがページを開いている間に完了するため、ユーザーに許可を求めるとエクスペリエンスが低下します。不正行為を防止するため、同期を登録してトリガーできるタイミングを制限しています。例:

ユーザーがサイトでウィンドウを開いている場合にのみ、同期イベントを登録できます。
イベントの実行時間には上限があるため、x 秒ごとにサーバーに ping を実行したり、ビットコインのマイニングに使用したりすることはできません。

もちろん、これらの制限は実際の使用方法に応じて緩んだり緩んだりする可能性もあります。

プログレッシブエンハンスメント

Safari と Edge が Service Worker にまだ対応していないため、すべてのブラウザでバックグラウンド同期がサポートされるまで、しばらく時間がかかります。ここでは、プログレッシブエンハンスメントが役に立ちます。

if ('serviceWorker' in navigator && 'SyncManager' in window) {
  navigator.serviceWorker.ready.then(function(reg) {
    return reg.sync.register('tag-name');
  }).catch(function() {
    // system was unable to register for a sync,
    // this could be an OS-level restriction
    postDataFromThePage();
  });
} else {
  // serviceworker/sync not supported
  postDataFromThePage();
}

Service Worker やバックグラウンド同期が利用できない場合は、このページから

バックグラウンド同期は、ユーザーの接続状態は良好に見えても、データ送信中に移動やタブが閉じられることを防ぐので、使用する価値があります。

今後について

バックグラウンド同期については、2016 年上半期に Chrome の安定版にリリースすることを目指しており、その一方で「定期的なバックグラウンド同期」のバリエーションの開発に取り組んでいます。定期的なバックグラウンド同期では、時間間隔、バッテリーの状態、ネットワークの状態によって制限されたイベントをリクエストできます。これには当然ユーザーの許可が必要です。また、これらのイベントが発生するタイミングや頻度はブラウザによります。つまり、ニュースサイトは 1 時間ごとに同期をリクエストしても、ブラウザはユーザーが 07:00 にしかそのサイトを読み取っていないと認識し、同期が毎日 06:50 に行われることになります。このアイデアは、1 回限りの同期とは少し先を行くものですが、間もなく実現する予定です。

Google は、Android と iOS の効果的なパターンをウェブに取り入れながら、ウェブの素晴らしさを失わないよう少しずつ着実に取り組んでいきます。