workbox-background-sync

ウェブサーバーにデータを送信すると、リクエストが失敗することがあります。原因としては、ユーザーの接続が切断された場合や、サーバーがダウンしていることなどが考えられます。いずれの場合も、後でもう一度リクエストを送信してみることをおすすめします。

新しい BackgroundSync API は、この問題に対する理想的なソリューションです。Service Worker は、ネットワーク リクエストの失敗を検出すると、sync イベントを受信するよう登録できます。このイベントは、接続が回復したとブラウザが認識したときに配信されます。同期イベントは、ユーザーがアプリケーションを離れた場合でも配信できるため、失敗したリクエストを再試行する従来の方法よりもはるかに効果的です。

Workbox Background Sync は、BackgroundSync API を簡単に使用し、その使用方法を他の Workbox モジュールと統合できるように設計されています。また、BackgroundSync をまだ実装していないブラウザ用のフォールバック戦略も実装しています。

BackgroundSync API をサポートするブラウザは、ブラウザが管理する間隔で、失敗したリクエストを自動的にリプレイします。その際、リプレイ試行間で指数バックオフが使用される可能性があります。BackgroundSync API をネイティブにサポートしていないブラウザでは、Service Worker が起動するたびに Workbox Background Sync が自動的にリプレイを試行します。

基本的な使用法

バックグラウンド同期を使用する最も簡単な方法は、失敗したリクエストを自動的にキューに入れ、将来の sync イベントが発生したときに再試行する Plugin を使用することです。

import {BackgroundSyncPlugin} from 'workbox-background-sync';
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

const bgSyncPlugin = new BackgroundSyncPlugin('myQueueName', {
  maxRetentionTime: 24 * 60, // Retry for max of 24 Hours (specified in minutes)
});

registerRoute(
  /\/api\/.*\/*.json/,
  new NetworkOnly({
    plugins: [bgSyncPlugin],
  }),
  'POST'
);

BackgroundSyncPlugin は fetchDidFail プラグイン コールバックにフックし、fetchDidFail は例外がスローされた場合にのみ呼び出されます。これは通常、ネットワーク障害が原因です。つまり、4xx または 5xx エラー ステータスのレスポンスが受信された場合、リクエストは再試行されません。5xx ステータスなどの原因となったすべてのリクエストを再試行する場合は、戦略に fetchDidSucceed プラグインを追加します。

const statusPlugin = {
  fetchDidSucceed: ({response}) => {
    if (response.status >= 500) {
      // Throwing anything here will trigger fetchDidFail.
      throw new Error('Server error.');
    }
    // If it's not 5xx, use the response as-is.
    return response;
  },
};

// Add statusPlugin to the plugins array in your strategy.

高度な使用方法

Workbox Background Sync には Queue クラスも用意されています。このクラスに、失敗したリクエストをインスタンス化して追加できます。失敗したリクエストは IndexedDB に保存され、ブラウザが接続が復元されたと判断したとき（同期イベントを受信したときなど）に再試行されます。

キューを作成する

ワークボックス バックグラウンド同期キューを作成するには、キュー名（送信元に固有の名前にする必要があります）を使ってキューを作成する必要があります。

import {Queue} from 'workbox-background-sync';

const queue = new Queue('myQueueName');

キュー名は、グローバル SyncManager によって register() を取得するタグ名の一部として使用されます。また、IndexedDB データベースのオブジェクト ストア名としても使用されます。

リクエストをキューに追加する

Queue インスタンスを作成したら、失敗したリクエストをインスタンスに追加できます。失敗したリクエストを追加するには、.pushRequest() メソッドを呼び出します。たとえば、次のコードは失敗したリクエストをキャッチしてキューに追加します。

import {Queue} from 'workbox-background-sync';

const queue = new Queue('myQueueName');

self.addEventListener('fetch', event => {
  // Add in your own criteria here to return early if this
  // isn't a request that should use background sync.
  if (event.request.method !== 'POST') {
    return;
  }

  const bgSyncLogic = async () => {
    try {
      const response = await fetch(event.request.clone());
      return response;
    } catch (error) {
      await queue.pushRequest({request: event.request});
      return error;
    }
  };

  event.respondWith(bgSyncLogic());
});

リクエストがキューに追加されると、Service Worker が sync イベントを受信すると（ブラウザが接続が回復したと認識したときに）、自動的に再試行されます。BackgroundSync API をサポートしていないブラウザは、Service Worker が起動されるたびにキューを再試行します。この場合、Service Worker を制御するページが実行される必要があるため、効果は期待できません。

ワークボックスのバックグラウンド同期のテスト

残念ながら、BackgroundSync のテストはやや直感的ではなく、さまざまな理由から困難です。

実装をテストする最善の方法は、以下を行うことです。

1. ページを読み込み、Service Worker を登録します。
2. パソコンのネットワークをオフにするか、ウェブサーバーをオフにします。
   • Chrome DevTools をオフラインで使用しないでください。DevTools のオフライン チェックボックスは、ページからのリクエストにのみ影響します。Service Worker のリクエストは引き続き通過します。
3. Workbox バックグラウンド同期を使用してキューに追加するネットワーク リクエストを作成します。
   • リクエストがキューに追加されたかどうかは、Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests で確認できます。
4. ネットワークまたはウェブサーバーをオンにします。

5. 早期 sync イベントを強制するには、Chrome DevTools > Application > Service Workers に移動し、workbox-background-sync:<your queue name> のタグ名（<your queue name> は設定したキューの名前）を入力して [Sync] ボタンをクリックします。

   

6. 失敗したリクエストに対してネットワーク リクエストが処理され、リクエストが正常にリプレイされたため、IndexedDB データは空になっているはずです。