Forstå Device-detector-JS: Din Guide til Brugeragent-analyse

I den stadigt udviklende verden af webudvikling er det afgørende at forstå, hvordan dine brugere interagerer med dit indhold. En nøglekomponent i denne forståelse ligger i at kunne identificere de enheder, browsere og styresystemer, dine besøgende bruger. Her kommer Device-detector-JS ind i billedet. Denne alsidige og præcise brugeragent-parser er skrevet i TypeScript og er din ultimative løsning til at afkode komplekse brugeragent-strenge.

Hvad er Device-detector-JS?

Device-detector-JS er et sofistikeret JavaScript-bibliotek, der er designet til at analysere brugeragent-strenge. Brugeragent-strengen er en tekststreng, som en browser sender til en webserver for at identificere sig selv. Den indeholder information om browserens navn og version, operativsystemet og nogle gange endda enhedstypen.

Hvad gør Device-detector-JS speciel, er dens evne til at gå ud over basal identifikation. Den kan præcist detektere:

• Browser: Navn, version og motor (f.eks. Chrome, Firefox, Safari, Blink, Gecko).
• Styresystem: Navn, version og platform (f.eks. Windows 10, macOS, Android, iOS).
• Enhed: Type (desktop, tablet, mobil, TV, bil, konsol), mærke (f.eks. Apple, Samsung, Google) og model (hvis tilgængelig).
• Bots: Identificerer også crawlere og bots fra søgemaskiner som Googlebot og BingBot.

Biblioteket er baseret på den største og mest opdaterede open source brugeragent-database, hvilket sikrer enestående nøjagtighed og bred dækning af tusindvis af forskellige enheder og browsere.

Hvordan Fungerer Det?

Kernen i Device-detector-JS' funktionalitet ligger i dets omfattende brug af regulære udtryk (regex). Biblioteket indeholder en enorm database med regex-mønstre, der er omhyggeligt udformet til at matche specifikke dele af brugeragent-strengen.

Når du sender en brugeragent-streng til Device-detector-JS, gennemgår biblioteket følgende proces:

1. Regex Matching: Det itererer gennem sin database af regex-mønstre. Hvert mønster er designet til at identificere en bestemt komponent af brugeragenten, såsom et styresystem, en browser eller en enhedstype.
2. Prioriteret Matching: Biblioteket anvender en prioriteret strategi. Mere specifikke mønstre (f.eks. en bestemt mobilmodel) matches før mere generelle mønstre (f.eks. 'mobil'). Dette sikrer den mest præcise identifikation.
3. Dataekstraktion: Når et mønster matcher, ekstraheres de relevante oplysninger (navn, version, type osv.) fra brugeragent-strengen.
4. Strukturering af Output: De ekstraherede data organiseres i et letforståeligt JSON-objekt, der tydeligt adskiller browser-, OS- og enhedsoplysninger.

Biblioteket er skrevet i TypeScript, hvilket giver fordele som statisk typning og forbedret kodekvalitet. Det er også kraftigt testet med over 10.000 tests, der dækker tusindvis af brugeragent-strenge, herunder dem fra sjældne og obskure browsere og enheder.

Installation og Brug

Det er nemt at integrere Device-detector-JS i dit projekt. Du kan installere det via npm:

npm install device-detector-js

Derefter kan du importere og bruge det i din JavaScript- eller TypeScript-kode:

ES2015 Import:

import DeviceDetector from "device-detector-js" ; const deviceDetector = new DeviceDetector ( ) ; const userAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10136) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.81 Safari/537.36" ; const device = deviceDetector . parse ( userAgent ) ; console . log ( device ) ;

TypeScript Import:

import DeviceDetector = require ( "device-detector-js" ) ;

Eksempel på Output:

Når du parser en brugeragent-streng, returnerer biblioteket et JSON-objekt, der ligner dette:

{ "client": { "type": "browser", "name": "Chrome", "version": "69.0", "engine": "Blink", "engineVersion": "" }, "os": { "name": "Mac", "version": "10.13", "platform": "" }, "device": { "type": "desktop", "brand": "Apple", "model": "" }, "bot": null }

