ASP.NET Core Blazor アプリをアップグレードするときに HTTP キャッシュの問題を回避する

Blazor アプリが正しくアップグレードまたは構成されていないと、既存のユーザーに対してシームレスではないアップグレードになる可能性があります。 この記事では、Blazor アプリをメジャー バージョン間でアップグレードするときに発生する可能性がある一般的な HTTP キャッシュの問題について説明します。 また、ユーザーの移行が円滑に行われるために推奨されるいくつかのアクションも示します。

Blazor の今後のリリースでは、HTTP キャッシュの問題に対処するためのより優れたソリューションが提供される可能性がありますが、最終的にはアプリによるキャッシュの正しい構成に委ねられます。 キャッシュを適切に構成すると、アプリのユーザーは常に最新バージョンのアプリを使うようになり、エクスペリエンスが向上し、エラーが発生する可能性が低くなります。

ユーザー のアップグレード エクスペリエンスに悪影響を与える一般的な問題は次のとおりです:

• プロジェクトとパッケージの更新プログラムの正しくない処理: これは、アプリのデプロイされているすべてのプロジェクトが同じメジャー フレームワーク バージョンを使うように更新されない場合、またはメジャー アップグレードの一部として新しいバージョンを利用できるとき以前のバージョンのパッケージが使われている場合に、発生します。
• キャッシュ ヘッダーの正しくない構成: HTTP キャッシュ ヘッダーは、アプリの応答をキャッシュする方法、場所、保持期間を制御します。 ヘッダーが正しく構成されていない場合、ユーザーは古いコンテンツを受け取る可能性があります。
• 他のレイヤーの正しくない構成: コンテンツ配信ネットワーク (CDN) やデプロイされたアプリの他のレイヤーが正しく構成されていないと、問題が発生する可能性があります。 たとえば、CDN は、パフォーマンスを向上させ、待ち時間を短縮するため、コンテンツをキャッシュして配信するように設計されています。 CDN がキャッシュされたバージョンの資産を誤って提供すると、ユーザーに古いコンテンツが配信される可能性があります。

アップグレードの問題を検出して診断する

通常、アップグレードに問題があると、ブラウザーでアプリを開始できなくなります。 通常、警告では、古い資産があること、資産に対応するアプリがないこと、または資産とアプリが一致していないことが示されます。

• まず、クリーンなブラウザー インスタンス内でアプリが正常に読み込まれるかどうかを調べます。 プライベート ブラウザー モードを使って、Microsoft Edge InPrivate モードや Google Chrome Incognito モードなどのアプリを読み込みます。 アプリの読み込みが失敗する場合、1 つ以上のパッケージまたはフレームワークが正しく更新されなかったことを意味する可能性があります。
• クリーンなブラウザー インスタンスでアプリが正しく読み込まれる場合は、アプリが古いキャッシュから提供されている可能性があります。 ほとんどの場合、Ctrl+F5 キーを押してブラウザーのハード更新を行うとキャッシュがフラッシュされ、アプリは最新の資産を読み込んで実行できます。
• アプリが引き続き失敗する場合は、古い CDN キャッシュからコンテンツがアプリに提供されている可能性があります。 CDN プロバイダーが提供しているメカニズムを使用して、DNS キャッシュをフラッシュしてみてください。

アップグレードの前に推奨されるアクション

以前のアプリ提供プロセスによって、更新プロセスの難しさが増す可能性があります。 たとえば、過去にキャッシュ ヘッダーを回避したり誤って使っていたりした場合、ユーザーに対する現在のキャッシュで問題が発生する可能性があります。 以下のセクションのアクションを実行することで、問題を軽減し、ユーザーのアップグレード プロセスを改善できます。

フレームワークのパッケージとフレームワークのバージョンを一致させる

フレームワークのパッケージがフレームワークのバージョンに合っていることを確認します。 新しいバージョンを利用できるようになっても以前のバージョンのパッケージを使っていると、互換性の問題が発生する可能性があります。 また、アプリのすべてのデプロイされるプロジェクトで、同じメジャー フレームワーク バージョンを使うことも重要です。 この一貫性は、予期しない動作とエラーを回避するのに役立ちます。

正しいキャッシュ ヘッダーが存在することを確認する

リソース要求への応答に、正しいキャッシュ ヘッダーが存在する必要があります。 これには、ETag、Cache-Control、その他のキャッシュ ヘッダーが含まれます。 これらのヘッダーの構成は、ホスティング サービスまたはホスティング サーバーのプラットフォームによって異なります。 これらは、Blazor スクリプト (blazor.webassembly.js) やスクリプトがダウンロードするすべてのものなどの資産の場合に特に重要です。

正しくない HTTP キャッシュ ヘッダーは、サービス ワーカーにも影響する可能性があります。 サービス ワーカーは、キャッシュされたリソースを効果的に管理するためにキャッシュ ヘッダーに依存します。 そのため、ヘッダーが正しくないか不足していると、サービス ワーカーの機能が損なわれる可能性があります。

Clear-Site-Data を使用してブラウザーの状態を削除する

Clear-Site-Data ヘッダーを使ってブラウザーの状態を削除することを検討します。

通常、キャッシュの状態に関する問題の原因は、HTTP ブラウザー キャッシュに限定されるため、cache ディレクティブを使うだけで十分です。 このアクションは、ブラウザーが、キャッシュから古いコンテンツを提供するのではなく、サーバーから最新のリソースを確実にフェッチするのに役立ちます。

必要に応じて、storage ディレクティブを含めて、HTTP ブラウザー キャッシュをクリアするのと同時にローカル ストレージ キャッシュをクリアできます。 ただし、storage ディレクティブを使った場合、クライアント ストレージを使用するアプリで重要な情報が失われる可能性があります。

Blazor スクリプト タグにクエリ文字列を追加する

これまでに推奨したどのアクションも、有効でない場合、デプロイに使用できない場合、またはアプリに適用できない場合は、Blazor スクリプトの <script> タグ ソースにクエリ文字列を一時的に追加することを検討してください。 このアクションは、ほとんどの状況で、ブラウザーに強制的にローカル HTTP キャッシュをバイパスさせて、新しいバージョンのアプリをダウンロードさせるのに十分なはずです。 アプリでクエリ文字列を読み取ったり使ったりする必要はありません。

次の例では、<script> タグの相対外部ソース URI に、クエリ文字列 temporaryQueryString=1 を一時的に適用しています。

<script src="_framework/blazor.webassembly.js?temporaryQueryString=1"></script>

アプリのすべてのユーザーがアプリを再度読み込んだ後で、クエリ文字列を削除できます。

または、関連するバージョン管理で永続的なクエリ文字列を適用することもできます。 次の例では、アプリのバージョンが .NET のリリース バージョンと一致するものと想定されています (.NET 8 の場合は 8)。

<script src="_framework/blazor.webassembly.js?version=8"></script>

Blazor スクリプトの <script> タグの場所については、「ASP.NET Core Blazor プロジェクトの構造」をご覧ください。