Zasadniczo przeglądarkę mobilną można wykryć na kilka sposobów:
- analizując parametr User-Agent przesyłany do serwera
- analizując parametr userAgent oraz inne ustawienia po stronie JavaScriptu
- wykorzystując plik CSS dla urządzeń typu handheld
Parametr User-Agent analizowany po stronie serwera
Jedną z najbardziej uniwersalnych metod jest rozpoznawanie klienta po stronie serwera i automatycznie przekierowanie go na stronę dostosowaną do urządzeń mobilnych. Zasadniczo całość algorytmu polega na wykryciu odpowiedniego ciągu znaków, który by wskazywał na mobilną przeglądarkę.
Jednym z takich rozwiązań jest kod zaprezentowany kilka lat temu na serwisie mobiforge. Oprócz wykrywania po User-Agent badane są także inne nagłówki żądania wysyłane przez klienta.
Inną opcją jest wykorzystanie podobnych skryptów automatycznie generowanych dla wielu różnych języków np. przez serwis detectmobilebrowser.com - tutaj znajdziemy rozwiązania nie tylko na PHP czy Pythona ale także dla wielu innych języków zarówno server-side jak i client-side.
<?php
// from http://mobiforge.com/developing/story/lightweight-device-detection-php
$mobile_browser = '0';
if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
$mobile_browser++;
}
if ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') > 0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
$mobile_browser++;
}
$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4));
$mobile_agents = array(
'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
'wapr','webc','winw','winw','xda ','xda-');
if (in_array($mobile_ua,$mobile_agents)) {
$mobile_browser++;
}
if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini') > 0) {
$mobile_browser++;
}
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows') > 0) {
$mobile_browser = 0;
}
if ($mobile_browser > 0) {
// do something
}
else {
// do something else
}
?>
Inną opcją jest wykorzystanie podobnych skryptów automatycznie generowanych dla wielu różnych języków np. przez serwis detectmobilebrowser.com - tutaj znajdziemy rozwiązania nie tylko na PHP czy Pythona ale także dla wielu innych języków zarówno server-side jak i client-side.
Więcej informacji o urządzeniu mobilnym od WURFL lub DeviceAtlas
Ciekawą opcją jest także wykorzystanie frameworku Zend oraz opcji udostępnianych przez moduł Zend_Http. Tam oprócz samej detekcji czy urządzenie jest mobilne możemy także dostać jego dodatkowe parametry, które są najczęściej zaciągane z serwisów WURFL lub DeviceAtlas.WURFL jak i DeviceAtlas udostępniają API, do którego przesyłamy ciąg znaków identyfikujący klienta, a w odpowiedzi otrzymujemy zbiór ustawień urządzenia. Przykładowo w przypadku WURFL udostępniony jest tzw. WURFL Web Service, który opiera się na zasadzie serwera REST'owego. Wysyłając jako parametr ua ciąg znaków identyfikujących klienta w odpowiedzi otrzymujemy solidny plik JSON z parametrami urządzenia.
Przykładowo dla Samsunga i9000 (Galaxy S) URL podający jego parametry wygląda następująco:
http://www.wurflws.com/wurflws?ua=Mozilla/5.0%20(Linux;%20U;%20Android%202.1-update1;%20en-au;%20GT-I9000%20Build/ECLAIR)%20AppleWebKit/530.17%20(KHTML,%20like%20Gecko)%20Version/4.0 %20Mobile%20Safari/530.17
Z poziomu PHP takie wywołanie można wykonać komendą file_get_contents, a następnie wrzucić to w json_decode i mamy gotową tablicę asocjacyjną z parametrami urządzenia
<?php
$return = file_get_contents('http://www.wurflws.com/wurflws?ua='.urlencode($_SERVER['HTTP_USER_AGENT']));
$device = json_decode($return);
?>
Wykryte urządzenie to rzeczywiście Galaxy S z rozdzielczością 800x480 itd... W ten sposób możemy także dopasować niektóre funkcjonalności np. do określonych typów telefonów lub rozdzielczości. A oto fragment odpowiedzi od serwera:{
"aac": "true",
"accept_third_party_cookie": "true",
"access_key_support": "false",
"ajax_manipulate_css": "true",
"ajax_manipulate_dom": "true",
"ajax_preferred_geoloc_api": "gears",
"ajax_support_event_listener": "true",
"ajax_support_events": "true",
"ajax_support_getelementbyid": "true",
"ajax_support_inner_html": "true",
"ajax_support_javascript": "true",
"ajax_xhr_type": "standard",
"brand_name": "Samsung",
"cookie_support": "true",
"css_border_image": "webkit",
"css_gradient": "none",
"css_rounded_corners": "webkit",
"css_spriting": "true",
"css_supports_width_as_percentage": "true",
"deck_prefetch_support": "false",
"device_claims_web_support": "true",
"device_os": "Android",
"device_os_version": "2.1",
....
}
Parametr userAgent oraz inne ustawienia po stronie JavaScriptu
Mówiąc o JavaScript'cie w urządzeniu mobilnym na ogół mamy na myśli smartphone'a, który ma swoim pokładzie przeglądarkę, która w pełni wspiera język skryptowy (aczkowiek niekoniecznie z taką samą wydajnością jak ich odpowiedniki desktopowe). Przykładem przeglądarki, która tylko częściowo wspiera JavaScript jest Opera Mini, natomiast ona posiada inne zalety, których nie mają produkty konkurencji.W tym przypadku przeglądarka oparta na WebKit'cie (w Androidach), Safari (na iPhone'ach), Opera Mobile (Symbian, Android, Windows Mobile) czy Firefox Mobile (Android, Maemo) potrafi zrozumieć i (z reguły) uruchomić kod JavaScript przygotowany dla przeglądarek desktopowych.
Przekierowanie odbywa się na podobnej zasadzie jak w przypadku strony serwera - tylko tym razem analizowany jest ciąg znaków navigator.userAgent - zarówno w przypadku biblioteki JS Mobile Redirection jak i kodu generowanego przez wcześniej wymieniony serwis detectmobilebrowser.com (tutaj dochodzą jeszcze wartości navigator.vendor i window.opera).
// part from JS Mobile Redirection var agent = navigator.userAgent.toLowerCase(), /* ... */ isUAMobile =!!(agent.match(/(iPhone|iPod|iPad|blackberry|android|htc|kindle|lg|midp|mmp|mobile|nokia|opera mini|palm|pocket|psp|sgh|smartphone|symbian|treo mini|Playstation Portable|SonyEricsson|Samsung|MobileExplorer|PalmSource|Benq|Windows Phone)/i));
Oprócz standardowego wykrywania czy jest to urządzenie mobilne możemy także przy okazji badać dostępność funkcjonalności szczególnie przydatnych w urządzeniach mobilnych jak np. geolokacja czy API dotyczące pozycji urządzenia w przestrzeni.
// detecting geolocation
if (navigator.geolocation) {
alert('geolocation available!');
}
// detecting device orientation
if (window.DeviceMotionEvent == undefined) {
alert('device orientation available!');
}
Jeżeli planujemy wykrywanie większej ilości ustawień (już niekoniecznie tylko dla urządzeń mobilnych) możemy użyć biblioteki Modernizr, która ma za zadanie ułatwić sposób detekcji i użytkowania nowych, dostępnych w HTML5 i CSS3 funkcjonalności.
Plik CSS dla urządzeń typu handheld
Osobny plik dla urządzeń przenośnych może nam pozwolić zamienić naszą stronę dostosowaną dla normalnych systemów do przeglądarek mobilnych. Do niedawna możliwe było zdefiniowanie typu handheld dla plików CSS - wówczas przeglądarki mobilne interesowały się tylko stylami, które się tam znalazły. Jednak najnowsze wersje nie wspierają już tej metody - za to możemy stosować tzw. CSS media queries dostępne w CSS3, które umożliwiają uruchamianie poszczególnych plików w zależności od różnych parametrów komputera użytkownika.Oto przykładowy zapis definiujący style dla urządzeń mobilnych:
<link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)"/>
W miarę aktualną rozpiskę dotyczącą wykrywania plików CSS znalazłem na stronie A List Apart, gdzie są wyszczególnione zachowania poszczególnych przeglądarek na różne definicje stylów.
Przykładowo starsze Opery (Mini do wersji 4 i Mobile do wersji 9) wykrywały handheld, natomiast nowsze już ignorują ten typ urządzenia, za to pozwalają sobą zarządzać przy użyciu media queries.
Dodatkowym minusem jest to, że jeżeli użytkownik chce wyłączyć te style, to musi albo ustawić to u siebie w przeglądarce (jeżeli istnieje taka możliwość) lub obsługiwać cookies'y (wówczas je wyłączyć z poziomu serwera).
Problemy przy wykrywaniu czy użytkownik korzysta z urządzenia mobilnego jest w CSS na tyle skomplikowane, że z reguły przygotowuje się jednak dedykowaną stronę mobilną, zaś style CSS dopasowuje się do różnych rozdzielczości np. przy użyciu media queries
Na koniec o Operze
 |
