Mantenimento degli aggiornamenti con lo stale-while-revalidate

Un ulteriore strumento che ti aiuta a trovare il giusto equilibrio tra immediatezza e aggiornamento quando pubblichi la tua app web.

Jeff Posnick

Cosa è stato spedito?

stale-while-revalidate aiuta gli sviluppatori a trovare un equilibrio tra immediatezza,caricamento immediato di contenuti memorizzati nella cachee aggiornamentogarantisce che gli aggiornamenti ai contenuti memorizzati nella cache vengano utilizzati in futuro Se gestisci una libreria o un servizio web di terze parti che si aggiorna su una pianificazione regolare o se i tuoi asset proprietari tendono ad avere una durata breve, stale-while-revalidate potrebbe essere un'aggiunta utile ai tuoi criteri di memorizzazione nella cache esistenti.

Il supporto per l'impostazione di stale-while-revalidate insieme a max-age nell'intestazione della risposta Cache-Control è disponibile in Chrome 75 e Firefox 68.

I browser che non supportano stale-while-revalidate ignoreranno automaticamente questo valore di configurazione e utilizzeranno max-age, come spiegherò a breve...

Che cosa significa?

Suddividiamo stale-while-revalidate in due parti: l'idea che una risposta memorizzata nella cache potrebbe essere obsoleta e il processo di riconvalida.

Innanzitutto, come fa il browser a sapere se una risposta memorizzata nella cache è "inattiva"? Un'intestazione della risposta Cache-Control contenente stale-while-revalidate deve contenere anche max-age e il numero di secondi specificato tramite max-age è ciò che determina lo stato di inattività. Qualsiasi risposta memorizzata nella cache più recente di max-age è considerata aggiornata, mentre le risposte memorizzate nella cache meno recenti sono obsolete.

Se la risposta memorizzata nella cache locale è ancora aggiornata, può essere utilizzata così com'è per soddisfare la richiesta di un browser. Dal punto di vista di stale-while-revalidate, non c'è niente da fare in questo scenario.

Tuttavia, se la risposta memorizzata nella cache è obsoleta, viene eseguito un altro controllo basato sull'età: l'età della risposta memorizzata nella cache rientra nell'intervallo di tempo aggiuntivo fornito dall'impostazione stale-while-revalidate?

Se l'età di una risposta obsoleta rientra in questa finestra, questa verrà utilizzata per soddisfare la richiesta del browser. Allo stesso tempo, verrà effettuata una richiesta di "riconvalida" alla rete in modo da non ritardare l'utilizzo della risposta memorizzata nella cache. La risposta restituita potrebbe contenere le stesse informazioni della risposta precedentemente memorizzata nella cache oppure essere diversa. In ogni caso, la risposta di rete viene archiviata in locale, sostituendo ciò che era precedentemente memorizzato nella cache e reimpostando il timer di "aggiornamento" utilizzato durante eventuali confronti futuri di max-age.

Tuttavia, se la risposta memorizzata nella cache è abbastanza vecchia da non rientrare nel periodo di tempo stale-while-revalidate, non soddisferà la richiesta del browser. Il browser recupererà invece una risposta dalla rete e la utilizzerà per soddisfare la richiesta iniziale e compilare la cache locale con una risposta aggiornata.

Esempio dal vivo

Di seguito è riportato un semplice esempio di API HTTP per la restituzione dell'ora attuale, più specificamente, del numero attuale di minuti oltre l'ora.

In questo scenario, il server web utilizza questa intestazione Cache-Control nella risposta HTTP:

Cache-Control: max-age=1, stale-while-revalidate=59

Questa impostazione significa che, se una richiesta relativa all'ora viene ripetuta entro il secondo (1) successivo, il valore memorizzato in precedenza nella cache sarà comunque aggiornato e utilizzato così com'è, senza riconvalida.

Se una richiesta viene ripetuta tra 1 e 60 secondi dopo, il valore memorizzato nella cache sarà inattivo, ma verrà utilizzato per soddisfare la richiesta API. Allo stesso tempo, "in background", viene effettuata una richiesta di riconvalida per completare la cache con un nuovo valore per uso futuro.

Se una richiesta viene ripetuta dopo più di 60 secondi, la risposta obsoleta non viene utilizzata e sia per soddisfare la richiesta del browser sia per la riconvalida della cache dipenderà dalla ricezione di una risposta dalla rete.

Di seguito un'analisi di questi tre stati distinti, insieme alla finestra temporale in cui ciascuno di essi si applica al nostro esempio:

Un diagramma che illustra le informazioni della sezione precedente.

Quali sono i casi d'uso più comuni?

Sebbene l'esempio precedente per un servizio API "minuti dopo l'ora" sia artificioso, illustra il caso d'uso previsto, i servizi che forniscono informazioni che devono essere aggiornate, ma in cui è accettabile un certo grado di obsolescenza.

Esempi meno fittizi potrebbero essere un'API per le condizioni meteo attuali o i titoli delle notizie principali scritti nell'ultima ora.

In genere, qualsiasi risposta che si aggiorna a un intervallo noto, è probabile che venga richiesta più volte e che sia statica entro questo intervallo è una buona candidata per la memorizzazione nella cache a breve termine tramite max-age. L'utilizzo di stale-while-revalidate in aggiunta a max-age aumenta la probabilità che le richieste future possano essere soddisfatte dalla cache con contenuti più recenti, senza bloccare una risposta di rete.

Come interagisce con i service worker?

Se hai sentito parlare di stale-while-revalidate, è probabile che si trovi nel contesto di ricette utilizzate all'interno di un service worker.

L'uso di "instale-while-revalidate" tramite un'intestazione Cache-Control condivide alcune analogie con il suo utilizzo in un service worker; si applicano molte delle stesse considerazioni sui compromessi relativi all'aggiornamento e sulla durata massima. Tuttavia, ci sono alcune considerazioni di cui dovresti tenere conto quando decidi se implementare un approccio basato sui service worker o semplicemente sulla configurazione dell'intestazione Cache-Control.

Utilizza un approccio basato sul service worker se...

  • Stai già utilizzando un service worker nella tua applicazione web.
  • Hai bisogno di un controllo granulare sui contenuti delle cache e vuoi implementare qualcosa come un criterio di scadenza utilizzato meno di recente. Il modulo Scadenza della cache di Workbox può essere d'aiuto.
  • Vuoi ricevere una notifica quando una risposta inattiva viene modificata in background durante il passaggio di riconvalida. Il modulo di aggiornamento della cache della trasmissione di Workbox può essere d'aiuto.
  • Hai bisogno di questo comportamento stale-while-revalidate in tutti i browser moderni.

Utilizza un approccio Cache-Control se...

  • Preferiresti non doverti occupare dell'overhead associato al deployment e alla gestione di un service worker per la tua applicazione web.
  • Puoi lasciare che la gestione automatica della cache del browser impedisca alle cache locali di crescere troppo grandi.
  • Accetti un approccio che al momento non è supportato in tutti i browser moderni (da luglio 2019; il supporto potrebbe aumentare in futuro).

Se utilizzi un service worker e hai abilitato stale-while-revalidate anche per alcune risposte tramite un'intestazione Cache-Control, il service worker, in generale, avrà il "primo attacco" nel rispondere a una richiesta. Se il service worker decide di non rispondere o se durante la generazione di una risposta effettua una richiesta di rete utilizzando fetch(), viene applicato il comportamento configurato tramite l'intestazione Cache-Control.

Scopri di più

Immagine hero di Samuel Zeller.