logo标签列表

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

javascriptbrowsernode.jsbrowser-detection
76

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

谢谢。

这是2015年。现在是否有更全面的库之类的东西可用？我想要检测moz vs webkit vs ie。我还想检测移动设备 vs 桌面设备 vs 平板电脑。 - Muhammad Umer
可能是 https://www.npmjs.com/package/mobile-detect 或者 https://www.npmjs.com/package/express-device。 - Chaudhry Junaid
你认为我们需要使用这个包吗？https://www.npmjs.com/package/bowser - axel
17个回答
93
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];

这应该适合你。只需将其放入响应处理程序中即可。

6
使用 UA 检测浏览器是不好的习惯，而且不稳定。建议您尽可能将此功能委托给 CSS 的 @media 属性，以便可以为移动设备和非移动设备提供不同的 CSS 样式。 - Raynos
1
@Raynos 如果我们计划提供一个使用不同代码库的移动Web应用程序，怎么办？也许我们应该将这两个代码库合并起来？ - fancy
1
如果用户代理不符合预期的字符串，此脚本将抛出异常。例如，ZXing QRCode阅读器使用“ZXing（Android）”的用户代理字符串，这会导致在/Android ([0-9.]+)[);]/.exec(ua)[1]上出现空指针异常。我已经相应地调整了代码。 - Philip Callender
对于任何寻找设备检测的人，我之前使用过类似这样的东西并且取得了成功：https://www.npmjs.com/package/express-device - newshorts
31

ua-parser 是一个用于 node 的库（npm install ua-parser），它提供了一组用于匹配浏览器 User-Agent 字符串的正则表达式。我强烈推荐你在需要时使用它。

节点实现在哪里？ - Matt Fletcher
1
@MattFletcher 这是你在寻找的吗？https://github.com/ua-parser/uap-ref-impl 我猜自我最初发布这个答案以来已经发生了变化。 - S M
18

我使用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 能获取到哪些其他信息，请查看他们的 演示页面。

1
抱歉我之前的评论。这个库没有问题，相反如果我不设置 X-UA-Compatible 元标签，IE会发送给我“伪造的IE 7 ua”。 - iplus26
5
我希望能够将我的网站重定向到移动版本，所以用户代理足够可靠。我想在服务器端执行此操作，这样我就不会浪费时间在客户端加载不必要的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
5
A few months ago, 我发布了一个名为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);

请查看完整的API文档。

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
如果您正在使用Express，可以轻松地通过以下方式检查ua：

如果您使用的是Express，则可以像下面这样轻松检查ua：

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

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

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]);
};
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接