Przedmiotem dzisiejszego posta jest wchodzące w skład HTML5 API dzięki któremu JavaScript może w przeglądarce operować na plikach lokalnych, co można wykorzystać do tworzenia cache’y i danych offline na użytek aplikacji (np. baza emaili w webowym kliencie poczty, dostępna nawet po utracie połączenia z Internetem). Póki co API zaimplementowane jest w Google Chrome 9+, a jego podstawy (File API) w Firefox 3.6.3+.

Czytelnik obeznany z obsługą AJAXa (zwłaszcza w najnowszej, drugiej wersji) odnajdzie się tu bez trudu, ponieważ sposób wykonywania operacji I/O jest bliźniaczo podobny jak w XMLHttpRequest2. Tu również mamy do dyspozycji zdarzenia które pozwalają nam monitorować przebieg operacji (obsługując je możemy np. uaktualniać pasek postępu), podobnie jak mamy do wyboru tryb asynchroniczny i synchroniczny (ten drugi z przeznaczeniem dla osobnych wątków – WebWorkers). Zawartość pliku możemy traktować jako łańcuch, Data URL, blob, lub ArrayBuffer. Data URL to (w uproszczeniu) łańcuch reprezentujący tablicę bajtów w Base64 – można go użyć w HTMLowym img.src (czyli jako źródło danych wyświetlanego obrazka). Dwa ostatnie typy danych zostały wprowadzone ponieważ sam JavaScript nie udostępnia typu całkowitoliczbowego ani wydajnej implementacji tablicy bajtów, przy czym ArrayBuffer reprezentuje bufor danych na potrzeby WebGL.

File

File API pozwala reprezentować w przeglądarce plik, jak również uzyskać dostęp do metadanych plików lokalnych wybranych w formularzu przez użytkownika, oraz dostęp do danych zawartych w plikach (odczyt). Istotna nowinka znacząco poprawiająca doznania Internautów: teraz w kontrolce wyboru pliku dzięki atrybutowi multiple użytkownik może wybrać wiele plików naraz, a dzięki webkitdirectory nawet cały katalog. Może też przeciągać pliki z pulpitu do formularza na stronie WWW i odwrotnie. Po wyborze plików, a przed wysłaniem ich do serwera, z poziomu JavaScriptu możemy ustalić dla każdego z nich nazwę, rozmiar, typ MIME, datę ostatniej modyfikacji itp., a także wczytać zawartość pliku do przeglądarki. Dzięki temu możemy np. już w przeglądarce stwierdzić że plik jest zbyt duży aby przesyłać go na serwer, wyświetlić podgląd obrazka (ang. thumbnail), ewentualnie zapisać zawartość pliku w systemie plików zarezerwowanym dla aplikacji webowej (patrz FileSystem API dalej) tak aby była dostępna offline gdy nie ma dostępu do Internetu itd.

Czytaj więcej »

Google zaproponował rozszerzenie protokołu HTTP przyspieszające ładowanie stron WWW nawet o 50%.

Łącza internetowe stają się coraz szybsze, ale pozostaje problem dużych opóźnień. Jest on dodatkowo pogłębiany przez protokół HTTP, który został zaprojektowany kilkanaście lat temu i coraz gorzej pasuje do współczesnych wymagań. Główne zarzuty w tym kontekście:

• Jest to protokół zapytanie/odpowiedź, pojedyncza realizacja zlecenia blokuje całe połączenie TCP nawet na kilkaset milisekund nie pozwalając na równoległą realizację innych zleceń (np. dociągnięcie obrazków); aby przyspieszyć, przeglądarki otwierają kilka połączeń TCP (np. 6).
• Serwer może wysłać klientowi dane tylko w odpowiedzi na zapytanie klienta.
• Sekcja nagłówków w każdym komunikacie HTTP (w tym ciasteczka i praktycznie niezmienne nagłówki takie jak User-Agent, Host czy Accept*) stanowią często znaczną część każdego komunikatu HTTP (od 200 bajtów do 2KB).
• Kompresja i szyfrowanie danych są opcjonalne.

Google zaimplementował w swojej przeglądarce i używa w swoich usługach (Google Search, GMail, Google Docs) rozszerzenie HTTP o nazwie SPDY.

