angular - workbox-webpack-plugin & Angular. Angular で broadcastUpdate イベントをリッスンする方法

Question

Angular アプリケーションで service-worker を使用しようとしています。webpackを使ってビルドしています。

workbox-webpack-plugin を使用しています。GET API 呼び出しフォーム キャッシュを提供し、バックグラウンドでデータを更新したいと考えています。

runtimeCachingこのために、ハンドラーでオプションを使用しますstaleWhileRevalidate( GenerateSW プラグインの詳細はこちら)

これは、webpack.config.js にある構成です。

  new GenerateSW({
    // importWorkboxFrom: 'local',
    clientsClaim: true,
    skipWaiting: true,
    navigateFallback: '/index.html',
    runtimeCaching: [
      {
        // Match any same-origin request that contains 'api'.
        urlPattern: /https:\/\/api.*/,
        handler: 'staleWhileRevalidate',
        options: {
          cacheName: 'api',
          broadcastUpdate: {
            channelName: 'api-updates',
          },
          // Add in any additional plugin logic you need.
          plugins: [],
        },
      }
    ]
  }),

このドキュメントによると、キャッシュが更新されたときにイベントを受け取ることができるはずです (データを更新できるように、ユーザーに何かを表示したい)。

データを受け取るコードは次のようになります。

export class AppComponent implements OnInit {

  public ngOnInit() {
    console.log( 'AppComponent - ngOnInit' );

    const updatesChannel = new BroadcastChannel('api-updates');
    updatesChannel.addEventListener('message', async (event) => {
      console.log('Event received');
    });
  }
}

このコードをAngularコンポーネントの1つに入れましたが、キャッシュが更新されたと確信していても呼び出されませんでした。

Angular で変更検出がどのように機能するか (この質問で説明されているように) と関係があるのではないかと思いますが、修正方法がわかりません。

Angular コンポーネントからブロードキャスト イベントを正常にリッスンできた人はいますか?