post_ico3

HTML5 – rewolucja czy ewolucja? cz. 3

W ostatniej części cyklu artykułów o HTML5 przedstawię nowości związane z przechowywaniem danych po stronie klienta oraz sposobach komunikacji ze stroną. Również w tych aspektach nadchodzą duże zmiany i wiele nowości.

Web storage

Dotychczas jedyną formą przechowywania danych po stronie klienta były ciasteczka (ang. cookies). Jednakże zezwalają one na przechowywanie zaledwie kilku KB. Pewnym rozwiązaniem są flash cookies, które pozwalają przechowywać do 100KB danych. W dzisiejszych czasach, w dobie aplikacji internetowych, oba rozwiązania są niewystarczające.

Z pomocą przychodzą deweloperzy HTML5, którzy stworzyli mechanizm web storage. Jest to API dla programistów JavaScript, które umożliwia zapis danych po stronie klienta.

Istnieją dwa typy storage – localStorage przechowuje dane bez limitu czasowego. Natomiast sessionStorage przechowuje dane tylko podczas istnienia sesji (dopóki nie wyłączy się przeglądarki internetowej).

Przykłady:

<script type="text/javascript">
if (localStorage.pagecount)
	{
	localStorage.pagecount=Number(localStorage.pagecount) +1;
	}
else
	{
	localStorage.pagecount=1;
	}
document.write("Visits: " + localStorage.pagecount + " time(s).");
</script>

<script type="text/javascript">
if (sessionStorage.pagecount)
	{
	sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
	}
else
	{
	sessionStorage.pagecount=1;
	}
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
</script>

Web SQL Database

Inną możliwością przechowywania danych jest Web SQL Database. Jest to mechanizm dostępu do SQLowej bazy danych po stronie przeglądarki. Jednakże są małe szanse na rozpowszechnienie tego mechanizmu – Mozilla zapowiedziała, że nigdy nie zaimplementuje go w Firefoksie.

Przykład:

function prepareDatabase(ready, error) {
  return openDatabase('documents', '1.0', 'Offline document storage', 5*1024*1024, function (db) {
    db.changeVersion('', '1.0', function (t) {
      t.executeSql('CREATE TABLE docids (id, name)');
    }, error);
  });
}

function showDocCount(db, span) {
  db.readTransaction(function (t) {
    t.executeSql('SELECT COUNT(*) AS c FROM docids', [], function (t, r) {
      span.textContent = r.rows[0].c;
    }, function (t, e) {
      // couldn't read database
      span.textContent = '(unknown: ' + e.message + ')';
    });
  });
}

prepareDatabase(function(db) {
  // got database
  var span = document.getElementById('doc-count');
  showDocCount(db, span);
}, function (e) {
  // error getting database
  alert(e.message);
});

Offline Web Applications

Wymienione wyżej mechanizmy mogą zostać wykorzystane w Offline Web Applications. Nowość ta umożliwia używanie aplikacji internetowych w trybie offline (bez połączenia internetowego). Jak to działa?

Gdy przeglądarka ma dostęp do internetu pobiera wszystkie pliki HTML, CSS i JS. W trakcie działania w trybie offline magazynuje dane od użytkownika. Natomiast w wypadku ponownego dostępu do internetu synchronizuje dane z serwerem aplikacji.

Kod JS aplikacji ma dostęp do flagi, która mówi czy aplikacja działa offline. W kodzie HTML każdej strony aplikacji należy odwołać się do pliku manifestu udostępnianego przez serwer WWW z mime type text/cache-manifest:

<html manifest="/cache.manifest">

Przeglądarka wspierająca mechanizm Offline Web Applications po napotkaniu powyższego znacznika załaduje plik manifestu, a następnie wszystkie wymienione w nim pliki. Plik manifestu jest plikiem tekstowym, podzielonym na trzy sekcje: explicit, fallback i online whitelist. Pierwsza jest obowiązkowa i domyślna.

Przykład:

CACHE MANIFEST
# rev 42
CACHE:
/style.css
/script.js
/image.jpg
NETWORK:
/tracking.cgi

W powyższym kodzie zawarta jest informacja o 3 plikach wchodzących w skład aplikacji offline (sekcja explicit) i jednym pliku sekcji online whitelist, która zawiera pliki, które nigdy nie powinny być cache’owane.

Komunikacja

Cross Document Messaging

