Evitar problemas de almacenamiento en caché HTTP al actualizar aplicaciones de ASP.NET Core Blazor

Nota:

Esta no es la versión más reciente de este artículo. Para la versión actual, consulte la versión de .NET 10 de este artículo.

Advertencia

Esta versión de ASP.NET Core ya no se admite. Para obtener más información, consulte la política de soporte de .NET y .NET Core. Para la versión actual, consulte la versión de .NET 10 de este artículo.

En este artículo se explica cómo evitar problemas de almacenamiento en caché HTTP al actualizar Blazor aplicaciones.

Cuando Blazor las aplicaciones se actualizan o configuran incorrectamente, puede dar lugar a actualizaciones no fluidas para los usuarios existentes. En este artículo se describen algunos de los problemas comunes de almacenamiento en caché HTTP que pueden producirse al actualizar Blazor aplicaciones entre versiones principales. También proporciona algunas acciones recomendadas para garantizar una transición sin problemas para los usuarios.

Aunque las versiones futuras Blazor podrían proporcionar mejores soluciones para solucionar problemas de almacenamiento en caché HTTP, en última instancia la aplicación puede configurar correctamente el almacenamiento en caché. La configuración correcta del almacenamiento en caché garantiza que los usuarios de la aplicación siempre tengan la versión más up-to-date de la aplicación, mejorando su experiencia y reduciendo la probabilidad de encontrar errores.

Entre los problemas comunes que afectan negativamente a la experiencia de actualización del usuario se incluyen los siguientes:

• Control incorrecto de las actualizaciones de proyectos y paquetes: esto sucede si no actualiza todos los proyectos implementados de la aplicación para usar la misma versión de marco principal o si usa paquetes de una versión anterior cuando una versión más reciente está disponible como parte de la actualización principal.
• Configuración incorrecta de encabezados de almacenamiento en caché: los encabezados de almacenamiento en caché HTTP controlan cómo, dónde y durante cuánto tiempo se almacenan en caché las respuestas de la aplicación. Si los encabezados no están configurados correctamente, los usuarios pueden recibir archivos obsoletos o no coincidentes. Esto incluye Blazor el almacenamiento en caché de recursos de agrupación, donde los encabezados de almacenamiento en caché del servidor deben establecerse correctamente para evitar problemas de almacenamiento en caché en el cliente.
• Configuración incorrecta de otras capas: Las redes de entrega de contenido (CDN) y otras capas de la aplicación implementada pueden causar problemas si están configurados incorrectamente. Por ejemplo, las redes CDN están diseñadas para almacenar en caché y entregar contenido para mejorar el rendimiento y reducir la latencia. Si una red CDN atiende incorrectamente las versiones almacenadas en caché de los recursos, puede provocar la entrega de contenido obsoleta al usuario.

Detección y diagnóstico de problemas de actualización

Los problemas de actualización suelen aparecer como un error al iniciar la aplicación en el explorador. Normalmente, una advertencia indica la presencia de un recurso obsoleto o un recurso que falta o es incoherente con la aplicación.

• En primer lugar, compruebe si la aplicación se carga correctamente dentro de una instancia de explorador limpia. Use un modo de explorador privado para cargar la aplicación, como el modo InPrivate de Microsoft Edge o el modo de incógnito de Google Chrome. Si la aplicación no se carga, probablemente significa que uno o varios paquetes o el marco no se actualizaron correctamente.
• Si la aplicación se carga correctamente en una instancia de explorador limpia, es probable que la aplicación se sirva desde una caché obsoleta. En la mayoría de los casos, una actualización del explorador duro con Ctrl+F5 vacía la memoria caché, lo que permite que la aplicación se cargue y ejecute con los recursos más recientes.
• Si la aplicación sigue produciendo un error, es probable que una caché de CDN obsoleta sirva a la aplicación. Intente vaciar la caché DNS a través del mecanismo que el proveedor de CDN ofrece.

Acciones recomendadas antes de una actualización

El proceso anterior para atender la aplicación podría hacer que el proceso de actualización sea más difícil. Por ejemplo, evitar o incorrectamente usar encabezados de almacenamiento en caché en el pasado puede provocar problemas de almacenamiento en caché actuales para los usuarios. Puede realizar las acciones de las secciones siguientes para mitigar el problema y mejorar el proceso de actualización para los usuarios.

Alineación de paquetes de marco con la versión del marco

Asegúrese de que los paquetes de marco se alinean con la versión del marco. El uso de paquetes de una versión anterior cuando hay disponible una versión más reciente puede provocar problemas de compatibilidad. También es importante asegurarse de que todos los proyectos implementados de la aplicación usen la misma versión de marco principal. Esta coherencia ayuda a evitar errores y comportamientos inesperados.

Comprobar la presencia de encabezados de almacenamiento en caché correctos

Los encabezados de almacenamiento en caché correctos deben estar presentes en las respuestas a las solicitudes de recursos. Esto incluye ETag, Cache-Controly otros encabezados de almacenamiento en caché. La configuración de estos encabezados depende del servicio de hospedaje o de la plataforma del servidor de hospedaje. Son especialmente importantes para los activos, como el Blazor script y cualquier elemento que el script descargue.

Los encabezados de almacenamiento en caché HTTP incorrectos también pueden afectar a los trabajadores del servicio. Los trabajadores del servicio se basan en encabezados de almacenamiento en caché para administrar los recursos almacenados en caché de forma eficaz. Por lo tanto, los encabezados incorrectos o que faltan pueden interrumpir la funcionalidad del service worker.

Uso Clear-Site-Data para eliminar el estado en el explorador

Considere la posibilidad de usar el Clear-Site-Data encabezado para eliminar el estado en el explorador.

Normalmente, el origen de los problemas de estado de caché se limita a la caché del explorador HTTP, por lo que el uso de la cache directiva debe ser suficiente. Esta acción puede ayudar a garantizar que el explorador captura los recursos más recientes del servidor, en lugar de servir contenido obsoleto desde la memoria caché.

Opcionalmente, puede incluir la storage directiva para borrar las memorias caché de almacenamiento local al mismo tiempo que va a borrar la caché del explorador HTTP. Sin embargo, las aplicaciones que usan el almacenamiento de cliente pueden experimentar una pérdida de información importante si se usa la storage directiva .

Anexar una cadena de consulta a la etiqueta de Blazor script

Si ninguna de las acciones recomendadas anteriores es eficaz, no se pueden utilizar en su implementación o no se aplican a su aplicación, considere anexar temporalmente una cadena de consulta a la fuente del script Blazor<script>. Esta acción debe ser suficiente en la mayoría de las situaciones para forzar al explorador a omitir la caché HTTP local y descargar una nueva versión de la aplicación. No es necesario leer ni usar la cadena de consulta en la aplicación.

En el ejemplo siguiente, la cadena temporaryQueryString=1 de consulta se aplica temporalmente al URI de origen externo relativo de la <script> etiqueta:

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

Una vez que todos los usuarios de la aplicación han vuelto a cargar la aplicación, se puede quitar la cadena de consulta.

Como alternativa, puede aplicar una cadena de consulta persistente con el control de versiones pertinente. En el ejemplo siguiente se asume que la versión de la aplicación coincide con la versión de .NET (8 para .NET 8):

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

Para obtener la ubicación de la etiqueta Blazor script<script>, consulte la estructura del proyecto ASP.NET CoreBlazor.