wykrywanie przeglądarki po stronie serwera? węzeł.js

UA-Parser library for node (npm install ua-parser) wyświetla duży zestaw wyrażeń regularnych dla ciągów użytkowników przeglądarki. Zdecydowanie polecam go dla Twoich potrzeb.

Rzuciłem to razem za pomocą UA-parser-js . Jestem pewien, że można go poprawić, ale jest funkcjonalny.

Zainstaluj pakiet:

sudo npm install ua-parser-js

W Twoim pliku routes require UAParser:

var UAParser = require('ua-parser-js');

Do some stuff with it:

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();
}

A potem w Twojej trasie po prostu zadzwoń:

app.all(/^(?!(\/update)).*$/, ensureLatestBrowser);

Jeśli chcesz zobaczyć, jakie inne informacje możesz uzyskać dzięki UAParser sprawdź ich stronę demo .

Chciałem zrobić proste przekierowanie do mobilnej wersji mojej strony, więc user-agent jest wystarczająco niezawodny. Chciałem to zrobić po stronie serwera, aby nie tracić czasu na ładowanie niepotrzebnych css i js na kliencie. http://detectmobilebrowsers.com / miał najmocniejszy regex do dopasowania. Więc rzuciłem razem jakiś Express middleware, który pozwoli Ci zrobić przekierowanie, po prostu dodając dwie linie kodu do aplikacji.

npm install detectmobilebrowsers Aby zainstalować

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

Kilka miesięcy temu wypuściłem urządzenie-detektor-js.

Może analizować dowolnego agenta użytkownika i wykrywać przeglądarkę, system operacyjny, używane urządzenie (komputer stacjonarny, tablet, telefon komórkowy, telewizor, samochody, konsola itp.), Marka i model.

Instalacja

npm install device-detector-js

Przykład - proste wykrywanie agenta użytkownika:

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

Spójrz na pełna dokumentacja API .

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

Większość przeglądarek udostępnia nagłówek żądania HTTP o nazwie "User-Agent".właściwość userAgent po stronie klienta.

Wypróbuj ten kod http://detectmobilebrowser.com/

Jeśli używasz express, możesz łatwo sprawdzić ua za pomocą czegoś takiego:

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

Oto kolejny: https://github.com/koudelka/node-useragent_parser

Poprawiłem trochę kod @ duck5auce, aby był rzeczywiście przydatny i obsługiwał 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]);
};

Powerfull npm useragent . Useragent pozwala analizować ciąg agenta użytkownika z dużą dokładnością za pomocą ręcznie dostrojonych dedykowanych wyrażeń regularnych do dopasowania przeglądarki. Ta baza danych jest potrzebna, aby zapewnić, że każda przeglądarka jest poprawnie parsowana, ponieważ każdy dostawca przeglądarki implementuje własny schemat agenta użytkownika. To dlatego zwykłe parsery agenta użytkownika mają poważne problemy, ponieważ najprawdopodobniej będą analizować niewłaściwą nazwę przeglądarki lub mylą wersję silnika renderowania z rzeczywistą wersją przeglądarki.

Jeśli chcesz kontrolować mobile w warstwie szablonów, napisałem do tego moduł. https://github.com/Fresheyeball/isMobile-node

Możesz rzucić okiem na Apache DeviceMap .

Biblioteki JavaScript po wyjęciu z pudełka są teraz bardziej po stronie klienta, ale wiele będzie działać na Node.JS lub Angular w podobny sposób. W przeciwieństwie do prostego dopasowania wzorców ciągów UA DeviceMap jest wyposażony w szeroką gamę urządzeń i rodzin urządzeń w repozytorium Device Description repozytorium (DDR) opartym na standardach W3C.

[Oto kolejna odmiana lub asymilacja do rozważenia.]

jest bardziej wszechstronny i uproszczony.

Możesz przekazać żądanie lub dowolny obiekt z właściwością "headers" lub może to być właściwość headers i możesz wybrać dowolną etykietę, aby wyszukać parametr na obiekcie, nagłówkach lub samym łańcuchu agenta użytkownika.

Użył wcześniej opublikowanych Regex Mobile i Table Checking i po prostu zwraca ten wynik, ale najpierw uświęcając wejście, można podłączyć różne rzeczy.

Możesz nawet nadpisać domyślne Wyrażenie regularne opcjonalnie przejrzane jako argument. {Zostawię to dalsze rozszerzenie dla natchnionych.} również można mieć inny sposób na domyślne użycie globalnie przechowywanego user-agenta z żądania, jeśli jest w zakresie itp.

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 );
}

Ten Regex pochodził stąd... https://gist.github.com/dalethedeveloper/1503252/931cc8b613aaa930ef92a4027916e6687d07feac

The 98% Rozwiązanie. Nie wiem, czy sprawdza Tablety, jak sugeruje mój tytuł funkcji.

Naprawdę tytuł tej funkcji (i niektóre argumenty) powinien być może zmienić nazwę?... serachObjectForLabelThatMatchesThisregex

Z tym, że wszystkie wartości domyślne sprawiają, że jest to pojedynczy argument.

Również pozostawiam zestaw funkcji jako wartość klucza, który możesz zapisać, jak wolisz... Obiecaj mi tylko, że nie użyjesz var lub const.

let mobTabCheck = function() {};