Un ulteriore strumento che ti aiuta a trovare il giusto equilibrio tra immediatezza e aggiornamento quando pubblichi la tua app web.
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:
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ù
- risposta
stale-while-revalidate
nella specifica dell'API Fetch. - RFC 5861, relativo alla specifica
stale-while-revalidate
iniziale. - La cache HTTP: la prima linea di difesa, dalla guida "Affidabilità della rete" su questo sito.
Immagine hero di Samuel Zeller.