Cache aplikacji HTML5

Dzięki cache aplikacji, poprzez utworzenie pliku cache manifest, można łatwo stworzyć wersję offline web aplikacji.

Co to jest cache aplikacji?

HTML5 wprowadził cache aplikacji (Application Cache), co oznacza, że można缓存 web aplikacje i dostęp do nich jest możliwy bez połączenia z internetem.

Cache aplikacji przynosi aplikacji trzy korzyści:

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

Wspierane przeglądarki

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która obsługuje pełną 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 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, zawrzyj atrybut manifest w etykiecie <html>:

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

Każda strona określona w pliku manifest będzie zapisywana w pamięci podręcznej, gdy użytkownik ją odwiedzi. Jeśli nie określono atrybutu manifest, strona nie będzie zapisywana w pamięci podręcznej (oprócz przypadków, gdy strona jest bezpośrednio określona w pliku manifest)

Rekomendowanym rozszerzeniem pliku manifest jest: ".appcache".

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

Manifest pliku

Plik manifest to prosty plik tekstowy, który informuje przeglądarkę, które zawartości będą zapisywane w pamięci podręcznej (i które nie będą zapisywane)

Plik manifest ma trzy części:

  • CACHE MANIFEST - W tym tytule wymienione pliki będą zapisywane w pamięci podręcznej po pierwszym pobraniu
  • NETWORK - W tym tytule wymienione pliki wymagają połączenia z serwerem i nie są zapisywane w pamięci podręcznej
  • FALLBACK - W tym tytule wymienione pliki określają stronę awaryjną, do której użytkownik zostanie przekierowany, 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 zawiera 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 będzie rozłączony z Internetem, te zasoby będą nadal dostępne.

NETWORK

Część NETWORK określa, że plik "login.php" nigdy nie będzie zapisywany 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 bufora

Gdy aplikacja zostanie zbuforowana, pozostanie w buforze do momentu wystąpienia jednego z poniższych zdarzeń:

  • Użytkownik wyczyścił bufor przeglądarki
  • Plik manifest został zmodyfikowany (zobacz poniższe wskazówki)
  • Aktualizacja bufora aplikacji przez program

Przykład - kompletny 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 "#" są liniami komentarzy, ale mogą spełniać inne cele. Bufor aplikacji jest aktualizowany tylko wtedy, gdy zmienia się plik manifest. Jeśli edytujesz obraz lub modyfikujesz funkcję JavaScript, te zmiany nie będą ponownie zbuforowane. Aktualizacja daty i numeru wersji w wierszach komentarzy jest jednym ze sposobów, aby przeglądarka zaktualizowała pliki w buforze.

Uwagi dotyczące buforowania aplikacji

Proszę, zwróć uwagę na zawartość bufora.

Ponieważ plik został zbuforowany, przeglądarka będzie nadal wyświetlać wersję z bufora, nawet jeśli zmodyfikowałeś plik na serwerze. Aby upewnić się, że przeglądarka zaktualizuje bufor, musisz zaktualizować plik manifest.

Uwaga:Ograniczenia pojemności bufora przeglądarki dla danych w pamięci podręcznej mogą się różnić (ograniczenia niektórych przeglądarek wynoszą 5MB na stronę).