Na czym polega zmiana na lepsze?

• Można współbieżnie realizować dowolnie wiele zleceń HTTP w obrębie jednego połączenia TCP.
• Nagłówki są kompresowane (co zmniejsza ich rozmiar nawet o 85%), a redundantne nagłówki nie są w ogóle przesyłane.
• Serwer może inicjować komunikację z klientem wypychając do niego dane jeśli zajdzie taka potrzeba (nagłówki X-AssociatedContent i X-Subresources, przy czym ten drugi jest sugestią dla klienta, że powinien poprosić o dodatkowe zasoby).
• Klient może przypisać priorytety swoim żądaniom, aby poprawić doznania użytkownika gdy wąskim gardłem jest przepustowość sieci.
• Strumień komunikatów jest szyfrowany (SSL).
• Aby móc skorzystać z usprawnienia, należy zmienić implementację przesyłania pakietów HTTP przez serwer WWW i przeglądarkę, ale nie jest konieczna zmiana kodu istniejących aplikacji webowych ani po stronie serwera, ani klienta. W szczególności, nie ulega zmianie format komunikatów HTTP GET ani HTTP POST.

Mozilla wyraziła zainteresowanie pomysłem Google’a i zaimplementowała jego obsługę w jednej ze swoich łatek Firefoksa. Dostępne są już implementacje serwerów WWW dla różnych języków programowania (Python, Java, Ruby), a także stosowny moduł do Apache (mod-spdy).

Gdy w Google Chrome wejdziemy na URL chrome://about, otrzymamy rozpiskę wewnętrznych stron przeglądarki, pozwalających „zajrzeć pod maskę” Chrome’a, jak również wejść do różnych formatek poprzez URL zamiast pracowicie wyklikiwać je z menu.

Co ciekawsze pozwoliłem sobie wynotować:

Chrome oferuje również bogatą listę opcji wiersza poleceń. Przykładowo opcja --enable-logging --v=1 włącza logowanie do katalogu z danymi użytkownika ( ~/.config/google-chrome/chrome_debug.log na Linuksie, C:\Users\\AppData\Local\Google\Chrome\User Data\chrome_debug.log na Windows, katalog z danymi użytkownika można zmienić opcją --user-data-dir).

Do wspomnianego katalogu z danymi użytkownika (i jego podkatalogu Default) warto zajrzeć, żeby zobaczyć np. jak Chrome obsługuje pliki bazy SQLite dostępne za pomocą Web SQL Database.

Zakres usług, jakie oferuje się nam za mniej lub bardziej darmo jest już naprawdę rozległy. Popatrzmy tylko na tę listę podaną w jednym z numerów czasopisma PCWorld:

Pliki w chmurze

Kopia zapasowa danych

• Backblaze – pozwala na przechowywanie nieograniczonej liczby danych z jednego komputera (np. kopia zapasowa dysku) – 40$ rocznie, dostęp z przeglądarki lub programu,
• Mozy – darmowy do 2GB, dostęp z przeglądarki lub programu.

Synchronizacja folderów

• SugarSync – do 5GB bezpłatnie, oprogramowanie klienckie dla wielu systemów
• Windows Live SkyDrive – do 25GB bezpłatnie, powiązane z pakietem biurowym w chmurze Office Web Apps
• Dropbox – do 10GB bezpłatnie (po wykonaniu kilku zadań, np. zaproszeniu znajomych),
• Cloud Drive – do 5GB bezpłatnie (Amazon),
• IDrive – 5GB bezpłatnie.

Muzyka

Na żądanie

• Grooveshark – pozwala odtwarzać muzykę z potężnej bazy piosenek, dzięki współpracy twórców portalu z wytwórniami muzycznymi
• Jamendo – największy na świecie katalog bezpłatnej, legalnej muzyki do pobrania, w tym kilka stacji radia internetowego

Płytoteka

• Google Music (w fazie beta, Google) – pozwala wgrać swoje utwory i odtwarzać z chmury,

Radio

• Last.fm,
• StereoMod,
• FM Tuba PL,
• Open.fm

Podręczne narzędzia

Czytaj więcej »