service-worker - Service Worker のフェッチがトリガーされないようです

Question

ブラウザーがサーバーから画像を要求すると、その呼び出しはバックエンドの API コントローラーによって取得されます。そこでは、リクエストが許可されているかどうかを確認するために、画像を返す前に承認チェックを行う必要があります。

したがって、認証ヘッダーを追加する必要があり、最適なソリューションを検索するときに、次の記事を見つけました: https://www.twelve21.io/how-to-access-images-securely-with-oauth-2-0/および私は主に、Service Worker を使用するソリューション番号 4 に興味を持っていました。

私は独自の実装を作成し、serviceWorker を登録しました。

if ('serviceWorker' in navigator) {
    console.log("serviceWorker active");
    window.addEventListener('load', onLoad);
}
else {
    console.log("serviceWorker not active");
}

function onLoad() {
    console.log("onLoad is called");
    var scope = {
        scope: '/api/imagesgateway/'
    };
    navigator.serviceWorker.register('/Scripts/ServiceWorker/imageInterceptor.js', scope)
        .then(registration => console.log("ServiceWorker registration successful with scope: ", registration.scope))
        .catch(error => console.error("ServiceWorker registration failed: ", error));
}

これは私のimageInterceptorにあります：

self.addEventListener('fetch', event => {
    console.log("fetch event triggered");
    event.respondWith(
        fetch(event.request, {
            mode: 'cors',
            credentials: 'include',
            header: {
                'Authorization': 'Bearer ...'
            }
        })
    )
});

アプリケーションを実行すると、console.logs が表示され、登録が正常に実行されたように見えることがコンソールに表示されます (ServiceWorker がアクティブで、onLoad が呼び出され、正しいスコープでの登録が成功しました: https://localhost:44332/api /イメージゲートウェイ/

しかし、ゲートウェイ経由で画像 ( https://localhost:44332/api/imagesgateway/.. .) を読み込むと、まだ 400 が返され、バックエンドにブレークポイントを設定すると、認証ヘッダーがまだ null であることがわかります。また、コンソールに「フェッチ イベントがトリガーされました」というメッセージが表示されません。別の記事では、chrome://inspect/#service-workers という設定で登録済みの Service Worker を確認できると記載されていますが、自分の Worker も表示されません。

私の質問は次のとおりです。認証ヘッダーが追加されないのはなぜですか? 登録は成功しているように見えますが、実際にはそうではないため、inspect#service-workers にもワーカーが表示されないためですか?