Automatic browser cache removal

Browser cache can cause a lot of trouble when we build a website and make changes on it. Browser refreshing doesn’t always help. Awareness on the subject of the browser cache is relatively low among internet users. Many people thinks that cache and cookies are the same thing. But they are not. When I was looking for a photo for this article, I used a phrase „browser cache” on a website with stock photos. In the search results there were mostly photos presenting browser cookies 🙂

Distinction between the browser cache and cookies

Cookies are small files that store text information. They are mostly used for your browser to remember if you are logged in on some websites that require logging in. Then can also store website settings or be used for marketing purposes. You can learn more about cookies on Wikipedia.

Browser cache stores the content of websites and their scripts – images, css files, javascript files. When we visit a website for the first time, the browser saves it’s content to cache system. When we visit the same website for the second time, browser uses it’s local cache resources so the website can load faster. In simple words – website content is stored on our device (computer, smartphone, tablet).

Cache is very useful, particularly when we have poor internet connection. But it is very distrubing when we make changes on the website and ask somebody to verify them. The person who will do it will probably see not the changed version, but the version of the website stored in he’s or she’s browser cache. In such situation we can try refresh browser. When it doesn’t help we need to remove/clear cache. It can be done in the browser settings but there are more convenient ways.

Cache from client side

Warto skorzystać z wtyczek do przeglądarek, które automatycznie usuwają nam pamięć podręczną. Do przeglądarki Google Chrome najbardziej polecam tę wtyczkę:

https://chrome.google.com/webstore/detail/cache-killer/jpfbieopdmepaolggioebjmedmclkbap

Wtyczka Cache Killer automatycznie usuwa nam pamięć podręczną przy każdym odświeżeniu. Można ją w każdej chwili włączyć i wyłączyć jednym kliknięciem. Gdy ją włączymy, przy wczytywaniu każdej strony internetowej usuwana jest pamięć podręczna. Przy odświeżaniu również (gdyż odświeżanie to nic innego jak ponowne wczytywanie).

Analogiczną wtyczką, o takim samym działaniu dla przeglądarki Mozilla Firefox jest Cache Disabler:

https://addons.mozilla.org/pl/firefox/addon/cache-disabler/

Twórcy tej wtyczki napisali nawet w opisie, że wzorowali się na Cache Killer z Google Chrome.

Managing cache for webdevelopers

Webdeveloper też ma możliwość wpływania na to, jak zachowuje się przeglądarka klienta (czy zapisuje zawartość strony w pamięci podręcznej, czy wczytuje za każdym razem od nowa stronę).

Są dwie najbardziej znane metody. Jedna to ustawienie odpowiednich parametrów w sekcji head strony internetowej. Są to następujące znaczniki meta:

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

Jest to rozwiązanie łatwe w zaimplementowaniu, jednak nie jest w 100% skuteczne.

Druga opcja to dodawanie losowego ciągu znaków do zasobów strony, czyli arkuszy stylów, skryptów i obrazków. Np. plik script.js można pobierać w ten sposób:

<script type="text/javascript" src="main.js?v=12392823"></script>

Obrazek zaś:

<img src="img/obrazek.jpg?9382938293" alt="Alt obrazka" />

Oczywiście część „12392823” oraz „9382938293” musi być losowym ciągiem znaków, nie może być stała.

Jest to rozwiązanie trudniejsze do zaimplementowania, nie zawsze możliwe (w zależności od rodzaju strony, budżetu na nią). Jeśli tylko mamy możliwość stosowania go – warto to zrobić.

Niestety również nie jest ono w 100% skuteczne. Widziałem strony, w których oba rozwiązania naraz były zaimplementowane, a klient i tak miał problem z wczytaniem nowej zawartości strony. Tak więc o ile warto stosować te metody, bo w większości przypadków są skuteczne, o tyle warto informować osoby weryfikujące stronę internetową o istnieniu wtyczek do przeglądarek opisanych powyżej.