服務器端瀏覽器檢測？ node.js

Question

我見過的大多數實現都是用於客戶端的瀏覽器檢測。 我只是想知道是否可以在向客戶端發送任何資源之前進行瀏覽器檢測。

謝謝。

Answer 1

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];

那應該對你有用。 只需將其放入您的響應處理程序中即可。

Answer 2

用於節點的ua-parser庫 ( npm install ua-parser ) 為瀏覽器用戶代理字符串公開了大量的正則表達式。 我強烈推薦它以滿足您的需求。

Answer 3

我使用ua-parser-js把它放在一起。 我敢肯定它可以改進，但它的功能。

安裝 package：

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 可以獲得哪些其他信息，請查看他們的演示頁面。

Answer 4

我想做一個簡單的重定向到我的網站的移動版本，所以用戶代理足夠可靠。 我想在服務器端做，所以我沒有浪費時間在客戶端加載不必要的 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

Answer 5

幾個月前我發布了device-detector-js 。

它是 Matomo 設備檢測器的 TypeScript 端口，一個強大的設備檢測庫，最初用 PHP 編寫。

它可以解析任何用戶代理並檢測瀏覽器、操作系統、使用的設備（台式機、平板電腦、手機、電視、汽車、控制台等）、品牌和 model。

安裝

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 文檔。

Answer 6

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';

Answer 7

如果您使用 express，您可以通過以下方式輕松檢查 ua：

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

Answer 8

大多數瀏覽器都提供了一個名為“User-Agent”的 HTTP 請求 header 這與客戶端的 navigator.userAgent 屬性相同。

Answer 9

試試這個代碼http://detectmobilebrowser.com/

Answer 10

我對@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]);
};

Answer 11

強大的npm 用戶代理。 Useragent 允許您通過使用手動調整的專用正則表達式進行瀏覽器匹配來高精度地解析用戶代理字符串。 需要這個數據庫來確保每個瀏覽器都被正確解析，因為每個瀏覽器供應商都實現了它自己的用戶代理模式。 這就是為什么常規用戶代理解析器存在重大問題的原因，因為它們很可能會解析出錯誤的瀏覽器名稱或將渲染引擎版本與瀏覽器的實際版本混淆。

Answer 12

我有一個類似的要求，我遇到了這個名為detect-browser 的節點 package 。

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 && browser.name) {
  case 'chrome':
  case 'firefox':
    console.log('supported');
    break;

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

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

Answer 13

這是另一個： https://github.com/koudelka/node-useragent_parser

Answer 14

如果你想在模板層控制移動，我只是為此寫了一個模塊。 https://github.com/Fresheyeball/isMobile-node

Answer 15

您可能想看看Apache DeviceMap 。

開箱即用的 JavaScript 庫現在更多地位於客戶端，但很多都將以類似的方式在 Node.JS 或 Angular 上工作。 與 UA 字符串的簡單模式匹配不同，DeviceMap 在其基於 W3C 標准的設備描述存儲庫 (DDR) 中提供了大量設備和設備系列。

Answer 16

[這是另一種變體或同化供您考慮。]

它更加通用並進一步簡化。

您可以傳遞請求或任何具有“標頭”屬性的 object，也可以是標頭屬性，您可以選擇任何 label 來搜索 object 或實際用戶字符串本身的參數。

它使用了之前發布的 Mobile and Table Checking Regex，並簡單地返回了該結果，但是通過首先聖化輸入，人們可以插入各種東西。

您甚至可以覆蓋默認的正則表達式，可選擇作為參數傳遞。 {我會將進一步的擴展留給啟發。}如果在 scope 等中，也可以有另一種方法從請求中默認為全局存儲的用戶代理。

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/931cc8b613aaa930ef92a4027916e6687d07feac

98% 的解決方案。 我不知道它是否像我的 function 標題所暗示的那樣檢查平板電腦。

這個 function （和一些參數）的標題真的應該重命名嗎？... serachObjectForLabelThatMatchesThisRegex

除了所有的默認值使它成為一個單一的參數目的的東西。

此外，我將 function 設置為鍵的值，您可以存儲它但是您喜歡...只是 promise 我沒有 var 或 const 如果您使用它。

let mobTabCheck = function() {};