Како открити кориснички уређај како бисте могли побољшати њихово корисничко искуство

Пре неколико месеци гледао сам сјајан говор са Цхроме Дев Суммит-а о перформансама на спорим уређајима.

Запањило ме је сав посао који је Фацебоок обавио на идентификацији уређаја како би створио боље корисничко искуство. Премотавање унапред до сада, и одлучио сам да проучим мало више о тој теми и видим шта могу да радим у Тхинкифицу (компанији у којој радим).

Кориснички агенти

Кориснички агенти су добро познати програмерима. Користимо их за откривање ботова, преусмеравање корисника на одређену верзију наше веб странице или додавање ЦСС класа на нашој страници како бисмо могли створити различита искуства.

У Тхинкифицу већ користимо претраживач Руби гем за рашчлањивање корисничког агента и добијање релевантних информација (на пример откривање ботова). Дакле, одлучио сам да главне информације сачувам у табели виситор_девице - ево шеме:

tenant_id: the course creator school the visitor is checkingraw: the raw uatype: desktop / mobile / tablet / bot / otherbrowser_namebrowser_versionplatform_nameplatform_versionhardware: hstore containing memory, processor, device_model, device_nameconnection: hstore containing downlink_max, connection_type

Вероватно сте приметили да неколико ствари тамо није доступно у УА низу. Време је за нове ЈаваСцрипт АПИ-је:

Добијање информација о хардверу помоћу ЈаваСцрипт-а

Као што је описано у видео снимку Цхроме Дев Суммит-а, можемо да користимо ЈС да бисмо добили ове информације.

Меморија

navigator.deviceMemoryвратиће број са покретном зарезом. Овде треба размотрити неке ствари:

  • Ради само преко ХТТПС-а
  • Подршка је прилично ограничена (Цхроме у основи)

Више о томе:

  • Спецификације са В3Ц
  • МДН Документи
  • Могу ли да користим девицеМемори

Процесори

navigator.hardwareConcurrencyвратиће број логичких језгара корисниковог процесора. Подршка за ово је пристојна.

Откривање података о вези помоћу ЈаваСцрипт-а

navigator.connectionје нови АПИ који садржи информације о системској повезаности, као што је тренутна пропусна ширина корисничког уређаја или да ли се веза мери. Подршка је прилично ограничена (Цхроме у основи), али ствари обећавају.

Више о томе:

  • Пример за Цхроме
  • МДН Документи
  • Могу ли да користим АПИ за мрежне информације

Откривање модела уређаја

Кориснички агент може вратити неке информације о имену модела. усерстацк је услуга која вам даје информације на основу корисничког агента. Ради добро и лако га је интегрисати, међутим, они вам не могу помоћи, у зависности од ваших потреба.

Узмимо за пример иДевицес. Њихов кориснички агент је у основи исти, тако да не можете разликовати иПад Про од старог иПад-а који покреће последњи иОС. У тим случајевима ће вам можда требати боља детекција на основу резолуције, густине пиксела и других хардверских информација изложених у прегледачу. Направио сам кратко истраживање о овоме и до сада сам пронашао 3 производа: ВУРФЛ.ио, ДевицеАтлас и 51Дегреес. Још нисам имао времена да испробам њихове производе, али радујем се што ћу то учинити (и објавити о томе)

ФАК

Питање: Зашто овде не бисте користили Гоогле Аналитицс / Микпанел / Кибана / Нев Релиц /?

Информације о прегледачу бисмо могли добити у другим алатима. Али као СааС производ не користимо сопствени производ Гоогле аналитике (купци додају свој). Такође, блокатори огласа могу блокирати ове независне алате. И на крају, али не најмање важно, ако имамо ове информације поред себе, можемо се боље прилагодити.

Питање: Да ли имате списак нижих / високих уређаја?

Не. Можда се ово може направити комбинујући број процесора и меморије, али нисам уложио много времена у ово. У овом пројекту, мој колега је створио помоћник за Раилс који ће одредити да ли ће корисник користити основну или подразумевану верзију веб странице засновану на хардверу. На ову тему је важно напоменути да Фацебоок има библиотеку за Андроид под називом Девице Иеар Цласс.

Такође објављено на мом блогу. Ако вам се свиђа овај садржај, пратите ме на Твиттер-у и ГитХуб-у.

Иначе - Тхинкифиц запошљава на неколико позиција ако сте заинтересовани.