Mechanizm ten pozwala na przesyłanie komunikatów pomiędzy dokumentami. Również pochodzącymi z innej domeny. Do tej pory implementacja JavaScriptu w przeglądarkach zabraniała jakiegokolwiek oddziaływania dokumentów z różnych domen na siebie, w obawie o ataki typu cross-site scripting.

Realizacja tej funkcjonalności odbywa się poprzez nową metodę obiektu window o nazwie postMessage. Metoda ta oczekuje jednego argumentu typu string, będącym wiadomością, którą chcemy przesłać. Zadaniem metody będzie stworzenie zdarzenia, które zostanie wywołane na obiekcie document okna, do którego wysłaliśmy wiadomość.

XMLHttpRequest Level 2

XMLHttpRequest w wersji 2 umożliwia wykonywanie żądań spoza źródła strony. Dodatkowo, XHR2 udostępnia znacznie bardziej rozbudowany mechanizm zdarzeń informujących o postępach w transmisji. Oprócz zdarzenia readystatechange mamy kilka nowych: loadstart, progress, abort, error, load i loadend. XMLHttpRequest zwiększa możliwości komunikacji pomiędzy stronami www, nie tylko w obrębie jednej domeny, ale całego internetu.

WebSocket

HTML5 WebSocket definiuje kanał komunikacyjny w obu kierunkach (ang. full-duplex) przeznaczony dla sterowanych zdarzeniami aplikacji czasu rzeczywistego.

Jeśli serwer WWW implementuje ten standard, wówczas w dowolnym momencie istniejące połączenie HTTP można łatwo przekształcić w połączenie WebSocket. Wystarczy, że przeglądarka wyśle do serwera komunikat HTTP:

GET /demo HTTP/1.1
Host: example.com
Connection: Upgrade
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00
Sec-WebSocket-Protocol: sample
Upgrade: WebSocket
Sec-WebSocket-Key1: 4@1 46546xW%0l 1 5
Origin: http://example.com

[8-byte security key]

Serwer odpowiada:

HTTP/1.1 101 WebSocket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
WebSocket-Origin: http://example.com
WebSocket-Location: ws://example.com/demo
WebSocket-Protocol: sample

[16-byte hash response]

Od tej pory komunikaty mogą być wymieniane asynchronicznie w obie strony. Każdy komunikat jest zwykłym łańcuchem UTF-8 poprzedzonym bajtem 0×00 i zakończonym bajtem 0xFF.

Przykład połączenia:

w = new WebSocket( "ws://example.com" );
w.onopen = function() { console.info( "open" ); }
w.onmessage = function(e) { console.info( e.data ); }
w.onclose = function() { console.info( "closed" ); }
...
w.send( "Komunikat" );
...
w.close();

Web Workers

Web Workers umożliwia przetwarzanie danych w tle – na osobnych wątkach systemu operacyjnego. Technologia ta wprowadza wielowątkowość i wykorzystywanie procesorów wielordzeniowych w świecie stron www.

Tworzenie nowych wątków jest proste. W kodzie JavaScript wystarczy utworzyć nowy obiekt Worker i wskazać plik JS do wykonania:

worker = new Worker("myWorker.js");

Podsumowanie

HTML5 wprowadza prawdziwą rewolucję w świecie stron www. Dzięki nowym mechanizmom komunikacji oraz nowym sposobom przechowywania danych coraz bardziej realne staje się tworzenie rozbudowanych aplikacji działających w przeglądarkach internetowych. Niestety, HTML5 jest stopniowo implementowany przez deweloperów najpopularniejszych przeglądarek. Na stronach w3schools znajdują się aktualne informacje jakie znaczniki i atrybuty są wspierane przez dane przeglądarki. Miejmy nadzieję, że prace nad tym nowym standardem przebiegną sprawnie i już niebawem będziemy mogli korzystać w pełni z dobrodziejstw nowej wersji HTML.

Powiązane tematy

Co sądzisz o wpisie?
BeżnadziejnySłabyŚredniDobryBardzo dobry (Brak ocen, bądź pierwszy!)
Loading...
  • Isinlor

    „w3cschools” Nie czepiał bym się tej drobnej literówki gdyby nazwa nie wprowadzała w błąd – w3schools poza skrótem w3 (www) i tematyką nie ma za dużo wspólnego z W3C.
    BTW – Super robota ;)!

  • Racja, dzięki za wskazanie błędu :)

  • A czy takie dane (jak i ogólnie dane dynamicznie przetwarzane po stronie przeglądarki) mają odzwierciedlenia w drukowanej wersji strony?