Pamięć podręczna aplikacji HTML5

Używając pamięci podręcznej aplikacji, można łatwo stworzyć wersję offline aplikacji webowej, tworząc plik manifest cache.

Co to jest pamięć podręczna aplikacji?

HTML5 wprowadził pamięć podręczną aplikacji (Application Cache), co oznacza, że można kachenować aplikacje webowe i mieć do nich dostęp bez połączenia z internetem.

Kacheowanie aplikacji przynosi aplikacji trzy korzyści:

  1. Przeglądanie offline - użytkownicy mogą ich używać, gdy aplikacja jest offline
  2. Szybkość - zasoby w pamięci podręcznej ładują się szybciej
  3. Redukcja obciążenia serwera - przeglądarka pobiera tylko zaktualizowane lub zmienione zasoby ze serwera

Obsługa przeglądarek

Liczby w tabeli wskazują pierwszą wersję przeglądarki, która obsługuje pamięć podręczną aplikacji.

API
Pamięć podręczna aplikacji 4.0 10.0 3.5 4.0 11.5

Przykład HTML Cache Manifest

Poniższy przykład pokazuje dokument HTML z plikiem cache manifest (dla przeglądania w trybie offline):

Przykład

!DOCTYPE HTML
<html manifest="demo.appcache">
<body>
Zawartość dokumentu ......
</body>
</html>

Spróbuj sam

Podstawy Cache Manifest

Aby włączyć pamięć podręczną aplikacji, dodaj atrybut manifest do etykiety <html> w dokumencie:

!DOCTYPE HTML
<html manifest="demo.appcache">
...
</html>

Każda strona, która ma określony plik manifest, będzie przechowywana w pamięci podręcznej po każdym odwiedzeniu użytkownika. Jeśli nie określono atrybutu manifest, strona nie będzie przechowywana w pamięci podręcznej ( chyba że bezpośrednio określono tę stronę w pliku manifest)

Sugerowany rozszerzenie pliku dla pliku manifest to: ".appcache".

Uwaga:Plik manifest musi mieć poprawny typ MIME, tj. "text/cache-manifest". Musi być skonfigurowany na serwerze web.

Plik Manifest

Plik manifest to prosty plik tekstowy, który informuje przeglądarkę o zawartości, która będzie przechowywana w pamięci podręcznej (oraz o zawartości, która nie będzie przechowywana)

Plik manifest ma trzy części:

  • CACHE MANIFEST - Poniżej tego nagłówka wymienione pliki będą przechowywane w pamięci podręcznej po pierwszym pobraniu
  • NETWORK - Poniżej tego nagłówka wymienione pliki wymagają połączenia z serwerem i nie będą przechowywane w pamięci podręcznej
  • FALLBACK - Poniżej tego nagłówka wymienione pliki określają stronę awaryjną, gdy strona nie jest dostępna (np. strona 404)

CACHE MANIFEST

Pierwsze wiersz, CACHE MANIFEST, jest obowiązkowy:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

Powyższy plik manifest wymienia trzy zasoby: plik CSS, obraz GIF oraz plik JavaScript. Po załadowaniu pliku manifest, przeglądarka pobierze te trzy pliki z katalogu głównego strony. Następnie, niezależnie od tego, kiedy użytkownik rozłączy się od Internetu, te zasoby będą nadal dostępne.

NETWORK

Część NETWORK reguluje plik "login.php", który nigdy nie będzie przechowywany w pamięci podręcznej i nie będzie dostępny w trybie offline:

NETWORK:
login.asp

Można użyć gwiazdki, aby wskazać, że wszystkie inne zasoby/pliki wymagają połączenia z Internetem:

NETWORK:
*
FALLBACK

Poniższa część FALLBACK określa, że jeśli nie można nawiązać połączenia z Internetem, zastąp wszystkie pliki w katalogu /html/ plikiem "offline.html":

FALLBACK:
/html/ /offline.html

Uwaga:Pierwszy URI to zasób, drugi to alternatywa.

Aktualizacja pamięci podręcznej

Po zapisaniu aplikacji w pamięci podręcznej, aplikacja pozostanie w pamięci podręcznej do czasu wystąpienia jednego z poniższych zdarzeń:

  • Użytkownik wyczyścił pamięć podręczną przeglądarki
  • Plik manifest został zmodyfikowany (zobacz poniższe wskazówki)
  • Aktualizacja pamięci podręcznej aplikacji przez program

Przykład - Pełny plik Cache Manifest

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html

Wskazówka:Wiersze zaczynające się od '#' to wiersze komentarzy, ale mogą spełniać inne cele. Pamięć podręczna aplikacji zostanie zaktualizowana tylko wtedy, gdy zmieni się plik manifest. Jeśli edytujesz obraz lub modyfikujesz funkcję JavaScript, te zmiany nie zostaną ponownie zapisane w pamięci podręcznej. Aktualizacja daty i numeru wersji w wierszach komentarzy to sposób na przypomnienie przeglądarce, aby zaktualizować pliki w pamięci podręcznej.

Uwagi dotyczące pamięci podręcznej aplikacji

Proszę zwrócić uwagę na zawartość pamięci podręcznej.

Po zapisaniu pliku w pamięci podręcznej przeglądarka będzie nadal wyświetlać zapisaną wersję, nawet jeśli zmodyfikujesz plik na serwerze. Aby upewnić się, że przeglądarka zaktualizuje pamięć podręczną, musisz zaktualizować plik manifest.

Uwaga:Przeglądarki mogą mieć różne ograniczenia dotyczące pojemności danych w pamięci podręcznej (ograniczenia niektórych przeglądarek to 5MB na stronę).