workbox-background-sync

ウェブサーバーにデータを送信すると、リクエストが失敗することがあります。これは、 ユーザーの接続が失われたり、 サーバーがダウンしています。いずれの場合も、リクエストの送信を試行し、 後でもう一度試します。

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

Workbox Background Sync は、 BackgroundSync API を実装し、その使用を他のワークボックス モジュールと統合します。これは、 ブラウザが代替機能に対応している場合に、 BackgroundSync

BackgroundSync API をサポートするブラウザでは、自動的にリプレイが失敗します お客様に代わって ブラウザで管理される間隔 リプレイの試行間に指数バックオフが 使用されている可能性が高いからですブラウザが BackgroundSync API をネイティブにサポートしていない場合、Workbox Background Sync は Service Worker が起動するたびに自動的にリプレイが試行されます。

基本的な使用法

Background Sync を使用する最も簡単な方法は、Plugin 失敗したリクエストを自動的にキューに入れ、将来の sync 発生します。

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 内 接続が復元されたことをブラウザが判断したときに再試行されます（つまり、 呼び出すことができます）。

キューの作成

Workbox のバックグラウンド同期キューを作成するには、 キュー名（プロジェクトに固有の origin):

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

const queue = new Queue('myQueueName');

キュー名は、タグ名の一部として register() - 編集 世界全体で SyncManager。です。 「新規顧客の獲得」目標を オブジェクト ストア名 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 をコントロールするページで、 それほど効果は得られません

Workbox のバックグラウンド同期のテスト

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

実装をテストする最善の方法として、次のことを行います。

1. ページを読み込み、Service Worker を登録します。
2. パソコンのネットワークやウェブサーバーをオフにします。
   • Chrome DevTools をオフラインで使用しないでください。オフライン チェックボックスは DevTools は、ページからのリクエストにのみ影響します。Service Worker リクエスト 引き続き処理が行われます。
3. Workbox Background Sync でキューに入れるべきネットワーク リクエストを作成します。
   • リクエストがキューに追加されたことは、 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> は） キューの名前を入力して [同期] ボタンを] ボタンを離します。

   

6. 失敗したリクエストに対してネットワーク リクエストが実行されていることと、 リクエストはすでに完了しているため、IndexedDB のデータは空になっているはずです。 正常に再生できました。