Evitare problemi di memorizzazione nella cache HTTP durante l'aggiornamento delle app ASP.NET Core Blazor

Quando Blazor le app vengono aggiornate o configurate in modo non corretto, possono comportare aggiornamenti non semplici per gli utenti esistenti. Questo articolo illustra alcuni dei problemi comuni di memorizzazione nella cache HTTP che possono verificarsi durante l'aggiornamento Blazor delle app tra le versioni principali. Fornisce anche alcune azioni consigliate per garantire una transizione uniforme per gli utenti.

Anche se le versioni future Blazor potrebbero offrire soluzioni migliori per la gestione dei problemi di memorizzazione nella cache HTTP, in definitiva spetta all'app configurare correttamente la memorizzazione nella cache. La configurazione corretta della memorizzazione nella cache garantisce che gli utenti dell'app abbiano sempre la versione più aggiornata dell'app, migliorando l'esperienza e riducendo la probabilità di riscontrare errori.

I problemi comuni che influisce negativamente sull'esperienza di aggiornamento utente includono:

• Gestione errata degli aggiornamenti del progetto e del pacchetto: ciò si verifica se non si aggiornano tutti i progetti distribuiti dell'app per usare la stessa versione principale del framework o se si usano pacchetti di una versione precedente quando una versione più recente è disponibile come parte dell'aggiornamento principale.
• Configurazione errata delle intestazioni di memorizzazione nella cache: le intestazioni di memorizzazione nella cache HTTP controllano come, dove e per quanto tempo vengono memorizzate nella cache le risposte dell'app. Se le intestazioni non sono configurate correttamente, gli utenti potrebbero ricevere contenuto non aggiornato.
• Configurazione errata degli altri livelli: rete per la distribuzione di contenuti (CDN) e altri livelli dell'app distribuita possono causare problemi se configurati in modo non corretto. Ad esempio, le reti CDN sono progettate per memorizzare nella cache e distribuire contenuto per migliorare le prestazioni e ridurre la latenza. Se una rete CDN non gestisce correttamente le versioni memorizzate nella cache degli asset, può causare la distribuzione di contenuto non aggiornata all'utente.

Rilevare e diagnosticare i problemi di aggiornamento

I problemi di aggiornamento vengono in genere visualizzati come errore di avvio dell'app nel browser. In genere, un avviso indica la presenza di un asset non aggiornato o di un asset mancante o incoerente con l'app.

• Prima di tutto, controllare se l'app viene caricata correttamente in un'istanza del browser pulita. Usa una modalità browser privato per caricare l'app, ad esempio la modalità InPrivate di Microsoft Edge o la modalità in incognito di Google Chrome. Se l'app non viene caricata, è probabile che uno o più pacchetti o il framework non sia stato aggiornato correttamente.
• Se l'app viene caricata correttamente in un'istanza del browser pulita, è probabile che l'app venga servita da una cache non aggiornata. Nella maggior parte dei casi, un aggiornamento del browser rigido con CTRL+F5 scarica la cache, che consente all'app di caricare ed eseguire con gli asset più recenti.
• Se l'app continua a non riuscire, è probabile che una cache della rete CDN non aggiornata gestisca l'app. Provare a scaricare la cache DNS tramite qualsiasi meccanismo offerto dal provider della rete CDN.

Azioni consigliate prima di un aggiornamento

Il processo precedente per la gestione dell'app potrebbe rendere il processo di aggiornamento più complesso. Ad esempio, evitare o usare erroneamente le intestazioni di memorizzazione nella cache in passato può causare problemi di memorizzazione nella cache correnti per gli utenti. È possibile eseguire le azioni nelle sezioni seguenti per attenuare il problema e migliorare il processo di aggiornamento per gli utenti.

Allineare i pacchetti framework alla versione del framework

Assicurarsi che i pacchetti framework siano allineati alla versione del framework. L'uso di pacchetti di una versione precedente quando è disponibile una versione più recente può causare problemi di compatibilità. È anche importante assicurarsi che tutti i progetti distribuiti dell'app usino la stessa versione principale del framework. Questa coerenza consente di evitare comportamenti imprevisti ed errori.

Verificare la presenza di intestazioni di memorizzazione nella cache corrette

Le intestazioni di memorizzazione nella cache corrette devono essere presenti nelle risposte alle richieste di risorse. Sono incluse ETag, Cache-Controle altre intestazioni di memorizzazione nella cache. La configurazione di queste intestazioni dipende dal servizio di hosting o dalla piattaforma server di hosting. Sono particolarmente importanti per gli asset, ad esempio lo Blazor script (blazor.webassembly.js) e qualsiasi altro download dello script.

Le intestazioni di memorizzazione nella cache HTTP non corrette possono influire anche sugli operatori del servizio. I ruoli di lavoro dei servizi si basano sulle intestazioni di memorizzazione nella cache per gestire in modo efficace le risorse memorizzate nella cache. Pertanto, le intestazioni non corrette o mancanti possono interrompere la funzionalità del ruolo di lavoro del servizio.

Usare Clear-Site-Data per eliminare lo stato nel browser

Prendere in considerazione l'uso dell'intestazione Clear-Site-Data per eliminare lo stato nel browser.

In genere l'origine dei problemi di stato della cache è limitata alla cache del browser HTTP, quindi l'uso cache della direttiva deve essere sufficiente. Questa azione consente di garantire che il browser recuperi le risorse più recenti dal server, invece di gestire il contenuto non aggiornato dalla cache.

Facoltativamente, è possibile includere la storage direttiva per cancellare le cache di archiviazione locali contemporaneamente alla cancellazione della cache del browser HTTP. Tuttavia, le app che usano l'archiviazione client potrebbero riscontrare una perdita di informazioni importanti se viene usata la storage direttiva .

Aggiungere una stringa di query al Blazor tag script

Se nessuna delle azioni consigliate precedenti è efficace, è possibile usare per la distribuzione o applicare all'app, è consigliabile aggiungere temporaneamente una stringa di query all'origine Blazor tag dello <script> script. Questa azione dovrebbe essere sufficiente nella maggior parte delle situazioni per forzare il browser a ignorare la cache HTTP locale e scaricare una nuova versione dell'app. Non è necessario leggere o usare la stringa di query nell'app.

Nell'esempio seguente la stringa temporaryQueryString=1 di query viene temporaneamente applicata all'URI <script> di origine esterna relativo del tag:

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

Dopo che tutti gli utenti dell'app hanno ricaricato l'app, la stringa di query può essere rimossa.

In alternativa, è possibile applicare una stringa di query persistente con il controllo delle versioni pertinente. Nell'esempio seguente si presuppone che la versione dell'app corrisponda alla versione di versione .NET (8 per .NET 8):

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

Per il percorso del Blazor tag di script<script>, vedere ASP.NET struttura del progetto CoreBlazor.