Tutti usiamo i fogli di stile nelle nostre pagine web. Moltissimi integriamo funzionalità in JavaScript per rendere più desktop possibile applicazioni server. Tanto più il nostro cervello pensa, tanto maggiore è la probabilità che questi file vengano spesso editati e reinviati al server.
Non vi è mai successo di editare un vostro foglio di stile, reinviarlo al server e dover aggiornare la pagina con un CTRL+RELOAD al fine di vedere le nuove modifiche apportate? O ancora, testare on line una nuova funzione inclusa in un vecchio js e vedervi rispondere dalla console che "qualcosa() is not a function". Il problema non risiede nel server, che ospita il file corrette, ma nella cache del browser del client che richiede la pagina.
Se il client è colui che ha appena aggiornato il file, poco male. Un paio di F5 e tutto si risolve. Ma chi non sa delle modifiche e non è solito ripulire la cache di frequente, le prime volte che visiterà il vostro sito dopo le modifiche potrebbe avere delle difficoltà.
Come fare per evitare problemi di sorta? Basta aggiungere un parametro all’indirizzo src del file. Se nei tag del head abbiamo queste due righe:
<link rel="stylesheet" type="text/css" media="all" href="http://www.exampe.com/style.css" />
<script type="text/javascript" src="http://www.exampe.com/js.js"></script>
Dopo una modifica dei file js.js e style.css, riscriviamo i tag in questo modo:
<link rel="stylesheet" type="text/css" media="all" href="http://www.exampe.com/style.css?v=1" />
<script type="text/javascript" src="http://www.exampe.com/js.js?v=1"></script>
Non facciamo altro che dichiarare un version del file. E dato che style.css è diverso da style.css?v=1 il browser ricaricherà il file applicando automaticamente le nuove direttive incluse.
E’ una cosa da niente, ma sono i particolari a fare il tutto e niente è da sottovalutare 🙂