70-480 – Wdrażanie interfejsów API HTML5

70-480

Wdrażanie interfejsów API magazynu, interfejsów API AppCache i interfejsów API geolokalizacji.



Krótko i zwięźle, będzie o API HTML5:

  • HTML5 Geolocation
  • HTML5 Web Storage
  • HTML5 App Cache

HTML5 Geolocation

Geolokacja, to nic innego jak lokalizowanie danego urządzenia (użytkownika) na mapie. Dzięki nowemu API HTML5 jesteśmy w stanie pobrać współrzędne geograficzne, korzystając ze zwykłej przeglądarki zainstalowanej na desktopie lub laptopie, a tym bardziej z urządzenia mobilnego, wyposażonego w moduł GPS.

Dane o lokalizacji należą do danych wrażliwych, czyli takich, które mogłyby naruszyć naszą prywatność i dlatego przeglądarki “zapytają nas” za pierwszym razem, gdy spróbują odczytać nasze współrzędne geograficzne.

Przejdźmy jednak do kodu i zobaczmy w jaki sposób możemy pobrać nasze aktualne współrzędne (przykład z w3schools).

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/8qu456g9/2/" style="width:100%;height:400px;border:solid #4173A0 1px;"]
  1. Sprawdzamy, czy API geolokalizacji jest dostępne.
  2. W przypadku obsługi przez przeglądarki navigator.geolocation wywołujemy metodę getCurrentPosition(), która jako swój pierwszy argument przyjmuje funkcję (callback), który wywołany zostanie w momencie odczytania przez przeglądarkę aktualnej lokalizacji.
  3. W przypadku braku obsługi geolokalizacji wyświetlony zostaje stosowny komunikat.
  4. Metoda showPosition() zostaje wywołana jako callback metody getCurrentPosition. Przekazany zostaje do niej obiekt position, z którego pobrana zostaje szerokość i długość geograficzna.

W przypadku tradycyjnych przeglądarek, lokalizacja zostanie określona najprawdopodobniej na podstawie naszego adresu IP. W przypadku przeglądarek działających z na urządzeniach w łączoną obsługą GPS otrzymamy w pełni poprawną lokalizację.

Wspomniałem wyżej, że funkcja getCurrentPosition, jako swój pierwszy argument przyjmuje callback, wywoływany w momencie odczytania pozycji geograficznej. Rzeczywiście nazywa się to successCallback, a dwa pozostałe parametry to:

  • errorCallback – funkcja, która wywołana zostanie w sytuacji gdy wystąpi błąd. Argumentem będzie w tym wypadku obiekt zawierający informację o kodzie błędu. Przykładowa funkcja przekazana jako drugi argument może wyglądać następująco:
    function showError(error) {
        switch(error.code) {
            case error.PERMISSION_DENIED:
                x.innerHTML = "User denied the request for Geolocation."
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML = "Location information is unavailable."
                break;
            case error.TIMEOUT:
                x.innerHTML = "The request to get user location timed out."
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML = "An unknown error occurred."
                break;
        }
    }
  • options – obiekt umożliwiający ustawienie trzech wartości
    • enableHighAccuracy (true|false) – domyślnie false. Ustawienie tej wartości na true powoduje, że API stara się określić jak najdokładniejszy wynik.
    • timeout – domyślnie 0. Określenie maksymalnego czasu oczekiwania na odpowiedź.
    • maximumAge – domyślnie 0. Maksymalny czas buforowania pobranej już wartości.

Dzięki tym kilku prostym krokom możemy bardzo łatwo wyświetlić na stronie mapę z aktualnym położeniem użytkownika:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/8qu456g9/3/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Prawda, że proste?

W przypadku urządzeń mobilnych z GPS możemy także stworzyć taką mini nawigację, ale w tym wypadku wykorzystamy metodę: watchPosition(), która robi dokładnie to samo co getCurrentPosition(), ale nie jednorazowo, a ciągle. Do zatrzymania “obserwacji” naszej pozycji skorzystać możemy z funkcji clearWatch(), przyjmującej jako argument watchID zwracane przy wywołaniu metody watchPosition.

Poniższy przykład zadziała wyłącznie na urządzeniach z aktywnym modułem GPS:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/8qu456g9/4/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

HTML5 Web Storage

