Блог

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

Спасибо.

 var ua = request.headers['user-agent'],
    $ = {};

if (/mobile/i.test(ua))
    $.Mobile = true;

if (/like Mac OS X/.test(ua)) {
    $.iOS = /CPU( iPhone)? OS ([0-9._] ) like Mac OS X/.exec(ua)[2].replace(/_/g, '.');
    $.iPhone = /iPhone/.test(ua);
    $.iPad = /iPad/.test(ua);
}

if (/Android/.test(ua))
    $.Android = /Android ([0-9.] )[);]/.exec(ua)[1];

if (/webOS//.test(ua))
    $.webOS = /webOS/([0-9.] )[);]/.exec(ua)[1];

if (/(Intel|PPC) Mac OS X/.test(ua))
    $.Mac = /(Intel|PPC) Mac OS X ?([0-9._]*)[);]/.exec(ua)[2].replace(/_/g, '.') || true;

if (/Windows NT/.test(ua))
    $.Windows = /Windows NT ([0-9._] )[);]/.exec(ua)[1];
  

Это должно сработать для вас. Просто поместите это в свой обработчик ответа.

Библиотека ua-parser для узла ( npm install ua-parser ) предоставляет большой набор регулярных выражений для строк пользовательского агента браузера. Я бы настоятельно рекомендовал это для ваших нужд.

Я собрал это вместе, используя ua-parser-js. Я уверен, что это можно улучшить, но это функционально.

Установите пакет:

 sudo npm install ua-parser-js
  

В вашем файле routes требуется UAParser:

 var UAParser = require('ua-parser-js');
  

Сделайте с ним что-нибудь:

 function ensureLatestBrowser(req, res, next) {
  var parser = new UAParser();
  var ua = req.headers['user-agent'];
  var browserName = parser.setUA(ua).getBrowser().name;
  var fullBrowserVersion = parser.setUA(ua).getBrowser().version;
  var browserVersion = fullBrowserVersion.split(".",1).toString();
  var browserVersionNumber = Number(browserVersion);

  if (browserName == 'IE' amp;amp; browserVersion <= 9)
    res.redirect('/update/');
  else if (browserName == 'Firefox' amp;amp; browserVersion <= 24)
    res.redirect('/update/');
  else if (browserName == 'Chrome' amp;amp; browserVersion <= 29)
    res.redirect('/update/');
  else if (browserName == 'Canary' amp;amp; browserVersion <= 32)
    res.redirect('/update/');
  else if (browserName == 'Safari' amp;amp; browserVersion <= 5)
    res.redirect('/update/');
  else if (browserName == 'Opera' amp;amp; browserVersion <= 16)
    res.redirect('/update/');
  else
    return next();
}
  

и затем в вашем маршруте просто вызовите:

 app.all(/^(?!(/update)).*$/, ensureLatestBrowser);
  

Если вы хотите узнать, какую другую информацию вы можете получить с помощью UAParser, ознакомьтесь с их демонстрационной страницей.

Я хотел сделать простое перенаправление на мобильную версию моего сайта, чтобы user-agent был достаточно надежным. Я хотел сделать это на стороне сервера, чтобы не тратить время на загрузку ненужных css и js на клиенте. http://detectmobilebrowsers.com / было выбрано самое надежное регулярное выражение. Итак, я собрал некоторое промежуточное программное обеспечение Express, которое позволит вам выполнять перенаправление, просто добавив две строки кода в ваше приложение.

npm install detectmobilebrowsers для установки

 express = require 'express'
mobile  = require 'detectmobilebrowsers'

app = express()
app.configure () ->
  app.use mobile.redirect 'http://m.domain.com'
app.get '/', (req, res) ->
  res.send 'Not on Mobile'
app.listen 3000
  

Я выпустил device-detector-js пару месяцев назад.

Это машинописный порт Matomo device-detector, мощной библиотеки обнаружения устройств, изначально написанной на PHP.

Он может проанализировать любой пользовательский агент и определить браузер, операционную систему, используемое устройство (настольный компьютер, планшет, мобильный, телевизор, автомобили, консоль и т.д.), марку и модель.

Установка

 npm install device-detector-js
  

Пример — простое обнаружение пользовательского агента:

 const DeviceDetector = require("device-detector-js");

const deviceDetector = new DeviceDetector();
const userAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.81 Safari/537.36";
const device = deviceDetector.parse(userAgent);

console.log(device);
  

Взгляните на полную документацию API.

 ua = request.headers['user-agent'];
if( /firefox/i.test(ua) )
  browser = 'firefox';
else if( /chrome/i.test(ua) )
  browser = 'chrome';
else if( /safari/i.test(ua) )
  browser = 'safari';
else if( /msie/i.test(ua) )
  browser = 'msie';
else
  browser = 'unknown';
  

Большинство браузеров предоставляют заголовок HTTP-запроса под названием «User-Agent», который совпадает со свойством navigator.UserAgent на стороне клиента.

Попробуйте этот код http://detectmobilebrowser.com /

если вы используете express, вы можете легко проверить ua с помощью чего-то вроде этого:

 app.get('/ua', function(req, res){
    res.send('user '   req.headers['user-agent']);
});
  

Вот еще один:https://github.com/koudelka/node-useragent_parser

