服务器端浏览器检测? node.js

问题描述 投票:60回答:15

我见过的大多数实现都是在客户端进行浏览器检测。我只是想知道是否有可能在将任何资源发送到客户端之前进行浏览器检测。

谢谢。

javascript browser node.js browser-detection
15个回答
83
投票
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];

这应该为您工作。只需将其放在响应处理程序中即可。



1
投票

我改进了@ 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 && ' ' + $.subactive + ' ' + $[$.subactive]);
};

1
投票

强大的npm useragent。通过使用Useragent,您可以使用手动调整的专用正则表达式进行浏览器匹配,从而以高精度解析用户代理字符串。需要此数据库来确保在每个浏览器供应商实现其自己的用户代理架构时正确解析每个浏览器。这就是为什么常规用户代理解析器存在主要问题的原因,因为它们很可能解析出错误的浏览器名称,或者将渲染引擎版本与浏览器的实际版本混淆。


0
投票

如果您想在模板层中控制移动设备,我只是为此编写了一个模块。https://github.com/Fresheyeball/isMobile-node


0
投票

您可能想看看Apache DeviceMap

现成的JavaScript库现在更多地在客户端上使用,但是很多将以类似的方式在Node.JS或Angular上工作。与UA字符串的简单模式匹配不同,DeviceMap在基于W3C标准的设备描述存储库(DDR)中提供了广泛的设备和设备系列。


0
投票

[这里是供您考虑的另一种变化形式或同化形式。]


29
投票

节点(ua-parser)的npm install ua-parser库公开了浏览器用户代理字符串的大量正则表达式。我强烈推荐您使用它。


14
投票

我使用ua-parser-js将其放在一起。我敢肯定它可以改进,但是可以起作用。

安装软件包:

sudo npm install ua-parser-js

在您的路线文件中需要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' && browserVersion <= 9)
    res.redirect('/update/');
  else if (browserName == 'Firefox' && browserVersion <= 24)
    res.redirect('/update/');
  else if (browserName == 'Chrome' && browserVersion <= 29)
    res.redirect('/update/');
  else if (browserName == 'Canary' && browserVersion <= 32)
    res.redirect('/update/');
  else if (browserName == 'Safari' && browserVersion <= 5)
    res.redirect('/update/');
  else if (browserName == 'Opera' && browserVersion <= 16)
    res.redirect('/update/');
  else
    return next();
}

然后在您的路线中致电:

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

如果您想了解使用UAParser还能获得哪些其他信息,请查看他们的demo page.


5
投票

我想对网站的移动版本进行简单的重定向,因此用户代理足够可靠。我想在服务器端执行此操作,因此我没有浪费时间在客户端上加载不必要的CSS和JS。 http://detectmobilebrowsers.com/具有最可靠的匹配正则表达式。因此,我整理了一些快速的中间件,这些中间件将使您只需向应用程序添加两行代码即可进行重定向。

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

4
投票
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';

2
投票

2
投票

如果您使用快递,您可以使用以下类似的方法轻松检查ua:

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

2
投票

几个月前,我发布了device-detector-js

这是Matomo设备检测器的TypeScript端口,它是最初用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);

看看full API documentation


1
投票

大多数浏览器都提供一个称为“ User-Agent”的HTTP请求标头,这与客户端上的navigator.userAgent属性相同。

© www.soinside.com 2019 - 2024. All rights reserved.