服务器端浏览器检测?节点.js
我见过的大多数实现都是用于客户端的浏览器检测。我只是想知道在向客户端发送任何资源之前是否可以进行浏览器检测。
谢谢。
Most implementations i've seen are for browser detection on the client side. I was just wondering if it was possible to do browser detection before sending any resources to the client.
Thanks.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
发布评论
评论(17)
我使用 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 获得哪些其他信息,请查看他们的 演示页面。
我想对我的网站的移动版本进行简单的重定向,因此用户代理足够可靠。我想在服务器端执行此操作,这样我就不会浪费时间在客户端加载不必要的 css 和 js。 http://detectmobilebrowsers.com/ 具有最强大的正则表达式来匹配。因此,我整合了一些快速中间件,让您只需向应用程序添加两行代码即可完成重定向。
npm install detectormobilebrowsers
进行安装
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 的 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 文档。
我对 @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]);
};
我有类似的要求,并且遇到了这个名为 detect-browser 的节点包。
const { detect } = require('detect-browser');
const browser = detect();
if (browser) {
console.log(browser.name);
console.log(browser.version);
console.log(browser.os);
}
或者,如果您想根据特定浏览器执行任何操作,您也可以使用如下所示的 switch case
const { detect } = require('detect-browser');
const browser = detect();
// handle the case where we don't detect the browser
switch (browser && 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 在其基于 W3C 标准的设备描述存储库 (DDR) 中提供了大量设备和设备系列。
[这是另一种变体或同化供您考虑。]
它更加通用且进一步简化。
您可以传递请求或任何具有“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 && 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/931cc8b613aaa930ef92a4027916 e6687d07feac
98%解决方案。我不知道它是否像我的函数标题所暗示的那样检查平板电脑。
这个函数的标题(和一些参数)真的应该重命名吗?... serachObjectForLabelThatMatchesThisRegex
除了所有默认值使它成为一个单一参数目的的东西。
另外,我将函数集保留为键的值,您可以按照自己喜欢的方式存储它......如果您使用它,请向我保证没有 var 或 const 。
let mobTabCheck = function() {};
用于设备、浏览器、操作系统的服务器检测。我推荐 https://www.npmjs.com/package/node-device-detector< /a>
支持客户端提示。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
那应该对你有用。只需将其放入您的响应处理程序中即可。
That should work for you. Just put it in your response handler.