HTML5 & CSS3

Manifest HTML5 – jak stosować AppCache

Szybkość działania stron internetowych jest w dzisiejszych czasach jednym z kluczowych kryteriów oceny jakości projektu. Błyskawiczna dostępność strony może być jednym z podstawowych wyznaczników powodzenia lub porażki biznesu w sieci. Co więcej klienci już zdają sobie z tego sprawę i co raz częściej pytają o usługi optymalizacji witryn pod względem szybkości ładowania. W takich realiach ciężko ignorować nawet sekundę, która przedłuża czas ładowania naszej strony. Dlatego chcieliśmy przedstawić Wam jeden ze sposobów na przyśpieszenie działania witryny internetowej.

Wstęp

AppCache (Application Cache) służy do tego by określić, które pliki mają być dostępne dla użytkowników offline. Dzięki temu jesteśmy również w stanie zwiększyć szybkość ładowania się strony ponieważ przeglądarka będzie przechowywać wyznaczone pliki. Jak widać możemy upiec dwie pieczenie na jednym ogniu – me gusta ;-) Najlepsze w tym wszystkim jest to, że nawet jeśli strona będzie oglądana przez użytkownika bez połączenia internetowego, odświeżenie nie przerwie jej działania.

W celu korzystania z AppCache musimy stworzyć plik, który będzie przechowywał informacje o zasobach, które chcemy cache’ować. Odwołanie to tegoż pliku zapisujemy w rozpoczynającym dokument tagu <html>.

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

Każda podstrona naszej aplikacji lub witryny musi zawierać odwołanie do wskazanego wyżej pliku lub być wymieniona w samym pliku. Pierwsze rozwiązanie wydaje się prostsze i bardziej uniwersalne. Jeśli zaś chodzi o plik z manifestem to musimy on być serwowany z mime-type text/cache-manifest. Jest to istotne jeśli chcemy zapewnić kompatybilność z przeglądarkami, które wymagały takiego zabiegu. Obecnie „dobre” przeglądarki nie potrzebują już tego. Rozszerzenie pliku manifestu nie jest istotne.

Struktura pliku manifestu również nie jest skomplikowana. Tak na prawdę podajemy tam ścieżki do plików, które chcemy aby przeglądarka przechowywała na dysku i aktualizowała w razie potrzeby. W ten sposób będą one serwowane szybciej.

CACHE MANIFEST
index.html
about.html
portfolio.html
contact.html
../css/typo.css
../js/gui.js
../img/sprite.png
../img/huge-background.png

W powyższym pliku dodaliśmy cztery strony przykładowej witryny. Nie jest to jednak konieczne jeśli mają one zadeklarowany manifest w tagu <html></html>, gdyż wszystkie takie strony zostaną poddane mechanizmowi AppCache.

Jak to działa?

Mechanizm działania AppCache jest dość prosty. Jeśli dane zasoby są cache’owane przeglądarka nie pobiera ich. Następnie następuje sprawdzenie, czy plik manifestu nie był uaktualniany, jeśli był to przeglądarka ściąga nową wersję manifestu oraz zasoby tam zapisane.

Bardzo ważne jest, że musimy pamiętać o uaktualnianiu pliku manifestu. Jeśli tego nie zrobimy to przeglądarka ‚nie zauważy’ zmian. Dlatego przy każdej zmianie w plikach, które chcemy przechowywać w cache’u musimy również uaktualniać ten plik. Z tego względu odradza się wpisywanie do pliku manifestu jego samego.

Plik manifestu możemy podzielić na trzy części: Cache, Network i Fallback

Pliki zawarte w części ‚CACHE‚ są zapisywane w cache’u natychmiast. To jest domyślna część pliku, która występuje zaraz po ‚CACHE MANIFEST‚ lub nagłówku ‚CACHE‚. Z kolei pliki znajdujące się w sekcji pod nagłówkiem ‚NETWORK‚ to lista zasobów, które wymagają połączenia z serwerem zaś w sekcji o nagłówku ‚FALLBACK‚ znajdziemy listę plików, które przeglądarka ma użyć jeśli wymienione wcześniej są niedostępne. Wymienione sekcje mogą występować w dowolnej kolejności i mogą być wymieniane w pliku więcej niż raz.

