バックグラウンドフェッチ API

概要と用途

ウェブアプリケーションがユーザーに大きなファイルをダウンロードさせる必要があるとき、よく起きる問題として、ユーザーがダウンロードの完了までページに接続し続けなければならないという問題があります。接続が切れたり、タブを閉じたり、ページを離れたりすると、ダウンロードは中止されてしまいます。

バックグラウンド同期 API を用いて、ユーザーが接続されるまでサービスワーカーに処理を延期させることができますが、この方法は大容量ファイルのダウンロードのような時間のかかる処理には使えません。バックグラウンド同期は、フェッチが完了するまでサービスワーカーが生き続ける必要がありますが、ブラウザーはバッテリーの寿命を長持ちさせるため、また、バックグラウンドで不要なタスクが発生することを防ぐために、途中でタスクを終了させてしまうでしょう。

バックグラウンドフェッチ API はこの問題を解決します。たとえば、ユーザーが動画をダウンロードするためのボタンをクリックしたときなどに、ウェブ開発者はブラウザーにバックグラウンドでフェッチを行うよう指示できるようになります。指示が行われると、ブラウザーはユーザーに見える形でフェッチを実行します。(ユーザーに進捗状況を表示し、ユーザーはダウンロードをキャンセルすることもできます。)ダウンロードが完了すると、ブラウザーはサービスワーカーを開きます。この時点で、アプリケーションは必要に応じて応答を処理できます。

バックグラウンドフェッチ API は、ユーザーがプロセスをオフラインで開始した場合にも、フェッチの発生を可能にします。一旦接続されると、処理が開始されます。ユーザーがオフラインになると、再びオンラインになるまでプロセスは一時停止します。

インターフェイス

BackgroundFetchManager Experimental

キーがバックグラウンドフェッチの ID で、値が BackgroundFetchRegistration のオブジェクトのマップ。

BackgroundFetchRegistration Experimental

バックグラウンドフェッチを表します。

BackgroundFetchRecord Experimental

個々のフェッチ要求と応答を表します。

BackgroundFetchEvent Experimental

backgroundfetchabort と backgroundfetchclick に渡されるイベント型。

BackgroundFetchUpdateUIEvent Experimental

backgroundfetchsuccess と backgroundfetchfail に渡されるイベント型。

他インターフェイスへの拡張

ServiceWorkerRegistration.backgroundFetch 読取専用 Experimental

BackgroundFetchManager オブジェクトへの参照を返します。これがバックグラウンドフェッチ操作を管理します。

backgroundfetchabort イベント Experimental

バックグラウンドフェッチ操作がユーザーまたはアプリによって取り消されたときに発行されます。

backgroundfetchclick イベント Experimental

ユーザーがバックグラウンドフェッチ操作の UI をクリックしたときに発生します。

backgroundfetchfail イベント Experimental

バックグラウンドフェッチ操作内のリクエストの少なくとも 1 つが失敗した場合に発生します。

backgroundfetchsuccess イベント Experimental

バックグラウンドフェッチ操作内のすべてのリクエストが成功したときに発生します。

例

バックグラウンドフェッチを使用する前に、ブラウザーで利用可能か確認しましょう。

if (!("BackgroundFetchManager" in self)) {
  // 代わりのダウンロード方法を用意してください。
}

バックグラウンドフェッチの使用には登録済みのサービスワーカーが必要となります。そして、 backgroundFetch.fetch() を呼び出してフェッチを実行します。これは BackgroundFetchRegistration で解決されるプロミスを返します。

バックグラウンドフェッチは、複数のファイルを取得することができます。下記の例では、フェッチは MP3 ファイルと JPEG ファイルをリクエストします。このことは、ユーザーが 1 つのアイテムとして見ている、複数ファイルで構成されたパッケージ (たとえば、 podcast とアートワーク) を一度にダウンロードすることを可能にします。

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch(
    "my-fetch",
    ["/ep-5.mp3", "ep-5-artwork.jpg"],
    {
      title: "Episode 5: Interesting things.",
      icons: [
        {
          sizes: "300x300",
          src: "/ep-5-icon.png",
          type: "image/png",
        },
      ],
      downloadTotal: 60 * 1024 * 1024,
    },
  );
});

それ以外のコードや例は、バックグラウンド取得の概要のデモにあります。

仕様書

ブラウザーの互換性

api.BackgroundFetchManager

api.BackgroundFetchRegistration

api.BackgroundFetchRecord

関連情報

• Introducing Background Fetch
• Background Fetch - HTTP 203