[Node.js] Porada odnośnie wykrywania urządzeń mobilnych

Question

Witam

Chciałbym się spytać czy użycie biblioteki express-device do wykrycia czy użytkownik korzysta z urządzenia mobilnego czy z komputera jest dobre czy są jakieś lepsze opcje czy coś bo czytałem dużo różnych sposobów ale zazwyczaj w komentarzach znajdywały się osoby takie które odradzały korzystania z takich sposobów np. userAgent czy jakoś tak i znalazłem właśnie bibliotekę express-device i się zastanawiam czy to dobry sposób aby wykryć użytkownika mobilnego. Bym był wdzięczny jak by ktoś kto ma większe doświadczenie w node.js się wypowiedział i napisał czy to dobry pomysł albo jak zna jakiś lepszy to napisał.

Answer 1

Nie powinieneś w ogóle wykrywać czy urządzenie jest mobilne. Nie powinno to ci być potrzebne. Strony internetowe powinny dobrze działać i wyglądać niezależnie od urządzenia a dzisiejszy CSS umożliwia to bardzo łatwo.

Poza tym co to jest urządzenie mobilne, jak to definiujesz?

Telefon/tablet? Co wtedy z tabletami z klawiaturą?

Urządzenia z dotykowym ekranem? Co z laptopami z dotykowymi ekranami?

Mały rozmiar ekranu? Co jak ktoś ma aplikacje na pół ekranu włączoną i w trakcie korzystania ze strony zwiększy okienko?

Łączność 3G/4G? A co jak ktoś ma modem w komputerze, albo Access point modemowy i ma wifi z internetu mobilnego albo tethering z telefonu?

Duża moc obliczeniowa? Dzisiejsze topowe smartfony są często dużo szybsze od tanich laptopów w trybie oszczędzania baterii, więc nie można po tym też tego ocenić.

Dlatego że nie da się tego łatwo ocenić to uważam, że warto unikać rozdzielania funkcjonalności z uwagi na typ urządzania. Tym bardziej na stronach internetowych, które działają na każdym urządzeniu, więc powinny oferować te same funkcje na każdym urządzeniu.

Comments

Dokladnie, pytanie zasadnicze to jaki ma być cel rozpoznania urządzenia, dlaczego API w backendzie ma się tym interesować?

---

Dobra ogółem urządzenie mobilne chodzi mi o smartfony i nie chodzi o ekrany dotykowe bo to jest wykrywane chyba tylko jako przeglądarki bo nie da się zainstalować przeglądarki chrome na komputer i na telefon tej samej są dwie wersje. A ekran dotykowy raczej nie ma znaczenia. A odnośnie zwiększania okna to nie chodzi mi stricte o to ze stały rozmiar strony tylko ze ona bedzie w jakimś sensie represywna tylko ze wiadome ze na minitorze komputera czy na laptopie więcej rzeczy da się poukładać w jednej lini i nie trzeba robić jakiś rozwijanych menu lub coś takiego tak jak to np. ma yt ze na komputerze ma wersje sub domenę www. a na telefon wersje sub domenę m., i to nie tylko yt ma tak bo jest wiele aplikacji internetowych które wykorzystując osobne sub domeny w zależności od  rodzaju urządzenia i po coś jednak to się robi.

A odnośnie tego 3G/4G i access point to co wspólnego ma rodzaj połączenia z internetem do wyświetlaniem strony internetowej??

I co ma moc obliczeniowa telefonu do tego jaka wersja strony będzie się wyświetlać??

I będą takie same funkcje tylko ze po prostu strona będzie inaczej ułożona. Inaczej bedzie wyglądać niż na komputerze.

---

Polecam najpierw spróbować ograć to jednym url z css i media query, a dopiero potem zastanowic sie co ewentualnie dałoby rozpoznanie wersji w backendzie. Nie patrz na inne strony, tym bardziej na tak potężne apki jak yt itp. Patrz zawsze na konkretny projekt i jak da się to ograć w css to nie widzę powodu dla zabaw w backendzie.

---

No tak tylko ze w moim przypadku robię stronę która wersje mobilna ma strasznie okrojona i w ogóle inaczej wyglądająca niż wersje na komputer i tworząc stronę za pomocą media query to w kodzie html będzie strasznie dużo elementów które będą musiały mieć display none aby ich nie było widać bo nie będą potrzebę na stronie w wersji na komputer więc dlatego takie pytanie w temacie i rozdzielanie tych wersji

---

nie da się zainstalować przeglądarki chrome na komputer i na telefon tej samej są dwie wersje

Nie da się zainstalować, ale da się tak przedstawić przeglądarkę. Ba, mobilny Chrome ma wręcz wbudowany knefel do wymuszania wersji dekstopowej. 

---

@Marak123,  zrób dwie wersje strony:
twojastrona.pl - strona na komputery

m.twojastrona.pl - strona na urządzenia mobilne

i wtedy przy wejściu na jedną z tych stron sprawdź jakie jest urządzenie (userAgent z requesta) i wtedy przekieruj na odpowiednią stronę

---

A odnośnie tego 3G/4G i access point to co wspólnego ma rodzaj połączenia z internetem do wyświetlaniem strony internetowej??

Urządzenia mobilne to urządzenia przenośne, czyli często takie, które nie mają 'niemobilnego' połączenia z internetem (mam na myśli kabel np. Ethernet). W teorii mógłbyś wykryć typ połączenia i na tej podstawie określić, czy masz do czynienia z urządzeniem mobilnym czy stacjonarnym. Dlatego pytałem czy według ciebie to jest wyznacznik 'mobilności'. Jednakże jest to niepewna metoda wykrywania głównie z uwagi na poziom wsparcia w obecnych przeglądarkach. 

