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

注

これは、この記事の最新バージョンではありません。 現在のリリースについては、 この記事の .NET 10 バージョンを参照してください。

Warnung

このバージョンの ASP.NET Core はサポート対象から除外されました。 詳細については、 .NET および .NET Core サポート ポリシーを参照してください。 現在のリリースについては、この記事の .NET 9 バージョンを参照してください。

この記事では、 Blazor アプリをアップグレードするときに HTTP キャッシュの問題を回避する方法について説明します。

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

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

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

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

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

通常、アップグレードの問題は、ブラウザーでアプリを起動できないと表示されます。 通常、警告は、古い資産またはアプリに不足しているか、または一貫性のない資産が存在することを示します。

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

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

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

フレームワーク パッケージをフレームワーク のバージョンに合わせる

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

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

リソース要求への応答には、適切なキャッシュ ヘッダーが存在する必要があります。 これには、 ETag、 Cache-Control、およびその他のキャッシュ ヘッダーが含まれます。 これらのヘッダーの構成は、ホスティング サービスまたはホスティング サーバー プラットフォームによって異なります。 これらは、Blazorスクリプトやそのスクリプトがダウンロードするあらゆる資産にとって特に重要です。

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

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

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

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

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

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

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

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

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

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

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

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

Blazor スクリプトの<script>タグの場所については、「core Blazor プロジェクト構造 ASP.NET 参照してください。