détection de navigateur côté serveur? node.js
La plupart des mises en œuvre que j'ai vues sont destinées à la détection du navigateur côté client. Je me demandais simplement s'il était possible d'effectuer une détection de navigateur avant d'envoyer des ressources au client.
Merci.
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];
Cela devrait fonctionner pour vous. Il suffit de le mettre dans votre gestionnaire de réponse.
La bibliothèque ua-parser pour le noeud (npm install ua-parser) expose un grand ensemble de regex pour les chaînes d’agent utilisateur du navigateur. Je le recommande fortement pour vos besoins.
J'ai jeté cela ensemble en utilisant ua-parser-js . Je suis sûr que cela peut être amélioré mais c'est fonctionnel.
Installez le paquet:
Sudo npm install ua-parser-js
UAParser nécessite dans votre fichier de routes:
var UAParser = require('ua-parser-js');
Faites des trucs avec:
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();
}
et dans votre itinéraire, appelez simplement:
app.all(/^(?!(\/update)).*$/, ensureLatestBrowser);
Si vous voulez voir quelles autres informations vous pouvez obtenir avec UAParser, consultez leur page de démonstration.
Je voulais faire une simple redirection vers une version mobile de mon site, afin que user-agent soit suffisamment fiable. Je voulais le faire côté serveur afin de ne pas perdre de temps à charger des fichiers css et js inutiles sur le client. http://detectmobilebrowsers.com/ avait le regex le plus robuste qui soit. J'ai donc mis en place un middleware express qui vous permettra d'effectuer la redirection en ajoutant simplement deux lignes de code à votre application.
npm install detectmobilebrowsers à installer
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
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';
si vous utilisez Express, vous pouvez facilement vérifier les paramètres suivants:
app.get('/ua', function(req, res){
res.send('user ' + req.headers['user-agent']);
});
Essayez ce code http://detectmobilebrowser.com/
En voici un autre: https://github.com/koudelka/node-useragent_parser
J'ai récemment publié (device-détecteur-js } il y a quelques mois.
Il s'agit d'un port TypeScript de Matomo Device-Detector, une bibliothèque de détection de périphérique puissante écrite à l'origine en PHP.
Il peut analyser n'importe quel agent d'utilisateur et détecter le navigateur, le système d'exploitation, le périphérique utilisé (ordinateur de bureau, tablette, mobile, télévision, voiture, console, etc.), la marque et le modèle.
Il a fait l'objet de nombreux tests et s'appuie sur plus de 6000 tests pour détecter des milliers de périphériques différents.
Installation
npm install device-detector-js
Exemple - Détection simple d'agent utilisateur:
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);
Jetez un coup d'œil à la documentation complète de l'API .
La plupart des navigateurs fournissent un en-tête de requête HTTP appelé "User-Agent". Identique à la propriété navigator.userAgent côté client.
Vous voudrez peut-être jeter un œil sur Apache DeviceMap .
Les bibliothèques JavaScript prêtes à l'emploi sont davantage du côté client, mais beaucoup fonctionneront de la même manière sur Node.JS ou Angular. Contrairement à la mise en correspondance de modèles simple des chaînes UA, DeviceMap est livré avec une vaste gamme de périphériques et de familles de périphériques dans son DDR (Device Description Repository) basé sur les normes W3C.
Npm useragent . Useragent vous permet d'analyser la chaîne de l'agent utilisateur avec une grande précision en utilisant des expressions régulières dédiées et accordées à la main pour la correspondance du navigateur. Cette base de données est nécessaire pour garantir que chaque navigateur est correctement analysé car chaque fournisseur de navigateur implémente son propre schéma d'agent d'utilisateur. C'est pourquoi les analyseurs syntaxiques d'agent utilisateur ont des problèmes majeurs, car ils analyseront probablement un nom de navigateur incorrect ou confondront la version du moteur de rendu avec la version réelle du navigateur.
[Voici une autre variante ou assimilation à considérer.]
Il est plus polyvalent et simplifié davantage.
Vous pouvez transmettre la demande ou tout objet avec une propriété 'en-têtes' ou il peut s'agir de la propriété en-têtes et vous pouvez choisir n'importe quelle étiquette pour rechercher le paramètre sur l'objet, les en-têtes ou la chaîne d'agent d'utilisateur elle-même.
Il a utilisé la version précédemment publiée de Mobile et Table Checking Regex, et renvoie simplement le résultat, mais en sanctifiant d’abord l’entrée, il est possible de brancher diverses choses.
Vous pouvez même remplacer la regex par défaut éventuellement passable en tant qu'argument. {Je laisserai cette extension supplémentaire à inspiré.} On pourrait aussi avoir un autre moyen de passer par défaut à l'agent utilisateur stocké globalement à partir de la demande s'il est dans la portée, etc.
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 );
}
Cette regex est venue d'ici ... https://Gist.github.com/dalethedeveloper/1503252/931cc8b613aaa930ef92a4027916e6687d07feac
La solution à 98%. Je ne sais pas s'il vérifie les tablettes comme mon titre de fonction l'implique.
Vraiment, le titre de cette fonction (et certains arguments) devrait être renommé peut-être? ... serachObjectForLabelThatMatchesThisRegex
sauf que toutes les valeurs par défaut en font un argument unique.
De plus, je laisse la fonction définie en tant que valeur de clé, que vous pouvez stocker comme vous le préférez ... promettez-moi simplement pas de var ou const si vous l'utilisez.
let mobTabCheck = function() {};
J'ai amélioré un peu le code de @ duck5auce pour qu'il soit vraiment utile et supporte 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]);
};
Si vous souhaitez contrôler mobile dans la couche de modèles, je viens d'écrire un module pour cela. https://github.com/Fresheyeball/isMobile-node