Archiwum

Archive for the ‘Cache’ Category

HTML5 Application Cache–naprawiamy błędy

Listopad 23, 2012 Dodaj komentarz

W poprzednim artykule pisałem o tym jak wdrożyć na swojej stronie internetowej Application Cache dostępny w HTML5.
Wdrożenie to jednak nie wszystko, okazuje się że często dochodzi do problemów, są one spowodowane dwoma rzeczami:

  • błędami ludzkimi
  • błędami w obsłudze standardu w różnych przeglądarkach

 

Plik manifest – za dużo plików

Otrzymuje od programisty następujący plik appcache.manifest

image

i zastanawia co najmniej kilka kwestii:

  • nie ma indeksu wersji w pliku, np: #v1
  • powinniśmy jako dobra praktyka dodać sekcję CACHE: , bo standard HTML5 jest dość chwiejny i może im się zmienić coś w dokumentach i nagle inny nagłówek będzie domyślny (mamy jeszcze 2 inne dostępne).
  • Kilka wersji jQuery, zwykłego oraz UI – powinna być jedna wykorzystywana w aplikacji.
  • linkowane są biblioteki w wersji pełnej i minimalistycznej.
  • linkowane są pliki, które służą do budowania IntelliSense w Visual Studio.

To wszystko pobiera nieświadomy użytkownik, bo kazaliśmy to zrobić jego przeglądarce internetowej.

AppCache – błędy i brak działania

Mimo tego, że każemy ściągać wiele plików, których może nie wykorzystujemy to nie jest największy problem. Okazuje się, że technologia jest nieodporna na błędy i jak tylko, któryś z zasobów zdefiniowanych w pliku manifest nie będzie istniał cache’owanie przestanie działać.
Nie przedając faktów popatrzmy na załadowaną stronę w Internet Explorer (z narzędziami dla programistów –> uruchamiamy przez F12)

image

Otrzymujemy informację, że coś poszło nie tak, ale nie wiemy co.

Uruchamiamy Chrome również z narzędziami dla programistów:

image

Bingo! Wiemy co się stało… nie działa cache’owanie ponieważ brakuje pliku na serwerze, który był wpisany w manifest. Kto by pomyślał, że drobny błąd wyłączy wszystko.

Jak to wygląda po poprawkach

W Chrome możemy podglądać jak wygląda lokalny Application Cache

image

 

Podsumowanie

Analizujmy strony wynikowe, analizujmy pracę Naszych pracowników, uczmy się!

HTML5 Application Cache–umieszczamy pliki po stronie przeglądarki internetowej

Listopad 23, 2012 Dodaj komentarz

To fakt, strony internetowe ważą dzisiaj nie mało, nie chce wchodzić w dyskusję czy to dobrze czy źle, bo pewnie skończylibyśmy na tym, że “źle, ale to zależy od…”.

Smutek ogarnia człowieka jak sobie myśli, że za każdym wejściem na stronę muszę ściągać dużo danych (i tym samym serwować je użytkownikom).

image

Jest na to jednak rozwiązanie – jeżeli jesteśmy pewni że duża część tego co użytkownik ściąga przechodząc od ekranu do ekranu to te same elementy, możemy poprosić jego przeglądarkę Internetową o to by zachowała u siebie lokalnie część naszej strony, w tym obrazki i skrypty.

HTML5 przychodzi nam z pomocą

HTML5 wprowadza do przeglądarek internetowych obsługę przechowywania pików po stronie klienta do obsługi trybu offline aplikacji, ale też do tego by nie było potrzeby ściągania plików wchodząc na stronę raz następny.

Dotychczas wiele przeglądarek internetowych (w jakiś mniej lub bardziej rozgarnięty sposób) realizowało ten pomysł, ale to co dostajemy teraz w ramach ApplicationCache Interface to mechanizm ustandaryzowany, opisany i miejmy nadzieje zaimplementowany w każdej przeglądarce tak samo.

Po co się interesować tematem?

  • Tryb offline – możemy przechowywać całą stronę po stronie klienta, bez potrzeby posiadania dostępu do Internetu
  • Prędkość – nie musimy wczytywać z Internetu plików, które już raz ściągnęliśmy. Oszczędzamy transfer i przy okazji strony działają szybciej
  • Wydajność – zmniejszamy obciążenie serwera i łącza internetowego przy serwerze

 

Tworzymy plik manifestu

W naszym wypadku plik, zawierający informacje dla przeglądarki internetowej będzie w głównym folderze aplikacji. Tworzymy zwykły plik tekstowy z zawartością mówiącą, które pliki warto pamiętać

CACHE MANIFEST

#v1

http://placechallengestatic.blob.core.windows.net/script/jquery-1.5.1-vsdoc.js
http://placechallengestatic.blob.core.windows.net/script/jquery-1.5.1.js
http://placechallengestatic.blob.core.windows.net/script/jquery-1.5.1.min.js

zapisujemy plik jako appcache.manifest i dodajemy do strony internetowej

image

Wyjaśniamy manifest

Plik manifest składa się z:

  • nagłówka CACHE MANIFEST
  • wersji pliku, to ważne bo dzięki temu będziemy mogli mówić przeglądarkom że coś się zmieniło i ma od nowa pobrać elementy – tu: #v1
  • linki do zasobów

Plik manifest może być bardziej skomplikowany, możemy zrobić coś takiego:

CACHE MANIFEST

#v1

CACHE:
http://placechallengestatic.blob.core.windows.net/script/jquery-1.5.1-vsdoc.js

NETWORK:
http://placechallengestatic.blob.core.windows.net/script/jquery-1.5.1.js

FALLBACK:
http://placechallengestatic.blob.core.windows.net/script/jquery-1.5.1.min.js

w tym:

  • CACHE – jak w pliku manifest nie napiszemy nic (nie damy sekcji) to właśnie standardowo przeglądarka wpisuje wszystkie zasoby do sekcji CACHE. Sekcja oznacza, że elementy będą zachowane na dysku i ładowane z dysku za każdym następnym użyciem
  • NETWORK– to zasoby bezpośrednio wymagające Internetu.
  • FALLBACK– to miejsce gdzie możemy wskazać co ma się załadować w razie braku możliwości załadowania oryginalnego elementu, np: /twarz.jpg /offline.jpg (jak nie da się załadować twarz.jpg załaduje się offline.jpg).

 

Cieszymy się od teraz cache.