Compartir a través de

Prevención de problemas de almacenamiento en caché HTTP al actualizar aplicaciones de ASP.NET Core Blazor

  • Artículo

Nota:

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

Advertencia

Esta versión de ASP.NET Core ya no se admite. Para obtener más información, consulte la Directiva de soporte técnico de .NET y .NET Core. Para la versión actual, consulte la versión .NET 8 de este artículo.

Importante

Esta información hace referencia a un producto en versión preliminar, el cual puede sufrir importantes modificaciones antes de que se publique la versión comercial. Microsoft no proporciona ninguna garantía, expresa o implícita, con respecto a la información proporcionada aquí.

Para la versión actual, consulte la versión .NET 8 de este artículo.

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

Aunque las versiones futuras de Blazor podrían proporcionar mejores soluciones para solucionar problemas de almacenamiento en caché HTTP, en última instancia es la aplicación la que debe 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 actualizada, lo que mejora su experiencia y reduce 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 que usen 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, es posible que los usuarios reciban contenido obsoleto.
  • 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 configuradas incorrectamente. Por ejemplo, las redes CDN están diseñadas para almacenar contenido en caché y entregarlo 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 bien si falta un recurso 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 Incógnito de Google Chrome. Si la aplicación no se carga, probablemente significa que uno o varios paquetes, o el marco no se han actualizado 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 forzada del explorador con Ctrl+F5 vacía la caché, lo que permite que la aplicación se cargue y se ejecute con los recursos más recientes.
  • Si se sigue produciendo un error en la aplicación, es probable que una caché de red CDN obsoleta sirva la aplicación. Intente vaciar la caché de DNS mediante el mecanismo que ofrezca el proveedor de la red CDN.

Es posible que el proceso anterior para servir la aplicación haga que el proceso de actualización sea más difícil. Por ejemplo, evitar o usar encabezados incorrectamente de almacenamiento en caché en el pasado puede provocar problemas actuales de almacenamiento en caché 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 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.

Comprobación de 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-Control y 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 recursos como el script Blazor (blazor.webassembly.js) y todo lo que descargue el script.

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

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

Considere la posibilidad de usar el encabezado Clear-Site-Data 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 directiva cache 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 caché.

Opcionalmente, puede incluir la directiva storage para borrar las memorias caché de almacenamiento local al mismo tiempo que borra la caché del explorador HTTP. Pero es posible que las aplicaciones que usan el almacenamiento de cliente experimenten una pérdida de información importante si se usa la directiva storage.

Anexión de una cadena de consulta a la etiqueta de script Blazor

Si ninguna de las acciones recomendadas anteriores es eficaz, se pueden usar para la implementación ni aplicar a la aplicación, considere la posibilidad de anexar temporalmente una cadena de consulta al origen de etiquetas <script> del script Blazor. 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 de consulta temporaryQueryString=1 se aplica temporalmente al URI de origen externo relativo de la etiqueta <script>:

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

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

Como alternativa, puede aplicar una cadena de consulta persistente con el control de versiones adecuado. En el ejemplo siguiente se supone 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 <script> del script Blazor, vea Estructura del proyecto Blazor de ASP.NET Core.