Kolejnym API wprowadzonym w HTML5 jest możliwość korzystania z lokalnej pamięci przeglądarki, czyli tak zwanego Web Storage. Do tej pory mieliśmy możliwość persystowania danych po stronie przeglądarki w postaci sesji oraz cookie (ciasteczka). To drugie ma jednak swoje ograniczenia (max 4KB i przesyłanie z każdym requestem) i właśnie dlatego powstał nowy mechanizm. Pozwala on na szybki dostęp do danych zapisanych po stronie przeglądarki, a samych danych może być także znacznie więcej (co najmniej 5MB). Dodatkowo mamy możliwość trwałego zapisu danych: local storage oraz na czas trwania sesji: session storage.

Gdy zechcemy użyć tego mechanizmu w naszej aplikacji, to w pierwszej kolejności należałoby sprawdzić jego wsparcie. Obecnie przeglądarki radzą sobie z tym całkiem nieźle, ale nigdy nie wiemy na co trafimy. Posłuży na do tego prosty kod w JavaScript:

if (typeof Storage !== 'undefined') {
    // Code for localStorage / sessionStorage.
} else {
    // Sorry! No Web Storage support..
}

Zerknijmy w końcu na kod JavaScript pozwalający na dostęp do magazynu danych oraz możliwość zapisu do niego nowych wartości:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/5fbyjx1b/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Jak widać, jest to banalnie proste.

  1. Odwołujemy się do globalnego obiektu localStorage poprzez wykonanie metody setItem z parametrami keyvalue. Jak sama nazwa mówi – pierwszy z nich to klucz, pod którym trzymany jest drugi parametr, czyli wartość.
  2. Pobieramy z localStorage wartość pod wskazanym kluczem poprzez wywołanie metody getItem.
  3. Usuwamy wartość na podstawie klucza i metody removeItem.
  4. Czyścimy cały localStorage.

Całość działa identycznie dla obiektu sessionStorage.

Należy pamiętać, że wartości w Web Storage, zarówno dla localStorage oraz sessionStorage przechowywane są i muszą być jako ciąg znaków. Wymusza to na nas odpowiednie konwersje typów.

HTML5 App Cache

Dzięki Application Cache API jesteśmy w stanie przetrzymywać zasoby (elementy strony WWW: pliki JavaScript, CSS, obrazki itd.) po stronie przeglądarki i tym samym sprawić, że:

  • aplikacja będzie działała offline i nie będzie pobierała ciągle tych samych zasobów z serwera;
  • szybkość działania zostanie znacznie poprawiona, bo.. nie będzie konieczności ładowania dodatkowych zasobów z serwera, a jak wiemy jest to znaczny koszt;
  • ilość pobieranych danych z serwera będzie po prostu mniejsza.

By zacząć wykorzystywać App Cache należy:

  1. Zadeklarować plik manifestu jako atrybut elementu html:
    <html manifest="manifest.appcache">
  2. Stworzyć wspomniany plik manifest.appcache i utworzyć w nim reguły zapisywania i odświeżania zasobów. Nazwa i rozszerzenie pliku są dowolne. Najważniejsze jednak, by serwer udostępniał ten plik z nagłówkiem MIME: text/cache-manifest.

Tak więc należałoby stworzyć reguły zapisywania zasobów, wykorzystując w tym celu odpowiednie sekcje:

  • CACHE MANIFEST – pliki zdefiniowane w tej sekcji zapisywane są po stronie przeglądarki, gdy pierwszy raz odwiedzamy stronę
  • NETWORK – pliki nigdy nie są zapisywane po stronie przeglądarki, wymagają każdorazowego pobrania z serwera
  • FALLBACK – pliki wyświetlą się w momencie gdy strona przestanie być dostępna

Przykładowy manifest.appcache może wyglądać następująco:

CACHE MANIFEST
/style.css
/main.js
/header.png

NETWORK:
login.jsp

FALLBACK:
/ /offline.html

Zdefiniowane zasoby w sekcji CACHE MANIFEST zostaną zapisane po stronie przeglądarki przy pierwszej wizycie, login.jsp będzie pobierany za każdym razem, a offline.html pokaże się wtedy gdy strona przestanie być dostępna.

Gdy pliki zostały już zapisane w pamięci przeglądarki, to mamy trzy możliwości na ich odświeżenie:

  • Użytkownik wyczyści dane zapisane w przeglądarce.
  • Plik manifestu zostanie zmodyfikowany.
  • Application Cache został zaktualizowany poprzez kod JavaScript.

Praktyką jest dodawanie komentarza do pliku manifestu i aktualizowanie go za każdym razem, gdy zmienia się zawartość plików zdefiniowanych w sekcji CACHE MANIFEST.

Na koniec odsyłam jeszcze do tutoriala Application Cache na html5rocks.com i wykorzystania języka JavaScript do manipulacji cache przeglądarki.