Czym jest pamięć podręczna aplikacji w HTML5…

Pamięć podręczna aplikacji (Application Cache) w HTML5 to mechanizm, który pozwala na działanie aplikacji internetowej offline, udostępniając zestaw zasobów (strony HTML, CSS, JavaScript, obrazy), które przeglądarka przechowuje lokalnie w pamięci podręcznej.

Aby korzystać z pamięci podręcznej aplikacji, potrzebny jest plik manifestu z rozszerzeniem .appcache, powiązany z stroną HTML przez atrybut manifest w tagu <html>:

<html manifest="manifest.appcache">
...
</html>

Struktura pliku manifestu wygląda następująco:

CACHE MANIFEST
# Wersja manifestu (opcjonalnie, do aktualizacji pamięci podręcznej)
# v1.0

CACHE:
# Zasoby jawnie przechowywane w pamięci podręcznej
/css/style.css
/js/script.js
/images/logo.png

FALLBACK:
# Zapasowe zasoby na wypadek braku połączenia
/offline.html /

NETWORK:
# Zasoby, które zawsze powinny być pobierane z sieci
*

Główne sekcje pliku manifestu:

CACHE:: Zasoby wymienione w tej sekcji będą przechowywane w pamięci podręcznej po pierwszym załadowaniu strony z określonym manifestem.
FALLBACK:: Definiuje zasoby zapasowe. Jeśli żądanie sieciowe głównego zasobu się nie powiedzie, przeglądarka załaduje wskazany zasób zapasowy. Format: zasób_główny zasób_zapasowy.
NETWORK:: Zasoby wymienione w tej sekcji nigdy nie będą przechowywane w pamięci podręcznej i zawsze będą pobierane z sieci. Symbol * oznacza, że wszystkie zasoby nie wymienione w innych sekcjach będą zawsze pobierane z sieci.

Aktualizacja pamięci podręcznej aplikacji następuje, gdy plik manifestu się zmienia. Przeglądarka pobiera zaktualizowany manifest, porównuje go z bieżącym i pobiera nowe lub zmienione zasoby. Nowe pliki są dostępne tylko po odświeżeniu strony.

Wydarzenia związane z pamięcią podręczną aplikacji:

checking: Przeglądarka sprawdza, czy dostępna jest nowa wersja manifestu.
downloading: Przeglądarka pobiera zasoby wskazane w nowej wersji manifestu.
progress: Postęp pobierania zasobów.
updateready: Nowa wersja pamięci podręcznej jest gotowa do użycia. Wymaga odświeżenia strony.
cached: Zasoby zostały pomyślnie zapisane w pamięci podręcznej przy pierwszym ładowaniu.
noupdate: Manifest się nie zmienił.
error: Wystąpił błąd podczas ładowania lub aktualizacji pamięci podręcznej.

API pamięci podręcznej aplikacji jest dostępne przez window.applicationCache.

// Sprawdzenie statusu pamięci podręcznej
console.log(window.applicationCache.status);

// Obsługa zdarzenia updateready
window.applicationCache.addEventListener('updateready', function() {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    // Zastosuj nową wersję pamięci podręcznej i odśwież stronę
    window.applicationCache.swapCache();
    window.location.reload();
  }
}, false);

Chociaż Application Cache zapewniał funkcje offline, jego użycie nie jest zalecane w nowych projektach ze względu na trudności w zarządzaniu, problemy z aktualizacją i brak elastyczności. W nowoczesnych podejściach do dostępu offline i innych funkcji progresywnych aplikacji webowych (PWA) używa się Service Workers.

Czym jest pamięć podręczna aplikacji w HTML5?