---

@JAKUBW aha to trochę lipne wykrywanie bo raczej większość osób mających w domu wifi korzysta z nie go a nie z transferu danych 

---

@MsMaciek123 no ta wiem tylko ze myślałem żeby to raczej było na jednej sub domenie a nie na dwóch osobnych

 

@Comandeer tak to akurat wiem ze można ale raczej nikt z osób które na co dzień korzystają z tel do przeglądania stron nie ma zaznaczonej opcji żeby pokazywało wersje desktopową strony

---

ale raczej nikt z osób które na co dzień korzystają z tel do przeglądania stron nie ma zaznaczonej opcji żeby pokazywało wersje desktopową strony

i tak i nie... wcześniej napisałeś:

 robię stronę która wersje mobilna ma strasznie okrojona i w ogóle inaczej wyglądająca niż wersje na komputer 

zauważ, że dzisiaj większość ruchu to często mobile, a jak user zauważy, że wersja desktopowa ma więcej funkcjonalności to niekoniecznie zechce przesiąść się na pc/laptopa, może właśnie zechce przełączyć mobile na wersję desktop, przez co pewnie dostanie wizualnie kaszankę...

Ja bym na Twoim miejscu zastanowił się dlaczego in czy na pewno chcesz ograniczać funkcjonalności na mobile? Jeśli masz jakaś mocno specjalizowaną apkę, gdzie faktwyznie większość ruchu to desktop to spoko, ale czy na pewno tak jest?

---

Chodziło mi o strasznie okrojony wygląd względem wersji desktopowej funkcje i wszystko będzie takie samo tylko ze rozmieszczenie tych rzeczy na stronie będzie inne bo na wersji mobilnej będzie to pochowane bardziej bo nie mam miejsca gdzie to wsadzić na ekranie. No ale wiem chyba o co ci chodzi Dzięki za radę 

---

przemyśl też czy na pewno chcesz tak ukrywać to na mobile... warto zastanowic się też nad tym, jak user będzie się czuł na naszej stronie desktop, jeśli wcześniej był na mobile... czy odnajdzie się bez problemu, czy będzie czuł, że nadal jest na tej samej stronie, i oczywiście w drugą stronę...

oczywiście nie chodzi o to, aby wszystko wyglądało tak samo itp. itd., w żadnym razie, ale warto postawić sobie takie pytanie na etapie projektowania layoutu bo czasami okazuje się, że zbyt mocno skupiamy się na makietach jednej z wersji, zapominając, ze user może pojawić się "z każdej strony" w naszej aplikacji :)

ponad to mamy też tv smart, tablety itp. itd. owszem, może dzisiaj jeszcze niszowe, ale dając np. dobry content userowi na smarttv pokazujemy profesjonalizm, podejście uniwersalne itp. Oczywiście zawsze jeszcze jest kwestia biznesowa - na ile opłaca się włożyć siły z design smarttv/tablet i utrzymywać to w dalszych zmianach... także jak widzisz nie ma jednej, uniwersalnej odpowiedzi - każdorazowo trzeba sobie zadać kilka pytań, chociażby po to, by w pełni świadomie podejmować decyzje.

---

no i oczywiście jeszcze jedno... analiza userAgenta pamiętaj, że zawsze wiąże się z pewnym ryzykiem, dzisiaj praktycznie co chwile wychodzą nowe urządzenia, mniejsze, większe, tablety, smarttv, smart watch, smart nie wiadomo co jeszcze itp. :) Warto mieć tego świadomość korzystając z jakiś bibliotek, chociażby po to, by pilnować ich aktualizacji itp. To zawsze jakiś dodatkowy nakład czasu na utrzymanie aplikacji, testowanie czy update libki nie zepsuł nic itp. itd. Także tym bardziej 2 razy zastanów się, czy na pewno jest to dobry kierunek, czy może jednak wysłanie tych paru kb do usera i ukrycie ich css nie będzie bezpieczniejsze/wygodniejsze itp. (ale oczywiście jak to zawsze bywa - odpowiedź musisz udzielić sobie sam, ja tylko daję argumenty)

---

Moja rada (zasłyszana z tej prezentacji swoją drogą dobrej prezentacji) jest taka: Zaprojektuj interfejs na telefony najpierw a następnie adoptuj go na komputery. Nie w drogą stronę. Dlatego że większość ruchu na wielu stronach to telefony, a druga kwestia to taka, że na komputerze z mobilnej wersji da się korzystać zazwyczaj w porządku, na telefonie z komputerowej bardzo ciężko.

---

JAKUBW w większości przypadków tak, ale nie podawajmy tego jako złotą myśl dla każdej aplikacji...

na przykład niektóre aplikacje inżynierskie, aplikacje do obsługi placówek medycznych, aplikacje księgowe itp. itd. Są sytuacje, gdzie jednak dla usera ważny jest duży ekran i możliwość podglądu wielu informacji na raz, a mobile jest tylko pewnym dodatkiem, np. do szybkiej zmiany czegoś będąc w sklepie itp. itd. 

Także mobile first jak najbardziej, ale nie jest to 100% przypadków, zawsze patrzmy na każdą aplikację indywidualnie, analizując jej użytkowników i ich realne potrzeby.

---

@JAKUBW, Ta wiem o tej zasadzie

@Tomek Sochacki, ta zdaje sobie z tego sprawę ze co chwile wychodzą nowe urządzenia. I tak ja miałem w planach zrobić responsywną stronę za pomocą media query tylko ze jak by dwie wersje jedna na telefon a druga na desktop ale się tak właśnie zastanawiam czy nie lepiej zrobić po prostu jedna wersje i wysyłać więcej kb użytkownikowi

Dzięki wszystkim za poświęcony czas