Najnowsze tutoriale tworzenie stron internetowych

HTML5 Application Cache


Z pamięci podręcznej aplikacji jest łatwe do wykonania wersji offline aplikacji internetowej, tworząc plik manifestu pamięci podręcznej.


Co jest Application Cache?

HTML5 wprowadza pamięci podręcznej aplikacji, co oznacza, że ​​aplikacja internetowa jest buforowane i dostępne bez połączenia z internetem.

Pamięć podręczna aplikacja daje aplikacja trzy zalety:

  1. Przeglądania w trybie offline - użytkownicy mogą korzystać z aplikacji, gdy jesteś offline
  2. Speed ​​- buforowane zasoby ładują się szybciej
  3. Zmniejszone obciążenie serwera - przeglądarka pobierze aktualizowane tylko zmienionych / zasobów z serwera

tło

aplikacje internetowe składają się z stron internetowych, które muszą być pobrane z sieci. Aby tak się stało musi istnieć połączenie sieciowe. Jednakże, istnieje wiele przypadków, gdy użytkownik nie może połączyć się z siecią z powodu okoliczności pozostających poza ich kontrolą. HTML5 umożliwia dostęp do aplikacji internetowych nawet bez połączenia z siecią przy użyciu manifestu pamięci podręcznej.

aplikacje internetowe składają się z zasobów zidentyfikowanych przez URL. Mogą to być HTML, CSS, JavaScript, obrazy lub inne źródło, które jest wymagane dla aplikacji internetowych mają być świadczone. Ich adresy mogą być kopiowane do pliku manifestu, które mogą być regularnie aktualizowane przez autora aplikacji internetowej, wskazując żadnych nowych adresów internetowych, które są dodawane lub usuwane. W przypadku podłączenia do sieci po raz pierwszy, przeglądarka odczyta plik manifestu HTML5, pobierz środków przeznaczonych i przechowywać je lokalnie. Następnie, w przypadku braku połączenia sieciowego, przeglądarka internetowa będzie przesuwać się do lokalnych kopii zamiast renderować i aplikacji internetowych w trybie offline.


Wsparcie przeglądarka

Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje Application Cache.

API
Application Cache 4.0 10,0 3.5 4.0 11,5

HTML skrzynki Manifest Przykład

Poniższy przykład pokazuje dokument HTML z manifestu pamięci podręcznej (for offline browsing) :

Przykład

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

<body>
The content of the document......
</body>

</html>
Spróbuj sam "

Cache Oczywisty Podstawy

Aby aplikacje offline do pracy, plik manifestu cache musi być tworzone przez dewelopera internetowej. Jeśli aplikacja internetowa przekracza więcej niż jedną stronę, a następnie każda strona musi mieć oczywisty atrybut wskazujący na manifeście cache. Każda strona przedstawieniu manifestu będą przechowywane lokalnie. Manifest pliku cache to plik tekstowy znajduje się w innej części serwera. To musi być podawany z następujących typów treści:

text/cache-manifest

Aby włączyć pamięć podręczną aplikacji, zawiera manifest atrybut dokumentu <html> tag:

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

Każda strona z manifest atrybutem określonej będą buforowane, gdy użytkownik odwiedza go. Jeśli manifest atrybut nie jest określony, strony nie będą buforowane (unless the page is specified directly in the manifest file) .

Zalecana rozszerzenie pliku dla plików manifestu brzmi: ".appcache"

Manifest plik musi być podawane z correct media type , który jest "text/cache-manifest" . Musi być skonfigurowany na serwerze WWW.


Pliku manifestu

Plik manifestu jest prosty plik tekstowy, który informuje przeglądarkę, co do pamięci podręcznej (and what to never cache) .

Plik manifestu ma trzy sekcje:

  • CACHE MANIFEST - Pliki wymienione poniżej tego nagłówka będą buforowane po ich pobraniu po raz pierwszy
  • NETWORK - Pliki wymienione poniżej tego nagłówka wymagają połączenia z serwerem, i nigdy nie będą buforowane
  • FALLBACK - Pliki wymienione poniżej tego nagłówka określa zastępczych strony, jeśli strona jest niedostępna

CACHE MANIFEST

Pierwsza linia, CACHE MANIFEST, wymagane jest:

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

Powyższy plik manifestu wymienia trzy środki: plik CSS, obraz GIF, oraz plik JavaScript. Gdy plik manifestu jest ładowana, przeglądarka pobierze trzy pliki z katalogu głównego na stronie internetowej. Wtedy, gdy użytkownik nie jest podłączony do Internetu, zasoby będą nadal dostępne.

SIEĆ

W sekcji NETWORK poniżej określa, że plik "login.asp" nigdy nie powinny być buforowane, i nie będą dostępne w trybie offline:

NETWORK:
login.asp

Gwiazdka może być używany do wskazania, że ​​wszystkie inne zasoby / plików wymaga połączenia internetowego:

NETWORK:
*

FALLBACK

Poniższa sekcja FALLBACK określa, że "offline.html" będzie służył w miejsce wszystkich plików w katalogu / html /, w przypadku, gdy połączenie internetowe nie mogą być ustalone:

FALLBACK:
/html/ /offline.html

Uwaga: Pierwszy URI jest zasobem, drugi jest awaryjna.


Aktualizacja Cache

Kiedy aplikacja jest buforowane, pozostaje w pamięci podręcznej aż jedna z poniższych sytuacji:

  • Użytkownik czyści pamięć podręczną przeglądarki
  • Plik manifestu jest modyfikowany (see tip below)
  • Pamięć podręczna aplikacja jest aktualizowana programowo

Przykład - Complete Cache pliku manifestu

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html/ /offline.html

Tip: Linie zaczynające się od "#" są linie komentarz, ale może również służyć innym celom. Pamięć podręczna aplikacja jest aktualizowana, gdy jego oczywistych zmian w plikach tylko. W przypadku edycji obrazu lub zmienić funkcję JavaScript, zmiany te nie zostaną ponownie buforowane. Aktualizacja datę i wersję w linii komentarz jest jeden sposób, aby przeglądarka Ponowne pamięć podręczną plików.


Uwagi dotyczące Application Cache

Bądź ostrożny z tym, co w pamięci podręcznej.

Gdy plik jest buforowane, przeglądarka będzie nadal pokazują wersję pamięci podręcznej, nawet po zmianie pliku na serwerze. Aby upewnić się, że przeglądarka aktualizuje cache, trzeba zmienić plik manifestu.

Uwaga: Przeglądarki mogą mieć różne limity rozmiaru pamięci podręcznej dla danych (some browsers have a 5MB limit per site) .