Bot Detektion:

Device-detector-JS kan også specifikt detektere bots. Dette gøres ved at importere BotDetector-klassen:

import BotDetector from "device-detector-js/dist/parsers/bot" ; const botDetector = new BotDetector ( ) ; const userAgent = "Mozilla/5.0 (iPhone; CPU iPhone OS 60 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25 (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)" ; const bot = botDetector . parse ( userAgent ) ; if ( bot ) { console . log ( bot ) ; }

Eksempel på Bot Output:

{ "name": "Googlebot", "category": "Search bot", "url": "http://www.google.com/bot.html", "producer": { "name": "Google Inc.", "url": "http://www.google.com" } }

API Dokumentation og Valgmuligheder

Når du opretter en ny instans af DeviceDetector, kan du angive visse optioner:

• skipBotDetection: true: Spring over bot-detektion. Bots vil blive detekteret som almindelige enheder.
• versionTruncation: null: Returner fulde versioner (f.eks. 69.0.3497.81) i stedet for trunkerede versioner (f.eks. 69.0). Standard er 1 (kun mindre versioner). Andre værdier er 0, 2, 3.

For TypeScript-brugere er type-definitioner inkluderet:

import { DeviceDetectorResult, DeviceDetectorOptions } from "device-detector-js" ;

Browser Miljø Overvejelser

Selvom Device-detector-JS kan køre i browseren, frarådes det kraftigt, medmindre du ikke er bekymret for ydeevnen. Biblioteket er ret stort (omkring 432 KB regex-regler og 144 KB JavaScript, ukomprimeret), hvilket kan medføre en dårlig brugeroplevelse for brugere med langsomme internetforbindelser.

Derudover kan der opstå uoverensstemmelser i browser-miljøer, da nogle browsere som Safari endnu ikke fuldt ud understøtter visse regex-syntakser som 'lookbehind'.

Hvad Kan Device-detector-JS Detektere?

Databasen, som Device-detector-JS er baseret på, er utroligt omfattende. Her er et overblik over nogle af de kategorier, den kan identificere:

Operativsystemer:

AIX, Android, AmigaOS, Apple TV, Arch Linux, BackTrack, Bada, BeOS, BlackBerry OS, Chrome OS, Debian, Fedora, Firefox OS, FreeBSD, GNU/Linux, iOS, macOS, Ubuntu, watchOS, Windows, og mange flere.

Browsere:

115 Browser, Avant Browser, Brave, Chrome, Chrome Mobile, Coc Coc, Comodo Dragon, Dolphin, DuckDuckGo Privacy Browser, Ecosia, Epic, Falkon, Firefox, Firefox Focus, Google Chrome, Headless Chrome, Internet Explorer, Iron, Internet Explorer Mobile, Maxthon, Microsoft Edge, Opera, Opera Mini, Opera Mobile, Pale Moon, Puffin, QQ Browser, QupZilla, Realme Browser, RockMelt, Safari, Samsung Browser, Seewo Browser, Sleipnir, Slimjet, Sogou Explorer, SRWare Iron, START Internet Browser, UC Browser, UR Browser, Vivaldi, vivo Browser, Waterfox, Whale Browser, Yandex Browser, og tusindvis af andre.

Browser Engines:

WebKit, Blink, Trident, Gecko, KHTML, Presto, Text-based, Goanna, Servo.

Biblioteker:

curl, Faraday, Google HTTP Java Client, Guzzle, HTTPie, Java, Mechanize, Node Fetch, OkHttp, Postman Desktop, Python Requests, Python urllib, Wget, og mange flere.

Medieafspillere:

Audacious, Clementine, Deezer, iTunes, Kodi, MediaMonkey, Miro, mpv, NexPlayer, QuickTime, VLC, Winamp, Windows Media Player, XBMC.

Mobile Apps:

AndroidDownloadManager, AntennaPod, Baidu Box App, BingWebApp, Castro, CrosswalkApp, DingTalk, DoggCatcher, Facebook, Facebook Messenger, Flipboard App, Google Go, Google Play Newsstand, Google Search App, HeyTapBrowser, Instagram App, Instacast, Keeper Password Manager, Kik, Line, LinkedIn, Overcast, Pinterest, Pocket Casts, Podcast Republic, Podcasts, Roblox, Snapchat, SogouSearch App, tieba, TopBuzz, Twitter, UC Browser, UnityPlayer, Viber, WeChat, WhatsApp, Yahoo! Japan, YouTube.

PIMs (Personal Information Managers):

Airmail, Barca, DAVdroid, Lotus Notes, Microsoft Outlook, Postbox, SeaMonkey, Thunderbird.

Feed Readers:

Akregator, Apple PubSub, Downcast, FeedDemon, Feeddler RSS Reader, gPodder, Liferea, NetNewsWire, Newsbeuter, NewsBlur, PritTorrent, Pulp, QuiteRSS, ReadKit, Reeder, RSS Bandit, RSS Junkie, RSSOwl.

Brands med Detekterede Enheder:

Apple, Samsung, Google, Huawei, Xiaomi, LG, Sony, HTC, Lenovo, Asus, Microsoft, Nokia, Motorola, OnePlus, OPPO, Realme, Vivo, ZTE, og hundredvis af andre mobilproducenter og enhedsmærker.

Bots:

360Spider, Aboundexbot, Acoon, Ahrefs Bot, Alexa Crawler, Amazon Route53 Health Check, Amorank Spider, ApacheBench, Applebot, Arachni, archive.org bot, Ask Jeeves, Awario, Baidu Spider, BingBot, Blekkobot, BLEXBot Crawler, BUbiNG, BuiltWith, Bytespider, ccBot crawler, Cliqzbot, Cloudflare Diagnostics, Collectd, ContentKing, CSS Certificate Spider, Datadog Agent, Daum, DotBot, DuckDuckGo Bot, Easou Spider, eCairn-Grabber, EmailWolf, Embedly, ExaBot, ExactSeek Crawler, Ezooms, eZ Publish Link Validator, Facebook External Hit, Feedbin, FeedBurner, Feedly, Feedspot, Findxbot, Flipboard, Generic Bot, Genieo Web filter, Gigablast, Gigabot, Gluten Free Crawler, Gmail Image Proxy, Goo, Googlebot, Google Favicon, Google PageSpeed Insights, Google Partner Monitoring, Google Search Console, Grammarly, Grapeshot, GTmetrix, Heritrix, HubSpot, ICC-Crawler, ichiro, IDG/IT, IIS Site Analysis, Inktomi Slurp, inoreader, IP-Guide Crawler, IPS Agent, Kaspersky, Kouio, Larbin web crawler, LCC, Let's Encrypt Validation, Lighthouse, Linkdex Bot, LinkedIn Bot, LTX71, Lycos, Magpie-Crawler, MagpieRSS, Mail.Ru Bot, masscan, Mastodon Bot, Meanpath Bot, MetaInspector, MetaJobBot, MicroAdBot, Mixrank Bot, MJ12 Bot, Mnogosearch, MojeekBot, Monitor.Us, Munin, Nagios checkhttp, NalezenCzBot, Netcraft Survey Bot, netEstate, NetLyzer FastProbe, NetResearchServer, Netvibes, NewsBlur, NewsGator, NLCrawler, Nmap, Nutch-based Bot, Nuzzel, oBot, Octopus, Omgili bot, Openindex Spider, OpenWebSpider, Orange Bot, Outbrain, PagePeeker, PaperLiBot, parse.ly, Petal Bot, Phantomas, PHP Server Monitor, Picsearch bot, PingAdmin.Ru, Pingdom Bot, Pinterest, PocketParser, Pompos, PritTorrent, PRTG Network Monitor, QuerySeekerSpider, Quora Link Preview, Qwantify, RamblerMail Image Proxy, Reddit Bot, Riddler, Robozilla, Rogerbot, ROI Hunter, RSSRadio Bot, SafeDNSBot, Scooter, ScoutJet, Scrapy, Screaming Frog SEO Spider, ScreenerBot, Semantic Scholar Bot, Semrush Bot, Sensika Bot, Sentry Bot, Seobility, SEOENGBot, SEOkicks-Robot, Seoscanners.net, Serendeputy Bot, Server Density, Seznam Bot, Seznam Email Proxy, Seznam Zbozi.cz, ShopAlike, Shopify Partner, ShopWiki, SilverReader, SimplePie, SISTRIX Crawler, SISTRIX Optimizer, Site24x7 Website Monitoring, Siteimprove, SiteSucker, Sixy.ch, Skype URI Preview, Slackbot, SMTBot, Snapchat Proxy, Sogou Spider, Soso Spider, Sparkler, Speedy, Spinn3r, Spotify, Sprinklr, Sputnik Bot, sqlmap, SSL Labs, Startpagina Linkchecker, StatusCake, Superfeedr Bot, Survey Bot, Tarmot Gezgin, TelegramBot, The Knowledge AI, theoldreader, TinEye Crawler, Tiny Tiny RSS, TLSProbe, TraceMyFile, Trendiction Bot, TurnitinBot, TweetedTimes Bot, Tweetmeme Bot, Twingly Recon, Twitterbot, UkrNet Mail Proxy, UniversalFeedParser, Uptimebot, Uptime Robot, URLAppendBot, Vagabondo, Velen Public Web Crawler, Vercel Bot, Visual Site Mapper Crawler, VK Share Button, W3C CSS Validator, W3C I18N Checker, W3C Link Checker, W3C Markup Validation Service, W3C MobileOK Checker, W3C Unified Validator, Wappalyzer, WebbCrawler, WebDataStats, Weborama, WebPageTest, WebSitePulse, WebThumbnail, WeSEE:Search, WikiDo, Willow Internet Crawler, WooRank, WordPress, Wotbox, XenForo, YaCy, Yahoo! Cache System, Yahoo! Japan BRW, Yahoo! Link Preview, Yahoo! Slurp, Yahoo Gemini, Yandex Bot, Yeti/Naverbot, Yottaa Site Monitor, Youdao Bot, Yourls, Yunyun Bot, Zao, Ze List, zgrab, Zookabot, ZumBot.

Sammenligning med 'is-mobile'

Det er værd at bemærke, at der findes andre biblioteker, som f.eks. 'is-mobile', der fokuserer specifikt på at detektere, om en bruger er på en mobil enhed. Mens 'is-mobile' er et simpelt og effektivt værktøj til dette specifikke formål, tilbyder Device-detector-JS en langt mere dybdegående analyse af brugerens enhed og softwaremiljø.

Device-detector-JS' styrke ligger i dets evne til at give et detaljeret billede, der inkluderer browser, OS, enhedstype, mærke og model, samt bot-detektion. Hvis dit behov er simpelthen at vide, om en bruger er på en mobiltelefon, er 'is-mobile' måske tilstrækkeligt. Men hvis du har brug for en omfattende profil af dine besøgendes teknologiske landskab, er Device-detector-JS det klare valg.

Bidrag og Licens

Device-detector-JS er et open source-projekt med base i Matomo device-detector. Bidrag er velkomne, og projektet følger en proces for opdatering fra Matomo-biblioteket for at sikre, at databasen forbliver opdateret.

Biblioteket er licenseret under LGPL v3 eller senere, hvilket giver stor frihed til brug og distribution.

Konklusion

Forståelse af dine brugeres teknologiske opsætning er ikke længere en luksus, men en nødvendighed for effektiv webudvikling og -optimering. Device-detector-JS giver dig de værktøjer, du behøver, for at opnå denne indsigt med enestående præcision og detaljerigdom. Fra at identificere den nyeste smartphone til at skelne mellem forskellige søgemaskine-crawlere, er dette bibliotek en uvurderlig ressource i enhver udviklers værktøjskasse.

Hvis du vil læse andre artikler, der ligner Forstå Device-detector-JS: Din Guide til Brugeragent-analyse, kan du besøge kategorien Teknologi.