web-dev-qa-db-ja.com

サーバー側のブラウザ検出？ node.js

私が見たほとんどの実装は、クライアント側のブラウザ検出用です。クライアントにリソースを送信する前にブラウザーの検出を行うことができるかどうか疑問に思っていました。

ありがとう。

javascriptbrowsernode.jsbrowser-detection
58
fancy
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];

それはあなたのために働くはずです。応答ハンドラーに入れてください。

81
McKayla

a-parser ノードのライブラリ（npm install ua-parser）は、ブラウザのユーザーエージェント文字列の正規表現の大きなセットを公開します。ニーズに合わせて強くお勧めします。

28
Sebastian Motraghi

a-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で取得できるその他の情報を確認するには、 デモページ を確認してください。

13
Donald Gary
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';
4
Nino Paolo

私は自分のサイトのモバイル版への簡単なリダイレクトをしたかったので、ユーザーエージェントは十分に信頼できます。クライアント側で不要なcssとjsをロードする時間を無駄にしないように、サーバー側でやりたいと思いました。 http://detectmobilebrowsers.com/ は、一致する最も堅牢な正規表現を持っていました。そこで、アプリに2行のコードを追加するだけでリダイレクトを実行できるエクスプレスミドルウェアをまとめました。

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
Overflow289

エクスプレスを使用している場合は、次のような方法で簡単にuaを確認できます。

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

このコードを試してください http://detectmobilebrowser.com/

1
tomislav

もう1つあります： https://github.com/koudelka/node-useragent_parser

1
user1113641

最近、数か月前に device-detector-js をリリースしました。

これは、元々PHPで作成された強力なデバイス検出ライブラリであるMatomoデバイス検出器のTypeScriptポートです。

任意のユーザーエージェントを解析し、ブラウザー、オペレーティングシステム、使用しているデバイス（デスクトップ、タブレット、モバイル、テレビ、車、コンソールなど）、ブランド、モデルを検出できます。

厳しくテストされており、6000を超えるテストに依存して数千の異なるデバイスを検出しています。

インストール

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ドキュメント をご覧ください。

1
Etienne Martin

ほとんどのブラウザは、「User-Agent」というHTTPリクエストヘッダーを提供します。これは、クライアント側のnavigator.userAgentプロパティと同じです。

1
Maz

Apache DeviceMap をご覧ください。

すぐに使えるJavaScriptライブラリはクライアント側にありますが、Node.JSまたはAngular=同様の方法で動作します。UA文字列の単純なパターンマッチングとは異なり、DeviceMapにはW3C規格に基づいたDevice Description Repository（DDR）の広範なデバイスとデバイスファミリ。

0
Werner Keil

強力なnpm seragent 。 Useragentを使用すると、ブラウザマッチング用に手動で調整された専用正規表現を使用して、ユーザーエージェント文字列を高精度で解析できます。このデータベースは、すべてのブラウザーベンダーが独自のユーザーエージェントスキーマを実装しているため、すべてのブラウザーが正しく解析されるようにするために必要です。通常のユーザーエージェントパーサーは、おそらく間違ったブラウザー名を解析したり、レンダリングエンジンのバージョンと実際のバージョンのブラウザーを混同したりするため、大きな問題を抱えています。

0
Jomy Joseph

[あなたの検討のための別のバリエーションまたは同化です。]

より汎用性が高く、さらに簡素化されています。

Requestまたは '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/931cc8b613aaa930ef92a4027916e6687d07feac

98％のソリューション。機能タイトルが示すようにタブレットをチェックするかどうかはわかりません。

本当にこの関数のタイトル（およびいくつかの引数）の名前を変更する必要がありますか？... serachObjectForLabelThatMatchesThisRegex

すべてのデフォルトが単一の引数を目的とすることを除いて。

また、関数をキーの値として設定したままにしておきますが、好きなように保存することができます...それを使用する場合は、varまたはconstを指定しないでください。

let mobTabCheck = function() {};
0
Master James

@ 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]);
};
0
EvgenyKolyakov

テンプレート層でモバイルを制御する場合は、そのためのモジュールを作成しました。 https://github.com/Fresheyeball/isMobile-node

0
Fresheyeball