Kategorie zasobów cache

Możemy je podzielić na:

  • Master Entries – to wszystkie pliki .html, które w otwierającym tagu <html> mają atrybut manifestu. Takie pliki są dodawane do cache nawet jeśli nie są wymienione w pliku cache,
  • Explicit Entries – to pliki, które wymieniono w pliku cache,
  • Network Entries – tutaj mamy do czynienia z zasobami, które przeglądarka ma pobierać z sieci,
  • Fallback Entries – są zasobami serwowanymi użytkownikowi jeśli pierwotne nie są dostępne

Jak widać podział jest bardzo czytelny i prosty.

Nie wszystko jest takie proste

W przypadku używania AppCache jest kilka niuansów, o których warto pamiętać żeby uniknąć problemów.

  • Po uaktualnieniu cache’owanych plików należy uaktualnić plik manifestu,
  • Jeśli linkujemy do zasobów, które mają parametry parsowane w JS parametrów należy używać w części linku, która ma hash
  • Warto ustawić expires headers na serwerze tak aby pliki appcache wygasały natychmiastowo
  • I jeszcze do tego lista innych spraw…

Jak widać stosowanie AppCache jest trochę ‚podchwytliwe’, ale myślę, że przy zachowaniu rozsądku i pamiętaniu o pewnych podstawowych niuansach jesteśmy w stanie z powodzeniem skorzystać z tej funkcjonalności HTML5.

Stosowaliście kiedyś AppCache w Waszych projektach? Jakie są Wasze wrażenia? Czy AppCache to rzeczywiście ‚douchbag’? :)

komentarzy 5

  • Awatar
    Comandeer

    15 grudnia 2013 17:23

    >Stosowaliście kiedyś AppCache w Waszych projektach?
    http://comandeer.pl – to chyba starczy za odpowiedź ;)
    choć przyznam szczerze, że wrażenia mogłyby być lepsze. niemniej lepsze to niż nic

    >Obecnie „dobre” przeglądarki nie potrzebują już tego.
    nie nazwałbym dobrą przeglądarki, która łyka wszystko jak leci, nie patrząc na typ MIME. a co w wypadku nagłówka X-Content-Type-Options:nosniff – też łyknie jak pelikan?

    co do niuansów: grunt ;) po co mam robić ręcznie coś, co zrobi za mnie maszyna? napisałem sobie małe cudeńko, które jest w stanie wygenerować całą moją stronę domową i nawet wysłać mi to na serwer FTP. ja muszę zadbać tylko o wklupanie treści. jeśli ktoś jest zainteresowany tym prymitywnym (acz dającym radę ;)) narzędziem, to jego okrojona wersja (m.in. bez FTP) leży na moim gh: https://github.com/Comandeer/Site-builder

    Odpowiedz
  • Awatar
    feamoignargfaionakfj9ajfopamjv

    15 grudnia 2013 20:33

    Taka ciekawostka: http://wordpress.org/plugins/cache-manifest/
    Myślicie, że warto?

    Odpowiedz
    • Awatar
      Mr.Mr

      15 grudnia 2013 21:51

      Szkoda że nie ma żadnych recenzji – słabo bo nie da się ocenić. Musiałbyś zainstalować i sam sprawdzić, ale nie wiadomo, czy się opłaca. Dylemat…

      Odpowiedz
      • Awatar
        feamoignargfaionakfj9ajfopamjv

        15 grudnia 2013 21:53

        Zainstalować zainstalowałem ale nie zauważyłem żadnych zmian. A nie miałem też czasu żeby bliżej się temu przyjrzeć ;)

        Odpowiedz
      • Awatar
        Mr.Mr

        15 grudnia 2013 22:02

        Jeśli wcześniej wchodziłeś na stronę (a pewnie tak było) i nie czyściłeś pamięci przeglądarki to możliwe, że po prostu miałeś już cache’owane wszystko co plugin wpisał do manifestu.

        Odpowiedz

Zostaw odpowiedź