| źródło: http://www.opera.com/press/resources/ |
Na koniec chciałem zwrócić uwagę jedną rzecz - a mianowicie poruszyć temat Opery oraz unikalnego mechanizmu Opera Turbo. Ta technologia polega na dopasowywaniu/kompresowaniu serwisu (obrazków itp.) do rozmiaru ekranu urządzenia, dzięki czemu możemy mieć osiągnąć dużo mniejszy transfer. Wszystkie kompresje obrazków, stron itp. odbywają się po stronie norweskich serwerów.
I tutaj pojawia się problem, ponieważ dane stają się dostępne dla osób trzecich - w tym przypadku dla Opery. Dlatego też niektóre banki jak np. BZWBK do niedawna blokowały dostęp poprzez Operę z urządzeń mobilnych. Co ciekawe w tym przypadku zablokowano dostęp do serwisu zarówno z poziomu Opery Mini (gdzie Turbo to podstawa) ale także Opery Mobile, gdzie domyślnie Turbo jest wyłączone.
Klientów korzystających z urządzeń z Windows Mobile w ten sposób pozbawiono możliwości korzystania z jedynej właściwej dla tego systemu przeglądarki (Opera Mobile lub Mini, bo wbudowany IE jest na poziomie desktop'owego IE 3 lub 4).
Tym przykładem chciałem zwrócić uwagę, że detekcję po parametrach User-Agent należy traktować bardzo rozważnie bo możemy pozbawić (czasem także mając dobre intencje, a nie zupełnie przypadkowo) pewnych osób dostępu do naszego serwisu.
Brak komentarzy:
Prześlij komentarz