Aggirare la cache del browser per le immagini contenute in un una pagina web
Un problema che mi sono trovato ad affrontare un paio di volte è quello del caching delle immagini da parte del browser.
Tutti i browser, di default, memorizzano le pagine e gli oggetti contenutivi (come appunto le immagini, o anche un filmato .swf) nella loro memoria cache per velocizzare l'esperienza di navigazione.
Purtroppo però questo rappresenta anche un fastidioso ostacolo per chi sviluppa web application.
Per forzare un browser (lato server) a non utilizzare la cache per una determinata pagina ci sono un paio di trucchetti, ma purtroppo questi non funzionano con le immagini (o altri oggetti) incorporate all'interno della pagina.
Ad esempio:
SCENARIO A.1 - Nessuna precauzione lato server e impostazioni di default del browser
si abbia una pagina [index.htm] che contiene una immagine [photo.jpg].
L'utente A richiede la pagina [index.htm]. Il server B la invia così com'è. Il browser dell'utente A la riceve, controlla tutti gli oggetti incorporati (tra cui l'immagine [photo.jpg]) e li richiede al server B, salvando tutto in cache.
Supponiamo che finita questa operazione, sul server B, l'immagine venga sostituita con una nuova mantenendo sempre il nome [photo.jpg].
L'utente A riaccede alla stessa pagina. Il browser dell'utente vede che la pagina e gli oggetti sono in cache e quindi li mostra a video all'utente senza richiedere quelli aggiornati al server B.
Risultato: l'utente NON vede l'immagine aggiornata.
SCENARIO A.2
Supponiamo che lato server si sia provveduto a far in modo che il browser dell'utente non utilizzi la cache per quel che riguarda la pagina.
L'utente A riaccede a [index.htm]. Il suo browser richiede la pagina al server B che la restituisce. Il browser dell'utente la scorre e cerca gli oggetti incorporati. Tra questi c'è anche l'immagine [photo.jpg] che è memorizzata in cache, per cui il browser non la richiederà al server B.
Risultato: l'utente ottiene la pagina aggiornata, ma NON l'immagine nuova!
SOLUZIONE:
Per ovviare a questo problema ho trovato una soluzione che permette di ingannare il browser, forzandolo a credere di dover cercare sempre un'immagine diversa.
Il codice per incorporare un'immagine in un file html è il seguente:
<img src="photo.jpg" />
Per convincere il browser che deve cercare una immagine diversa dalla precedente basta utilizzare l'invio di parametri fasulli.
<img src="photo.jpg?parametrofasullo=53876453" />
Come si può vedere l'attributo "src" del tag img è cambiato, ma il suo significato in realtà è rimasto lo stesso di prima. La stringa è diversa, ma tutti i caratteri che ci sono dopo il punto interrogativo non influenzano a livello gerarchico la ricerca del file [photo.jpg] sul server.
Cambiando tali parametri ogni volta che l'utente A riceve la pagina dal server B, convinceremo il browser a cercare anche l'immagine aggiornata, senza utilizzare la cache.
Infatti :
"photo.jpg" != "photo.jpg?53876453"
Per ottenere questa soluzione basta usare un piccolo script per linguaggi che operano lato server (PHP, eRuby, ASP) per ogni immagine che riteniamo necessario che non venga memorizzata in cache.
Esempio in PHP (la pagina dovrà quindi essere index.php):
<img src="photo.jpg<?php echo "?".rand(0,30000); ?>" />
Il codice PHP produrra tramite la funzione rand() un numero differente ogni volta.
Tutti i browser, di default, memorizzano le pagine e gli oggetti contenutivi (come appunto le immagini, o anche un filmato .swf) nella loro memoria cache per velocizzare l'esperienza di navigazione.
Purtroppo però questo rappresenta anche un fastidioso ostacolo per chi sviluppa web application.
Per forzare un browser (lato server) a non utilizzare la cache per una determinata pagina ci sono un paio di trucchetti, ma purtroppo questi non funzionano con le immagini (o altri oggetti) incorporate all'interno della pagina.
Ad esempio:
SCENARIO A.1 - Nessuna precauzione lato server e impostazioni di default del browser
si abbia una pagina [index.htm] che contiene una immagine [photo.jpg].
L'utente A richiede la pagina [index.htm]. Il server B la invia così com'è. Il browser dell'utente A la riceve, controlla tutti gli oggetti incorporati (tra cui l'immagine [photo.jpg]) e li richiede al server B, salvando tutto in cache.
Supponiamo che finita questa operazione, sul server B, l'immagine venga sostituita con una nuova mantenendo sempre il nome [photo.jpg].
L'utente A riaccede alla stessa pagina. Il browser dell'utente vede che la pagina e gli oggetti sono in cache e quindi li mostra a video all'utente senza richiedere quelli aggiornati al server B.
Risultato: l'utente NON vede l'immagine aggiornata.
SCENARIO A.2
Supponiamo che lato server si sia provveduto a far in modo che il browser dell'utente non utilizzi la cache per quel che riguarda la pagina.
L'utente A riaccede a [index.htm]. Il suo browser richiede la pagina al server B che la restituisce. Il browser dell'utente la scorre e cerca gli oggetti incorporati. Tra questi c'è anche l'immagine [photo.jpg] che è memorizzata in cache, per cui il browser non la richiederà al server B.
Risultato: l'utente ottiene la pagina aggiornata, ma NON l'immagine nuova!
SOLUZIONE:
Per ovviare a questo problema ho trovato una soluzione che permette di ingannare il browser, forzandolo a credere di dover cercare sempre un'immagine diversa.
Il codice per incorporare un'immagine in un file html è il seguente:
<img src="photo.jpg" />
Per convincere il browser che deve cercare una immagine diversa dalla precedente basta utilizzare l'invio di parametri fasulli.
<img src="photo.jpg?parametrofasullo=53876453"
Come si può vedere l'attributo "src" del tag img è cambiato, ma il suo significato in realtà è rimasto lo stesso di prima. La stringa è diversa, ma tutti i caratteri che ci sono dopo il punto interrogativo non influenzano a livello gerarchico la ricerca del file [photo.jpg] sul server.
Cambiando tali parametri ogni volta che l'utente A riceve la pagina dal server B, convinceremo il browser a cercare anche l'immagine aggiornata, senza utilizzare la cache.
Infatti :
"photo.jpg" != "photo.jpg?53876453"
Per ottenere questa soluzione basta usare un piccolo script per linguaggi che operano lato server (PHP, eRuby, ASP) per ogni immagine che riteniamo necessario che non venga memorizzata in cache.
Esempio in PHP (la pagina dovrà quindi essere index.php):
<img src="photo.jpg<?php echo "?".rand(0,30000); ?>" />
Il codice PHP produrra tramite la funzione rand() un numero differente ogni volta.


