Jak naprawić problemy z cache'owaniem w aplikacji

Gdy wprowadzasz zmiany na swojej stronie – czy to w wyglądzie, treści, czy funkcjonalności JavaScript – oczekujesz, że pojawią się one od razu. Czasem jednak pojawia się frustrujący problem: aktualizujesz stronę, ale zmiany nie są widoczne w aplikacji.

W większości przypadków winny jest cache. Gdy Twoja strona jest zamieniana w aplikację, aplikacja korzysta z ustawień cache Twojej strony – tak jak przeglądarka. Jeśli zasoby strony są cache'owane zbyt długo, aplikacja będzie ładować stare wersje plików, przez co wygląda, jakby zmiany nie zostały wprowadzone.

W tym wpisie wyjaśnię, jak działa cache, dlaczego pojawia się ten problem i co możesz zrobić, żeby go rozwiązać.

Nie jesteś pewien, czy to cache jest przyczyną problemu? Zobacz nasz poradnik, jak zdiagnozować, dlaczego zmiany na stronie nie pojawiają się w aplikacji.

Czym jest cache?

Cache to mechanizm, który przechowuje kopie zasobów Twojej strony (CSS, JavaScript, obrazki itd.), żeby szybciej się ładowały przy kolejnych wizytach. Zamiast pobierać te same pliki za każdym razem, przeglądarka (albo aplikacja) może je pobrać z pamięci lokalnej.

To świetne dla wydajności, ale może powodować problemy, gdy zaktualizujesz pliki na stronie, a aplikacja lub przeglądarka nadal korzysta ze starych, zapisanych w cache wersji. Oznacza to, że odwiedzający mogą nie zobaczyć najnowszych zmian od razu, tylko dopiero po wygaśnięciu cache.

Ustawienia cache, które mogą powodować problemy

• Nagłówki Cache-Control: Te nagłówki HTTP określają, jak długo przeglądarki i webview mają przechowywać zasoby w cache. Jeśli ustawisz je na długi czas, aplikacja nie pobierze nowych wersji plików, dopóki cache nie wygaśnie.

• ETag: Niektóre strony używają ETagów (Entity Tags), żeby sprawdzić, czy zasób się zmienił. Jeśli jednak ETag nie zmieni się po aktualizacji pliku, aplikacja może nie pobrać nowej wersji.

Jak zapobiec tym problemom z cache?

Oto kilka sposobów, żeby zmiany na stronie szybko pojawiały się w aplikacji:

Stosuj wersjonowanie zasobów

Jedną z najlepszych praktyk jest dodanie numeru wersji lub unikalnego parametru do adresów plików CSS i JS. Na przykład:

<link rel="stylesheet" href="style.css?version=1.2">
<script src="main.js?version=1.2"></script>

Dzięki temu, gdy zaktualizujesz pliki, możesz zmienić numer wersji (version=1.3 na przykład), a aplikacja potraktuje to jako nowy plik i pominie starą wersję z cache.

Ta technika nazywa się też cache busting. Minusem jest to, że musisz edytować wszystkie pliki HTML, w których odwołujesz się do tego pliku, co może być żmudne – np. główny plik CSS może być podlinkowany w wielu plikach HTML na stronie, więc trzeba by zmienić link we wszystkich tych plikach.

Zmień nagłówki Cache-Control

Możesz ustawić nagłówki Cache-Control na swoim serwerze, żeby kontrolować, jak długo zasoby są przechowywane w cache. Krótszy czas cache (np. 1 dzień lub nawet 1 godzina) sprawi, że aktualizacje szybciej pojawią się w aplikacji. Zbyt krótki czas cache może jednak pogorszyć wydajność strony, więc warto znaleźć złoty środek.

Jeśli Twój serwer używa entity tags, skraca to negatywny wpływ krótkiego czasu cache. Gdy czas wygaśnie i plik będzie potrzebny, aplikacja wyśle zapytanie do serwera z tagiem starego pliku. Jeśli serwer wykryje, że tag się nie zmienił, poinformuje aplikację, że plik jest taki sam i można dalej korzystać z wersji z cache. Więc zapytań do serwera jest więcej, ale są one bardzo małe i szybkie, bo nie trzeba przesyłać całego pliku, jeśli się nie zmienił.

Ręczne czyszczenie cache

Na iOS możesz wyczyścić cache aplikacji, odinstalowując i ponownie instalując aplikację.

To samo działa na Androidzie, ale tam możesz też wejść w informacje o aplikacji i kliknąć "Pamięć". Tam możesz wyczyścić dane aplikacji. Daje to taki sam efekt jak odinstalowanie i ponowna instalacja, ale jest dużo szybsze.

Podsumowanie

Jeśli Twoja aplikacja oparta na stronie nie pokazuje najnowszych zmian w CSS lub JS, to najprawdopodobniej przez cache. Rozumiejąc, jak działa cache i stosując dobre praktyki – jak wersjonowanie zasobów czy ustawianie nagłówków cache – unikniesz tych problemów i Twoje aktualizacje zawsze będą widoczne w aplikacji.