Я немного улучшил код @duck5auce, чтобы он был действительно полезным и поддерживал IE 10-12 (Edge).

 var getDevice = function(ua) {
    var $ = {active: false, subactive: false};

    if (/mobile/i.test(ua)) {
        $.active = 'mobile';
        $.Mobile = true;
    }

    if (/like Mac OS X/.test(ua)) {
        $.active = 'iOS';
        $.iOS = /CPU( iPhone)? OS ([0-9._] ) like Mac OS X/.exec(ua)[2].replace(/_/g, '.');
        if (/like Mac OS X/.test(ua)) {
            $.subactive = 'iPhone';
            $.iPhone = /iPhone/.test(ua);
        }
        if (/like Mac OS X/.test(ua)) {
            $.subactive = 'iPad';
            $.iPad = /iPad/.test(ua);
        }
    }

    if (/Android/.test(ua)) {
        $.active = 'Android';
        $.Android = /Android ([0-9.] )[);]/.exec(ua)[1];
    }

    if (/webOS//.test(ua)) {
        $.active = 'webOS';
        $.webOS = /webOS/([0-9.] )[);]/.exec(ua)[1];
    }

    if (/(Intel|PPC) Mac OS X/.test(ua)) {
        $.active = 'Safari';
        $.Safari = /(Intel|PPC) Mac OS X ?([0-9._]*)[);]/.exec(ua)[2].replace(/_/g, '.') || true;
    }

    if (/Windows NT/.test(ua)) {
        $.active = 'IE';
        $.IE = /Windows NT ([0-9._] )[);]/.exec(ua)[1];
    }
    if (/MSIE/.test(ua)) {
        $.active = 'IE';
        $.IE = /MSIE ([0-9] [.0-9]*)/.exec(ua)[1];
    }
    if (/Trident/.test(ua)) {
        $.active = 'IE';
        $.IE = /Trident/.*rv:([0-9] [.0-9]*)/.exec(ua)[1];
    }
    if (/Edge/d /.test(ua)) {
        $.active = 'IE Edge';
        $.IE = /Edge/(d )/.exec(ua)[1];
    }

    return $.active   ' '   $[$.active]   ($.subactive amp;amp; ' '   $.subactive   ' '   $[$.subactive]);
};
  

Мощный пользовательский агент npm. Useragent позволяет вам анализировать строку пользовательского агента с высокой точностью, используя специально настроенные регулярные выражения для сопоставления с браузером. Эта база данных необходима для обеспечения правильного анализа каждого браузера, поскольку каждый поставщик браузера реализует свою собственную схему пользовательского агента. Вот почему у обычных анализаторов пользовательского агента возникают серьезные проблемы, потому что они, скорее всего, будут анализировать неправильное название браузера или путать версию движка рендеринга с фактической версией браузера.

У меня было аналогичное требование, и я наткнулся на этот пакет узла под названием detect-browser.

 const { detect } = require('detect-browser');
const browser = detect();

if (browser) {
  console.log(browser.name);
  console.log(browser.version);
  console.log(browser.os);
}
  

Или, если вы хотите выполнить какое-либо действие в зависимости от конкретного браузера, вы также можете использовать вариант переключения, как показано ниже

 const { detect } = require('detect-browser');
const browser = detect();

// handle the case where we don't detect the browser
switch (browser amp;amp; browser.name) {
  case 'chrome':
  case 'firefox':
    console.log('supported');
    break;

  case 'edge':
    console.log('kinda ok');
    break;

  default:
    console.log('not supported');
}
  

Если вы хотите управлять мобильными устройствами на уровне шаблонов, я только что написал модуль для этого. https://github.com/Fresheyeball/isMobile-node

Возможно, вы захотите взглянуть на Apache DeviceMap.

Готовые библиотеки JavaScript сейчас больше на стороне клиента, но многое будет работать на Node.JS или Angular аналогичным образом. В отличие от простого сопоставления с шаблоном строк UA, DeviceMap поставляется с широким спектром устройств и семейств устройств в репозитории описания устройств (DDR), основанном на стандартах W3C.

[Вот еще один вариант или усвоение для вашего рассмотрения.]

Он более универсален и еще больше упрощен.

Вы можете передать запрос или любой объект со свойством ‘headers’, или это может быть свойство headers, и вы можете выбрать любую метку для поиска параметра в объекте, заголовках или самой строке пользовательского агента.

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

Вы даже можете переопределить регулярное выражение по умолчанию, необязательно передаваемое в качестве аргумента. {Я оставлю это дальнейшее расширение для вдохновленных.} Также мог бы быть другой способ установить значение по умолчанию для глобально сохраненного пользовательского агента из запроса, если в области видимости и т.д.

 mobTabCheck: function( ua, lbl, rgx ) {  /* mobile tablet check; UserAgent or request, or any object with optional search label  */
    if( ua === und ) return false;
    if( ua !== und amp;amp; ua.constructor !== String ) {
        if( lbl === und ) lbl = 'user-agent';
        if( ua.headers !== und ) ua = ua.headers[ lbl ];
        else ua = ua[ lbl ];
    }
    if( rgx === und ) rgx = /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/;
    if( rgx.constructor === String ) rgx = new RegExp( rgx );
    return rgx.test( ua );
}
  

Это регулярное выражение взято отсюда…
https://gist.github.com/dalethedeveloper/1503252/931cc8b613aaa930ef92a4027916e6687d07feac

Решение на 98%. Я не знаю, проверяет ли он планшеты, как следует из названия моей функции.

Действительно, название этой функции (и некоторые аргументы) должно быть переименовано, возможно?… Serachobjectforlabel, который соответствует этому регулярному выражению

за исключением того, что все значения по умолчанию делают это предназначенным для одного аргумента.

Также я оставляю функцию, установленную в качестве значения ключа, которое вы можете сохранить, как вам больше нравится… просто пообещай мне, что не будет var или const, если ты его используешь.

 let mobTabCheck = function() {};
  

для обнаружения сервером устройства, браузера, операционной системы. Я рекомендую https://www.npmjs.com/package/node-device-detector

существует поддержка clienthints.