Статьи

Обнаружение устройств для приложений с WURFL.js

Октябрь 17, 2018

Адаптивный веб-дизайн не является новой темой для разработчиков мобильных приложений, многие из нас хорошо разбираются в этом процессе и руководств по передовой практике. Одним из таких передовых методов является отображение элементов страницы различными способами в зависимости от возможностей браузера или устройства пользователя. Для этого разработчики традиционно использовали строки User-Agent Как правило, они говорят только о том, что используемое устройство — это iPhone, Android или настольный компьютер, и никакой другой информации.

Есть много случаев, когда разработчик должен знать больше деталей, чем это, чтобы создать полностью адаптивный дизайн. Вот где WURFL.js (беспроводной универсальный файл ресурсов) может помочь.

Что такое WURFL.js?

WURFL.js — это растущий список множества проприетарных API и файл конфигурации XML, который содержит информацию о возможностях и возможностях устройства для различных мобильных устройств. Это предоставляет разработчикам ценную информацию о типе устройств, которые их клиенты используют для доступа к своему веб-сайту. Он использует ту же мощь обнаружения на стороне сервера, с которой вы, возможно, знакомы (используя языки на стороне сервера), и вам не нужно ничего настраивать.

Цель WURFL.js — дать разработчикам возможность оптимизировать представление контента и обеспечить лучший пользовательский опыт, а также дать разработчикам понимание поведения пользователей и моделей использования. Он пытается сделать это быстро, легко реализуемо и бесплатно.

Как вы используете WURFL.js? Давайте испачкаем руки.

Сначала добавьте эту строку Javascript на свою страницу: 

 <script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

Здесь мы импортировали файл JavaScript, который позволяет нам получить доступ к объекту WURFL в JavaScript. Например: 

 { complete_device_name:"Google Nexus 4", form_factor:"Smartphone", is_mobile:true }

Я настроил пример страницы здесь , чтобы вы могли увидеть WURFL.js в действии. Исходный код можно найти на github здесь .

Обратите внимание, что используются только три свойства:

  • complete_device_name (Однако, если устройство является настольным компьютером, оно даст вам общий ответ «настольный компьютер»).

  • form_factor

  • is_mobile Если это мобильный телефон или планшет, он вернет true.

Эти свойства позволяют вам делать такие вещи, как: 

 if(!WURFL.is_mobile) {

  $('#wurfl .is-mobile span').html("false");

}

реклама

WURFL.js может помочь вам стратегически отображать рекламу. Некоторые объявления выглядят лучше на мобильных устройствах, а другие больше подходят для настольных компьютеров или ноутбуков. WURFL.js может помочь вам контролировать показ рекламы и на каких устройствах. Вы можете управлять рекламой, используя функцию WURFL.is_mobileform_factor

WURFL.js и Модернизр

Хотя то, что предлагает WURFL.js, похоже на то, что может быть достигнуто с помощью Modernizr, они не совпадают. Modernizr предоставляет информацию о возможностях веб-браузера, тогда как WURFL.js дает представление об оборудовании. В некоторых случаях лучше знать марку и модель устройства, чем знать только возможности устройства в браузере, поскольку, хотя браузер может поддерживать определенную функцию, устройство может этого не делать. Это не значит, что вы должны полностью избавиться от Modernizr. Совместное использование WURFL.js и Modernizr даст вам больший контроль над тем, как ваши сайты работают и выглядят на любом устройстве. Хорошим примером являются возможности CSS Modernizr, которые позволяют использовать разные стили в зависимости от устройства. Эта функция также доступна в WURFL.js и требует только одной строки Javascript для работы:

document.documentElement.className += ' ' + (WURFL.is_mobile ? '' : 'no-') + "mobile";

В этом простом примере, когда устройство является мобильным, тегу HTMLis_mobileno-is_mobile Включая это, вы можете создавать разные таблицы стилей в зависимости от назначенного класса.

Вывод

Я знаю, насколько сложно получить информацию о различных устройствах, которые обращаются к вашему приложению, и до этого использовали репозитории описания устройств, для чего требовались серверные библиотеки. Для меня WURFL.js — отличный и простой ресурс, особенно бесплатно.

Это может дать разработчикам контроль над тем, как их контент будет представлен на множестве устройств, лучше ориентироваться на рекламу и лучше анализировать доступ пользователей к своим веб-сайтам. Был ли у вас опыт работы с WURFL?

39
Share: