workbox-backround-sync自動検出デバイスがオンラインに戻るべきです

Question

サービスワーカーツールキットworkboxを試しています。

コピーhereは、workbox-backround-sync QueuePluginが失敗した要求をキャッチし、後でそれらを再生することを示唆しています。だから少し掘り下げて、私はPOSTメソッド呼び出しでこれを動作させる方法を発見しました。

しかし、リクエストの再生は少しヒットして見逃すようです。 Chrome devツールを使用してアプリケーションをオフラインにすると、実際にはIndexedDB内のキューにリクエストが配置されます。何も起きていないようで、私はデバッグしたかったのです。私はdemo on githubでブロードキャストチャネルを使用して再生をトリガーすることに気付きました。だから私はそれを実装しました。次に、アクティブなタブのコンソールから、私はdevツールでオフラインのチェックを外し、私はpostMessageを送りました。今、リクエストは喜んで解雇され、応答はキュー内の各アイテムに格納されました。

私はマシンを稼働させたままで、数時間スタンバイなどに入ります。私は、すべての項目に応答があっても、幸いに重複した要求を送信していたことをログに記録しました。

この時点で私は試して複製しますができません。私はBroadcastChannelメッセージを送信し、応答のない要求のみを発します。だから今私は最初に戻り、より多くのオフライン要求を作成し、それらがDBにあることを確認し、オンラインに復元して待ちます。何もない。

constructor of Queueでは、新しいRequestManagerが作成され、そのコンストラクターに同期イベントリスナーが設定されています。だから私はある時点で何かをしているはずだと推測しています。

誰かが助けてくれると予想される動作を理解していることを確認したいだけです。

ここに私が所持しているコードがあります。

let bgQueue = new workbox.backgroundSync.QueuePlugin({ 
    callbacks: { 
    onResponse: async(hash, res) => { 
     console.log(hash, res); 
    } 
    } 
}); 

const requestWrapper = new workbox.runtimeCaching.RequestWrapper({ 
    plugins: [bgQueue] 
}); 

const route = new workbox.routing.RegExpRoute({ 
    regExp: new RegExp('^http://localhost:4200/api/create/note'), 
    handler: new workbox.runtimeCaching.NetworkOnly({requestWrapper}), 
    method: 'POST' // Not obvious you need to do this in the docs without digging. 
}); 

const router = new workbox.routing.Router(); 
router.registerRoute({route}); 

// Code to manaully trigger a replay. 
const replayBroadcastChannel = new BroadcastChannel('replay_channel'); 
replayBroadcastChannel.onmessage = function() { 
    bgQueue.replayRequests(); 
}; 

macOS SierraのChrome 58でのテスト。

Answer 1

デベロッパーツールを使用してオフライン - >オンライン - >オフラインに切り替えると思います（この場合、「同期」オプションはありません）ので、ネットワークをオンからオフに切り替える必要がありますシステム。

このようにすると、考えたようにリクエストが再生されるのを確認できるはずです。

また、重複したリクエスト（2XXレスポンスで応答されたリクエスト）を引き続き再生できる場合は、気軽にバグを開いてください。