Home > HTML5 > Srtony web i brak dostępu do internetu – Offline Web Application

Srtony web i brak dostępu do internetu – Offline Web Application

HTML5 Offline StorageObecnie od stron wymaga się czegoś więcej niż wyświetlanie zawartości i wprowadzanie danych do formularza. Bywają sytuacje, gdy z różnego powodu traci się połączenie z internetem tracąc również możliwość pracy. Z tego powodu tworzy się dedykowane aplikacje na urządzenia mobilne, które po części dają nam możliwość pracy bez dostępu do internetu. Od jakiegoś czasu istnieje jednak możliwość pracy z daną stroną web bez dostępu do internetu – możliwe jest to dzięki  zastosowaniu między innymi Application Cache.

Offline Web Application dostępny jest już praktycznie w każdej przeglądarce. Umożliwia przechowywanie takich zasobów jak HTML, CSS, zdjęcia, JavaScript. Zasoby te są ładowane przy pierwszym ładowaniu strony i zapamiętywane w specyficznym cache przeglądarki (specyficzny, bo to nie jest cache, w którym zapamiętywane są ostatnio załadowane strony). Dzięki tej możliwości nasza strona stanie się chociaż częściowo dostępna przy problemach z dostępem do sieci. Warto jednak pamiętać o paru rzeczach.

Jak rozróżnić tryb pracy…

Tworząc daną stronę, dobrze jest wiedzieć, czy jesteśmy w trybie online czy offline bo dzięki temu możemy wyłączyć niektóre funkcje. W tym celu można odwołać się do atrybutu onLine obiektu navigator. Niestety czym jest tryb offline, trudno powiedzieć – niektóre przeglądarki mogą reagować na brak dostępu do internetu (podczas gdy intranet jest dostępny).

navigator.onLine

… i jego zmianę.

Brak dostępu do sieci może nastąpić w każdej chwili. Aby móc zareagować na zmianę należy podpiąć się do eventów ononline i onoffline obiektu window.

window.onoffline = function () {
   ...
};
window.ononline = function () {
   ...
};

Definiowanie Application Cache

Aby móc wykorzystać Application Cache musimy rozpocząć od zdefiniowania cache manifestu. Jest to osobny plik tekstowy zawierający kilka sekcji. Dobrym zwyczajem jest nazywanie takich plików używając rozszerzenia .appcache. Każdy taki plik manifestu musi być zakodowany w UTF8 i zaczynać się od wpisu:

CACHE MANIFEST

Kolejną ważną rzeczą jest poinformowanie przeglądarki, że manifest zmienił się i należy na nowo załadować wszystkie pliki. W tym celu wersjonuje się plik wstawiając w drugiej linii numer wersji w postaci komentarza.  W praktyce może to być dowolny komentarz (wyjaśnienie w uwagach).

# Version 1.1

Kolejne linie składają się z następujących sekcji:

  • NETWORK – definiujące wszystkie pliki i ścieżki, które nie powinny być przechowywane w cache i są jedynie dostępne w trybie online.
  • FALLBACK – definiujące mapowanie zasobów, które nie są dostępne w trybie offline. Przykładowo jeżeli chcemy odwołać się do strony online.html czy payment.html przy braku dostępu do internetu, można zmapować je na plik offline.html, który będzie informował o braku możliwości odwiedzenia danej strony.
  • CACHE – jest to lista zasobów, które muszą zostać zapamiętane. Lista ta musi być ręcznie aktualizowana (pomijam tutaj możliwość dynamicznego lub automatycznego generowania manifestu). Wpis z błędnym zasobem powoduje, że cache nie zostanie poprawnie zainicjalizowany, może pojawić się błąd po stronie przeglądarki. Wszystkie pliki zdefiniowane w tej sekcji zostaną załadowane przy wejściu na stronę.

Odwoływanie się do manifestu.

Każda strona, która ma działać w trybie offline i ma wykorzystywać nasz appcache musi w znaczniku html definiować atrybut manifest, wskazujący na plik.

<html manifest="/cache.appcache">

Nasłuchiwanie zdarzeń

Mamy możliwość reagowania na zdarzenia związane ze stanem cache. Należy w tym celu pobrać obiekt applicationCache z obiektu window:

   var appCache = window.applicationCache;
   appCache.oncached = function () {
      ... 
   }

Dalej możemy się pod konkretne zdarzenia:

  • onprogress – wywoływane gdy zasoby są ściągane – pozwala na sprawdzenie ile jest zasobów do ściągnięcia oraz ile zasobów zostało już ściągniętych
  • onerror – wywoływane gdy wystąpił dowolny błąd związany z AppCache – niestety nie powie nam na chwilę obecną szczegółów
  • onupdateready – wywoływane, po zakończeniu ściągania zasobów zdefiniowanych w manifeście
  • onchecking, ondownloading, onobsolete, onupdate.

AppCache events in practice

Uwagi:

  • Komentarz zawierający numer wersji w manifeście należy modyfikować za każdym razem, gdy jakiś zasób w sekcji CACHE jest modyfikowany. Przykładowo, gdy modyfikujemy plik CSS musimy pamiętać o zmodyfikowaniu numeru wersji.
  • Gdy wystąpi problem z załadowaniem jakiegoś zasobu (bo wpis jest błędny, lub zasób niedostępny) pojawi się nic nie mówiący błąd cache.

Dodatkowe materiały

Tags: ,
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: