Get user device info javascript

A few months ago I watched a great talk from the Chrome Dev Summit about performance in slow devices.

Nội dung chính Show

User agents
Getting hardware info using JavaScript
Detecting connection info using JavaScript
Detecting the device model
How do I find device info?
How can I tell if a device is mobile JavaScript?
How do I get the device information in react JS?
What is UA sniffing?

It blew my mind all the work done by Facebook in identifying devices to create a better user experience. Fast-forward to now, and I've decided to study a bit more about the topic and see what I can do at Thinkific (the company I work for).

User agents

User agents are well-known by developers. We use them to detect bots, redirect users to a specific version of our website or append CSS classes on our page so we can create different experiences.

At Thinkific we already use the browser Ruby gem to parse the user-agent and get relevant info (bot detection for instance). So, I decided to persist the main info in a visitor_device table – here is the schema:

tenant_id: the course creator school the visitor is checking

raw: the raw ua

type: desktop / mobile / tablet / bot / other

browser_name

browser_version

platform_name

platform_version

hardware: hstore containing memory, processor, device_model, device_name

connection: hstore containing downlink_max, connection_type

You probably noticed that a few things there are not available in the UA string. Time for new JavaScript APIs:

Getting hardware info using JavaScript

As covered in the Chrome Dev Summit video, we can use JS to get this info.

Memory

navigator.deviceMemory will return a floating-point number. There are things to consider here:

It only works over HTTPS
Support is quite limited (Chrome only basically)

More about it:

Spec from W3C
MDN Docs
Can I use deviceMemory

Processors

navigator.hardwareConcurrency will return the number of logical cores of the user’s CPU. Support for this is decent.

Detecting connection info using JavaScript

navigator.connection is a new API containing information about the system’s connection, such as the current bandwidth of the user’s device or whether the connection is metered. The support is quite limited (Chrome only basically) but things are promising.

More about it:

Chrome example
MDN Docs
Can I use Network Information API

Detecting the device model

The user agent may return some information about the model name. userstack is a service that gives you information based on the user agent. It works well and it is easy to integrate, however, depending on your needs, they can’t help.

Take for instance iDevices. Their user agent is basically the same so you can’t differentiate an iPad Pro from an old iPad that runs the last iOS. For these cases, you may need a better detection based on resolution, pixel density and other hardware information exposed in the browser. I did some quick research on this and found 3 products so far: WURFL.io, DeviceAtlas and 51Degrees. I haven’t had time to try their products yet, but I am looking forward to doing it (and posting about it)

FAQ

Question: Why not use Google Analytics / Mixpanel / Kibana / New Relic / your tool here?

We could get browser info inside other tools. But as a SaaS product we don’t use our own Google Analytics property (customers add their own). Also, adblockers may block these third-party tools. Last but not least, by having this info in our side we can adapt better.

Question: Do you have a list of low-end/high-end devices?

No. Maybe this can be built combining the number of processors and memory but I didn’t invest much time on this. In this project, my colleague created a Rails helper that would determine if the user would use the lite or default version of a website based on hardware. On this topic, it is important to mention that Facebook has a library for Android called Device Year Class.

Also posted on my blog. If you like this content, follow me on Twitter and GitHub.

By the way - Thinkific is hiring for several positions if you are interested.

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Detecting device and browser versions

The best way to decide which functionality to use is feature detection. If the feature exists then that functionality is allowed to run. Libraries such as Modernizr give you feature detection out of the box or you can write your own.

However there are still certain instances where you need device, browser and version detection:
- targeting adverts to certain platforms/users
- upgrade your browser messages
- probably more examples but can’t think of them right now!

Here is how you can go about browser detection yourself. First we need a list of operating systems and their matching code names within a browser header.

var os = [
    { name: 'Windows Phone', value: 'Windows Phone', version: 'OS' },
    { name: 'Windows', value: 'Win', version: 'NT' },
    { name: 'iPhone', value: 'iPhone', version: 'OS' },
    { name: 'iPad', value: 'iPad', version: 'OS' },
    { name: 'Kindle', value: 'Silk', version: 'Silk' },
    { name: 'Android', value: 'Android', version: 'Android' },
    { name: 'PlayBook', value: 'PlayBook', version: 'OS' },
    { name: 'BlackBerry', value: 'BlackBerry', version: '/' },
    { name: 'Macintosh', value: 'Mac', version: 'OS X' },
    { name: 'Linux', value: 'Linux', version: 'rv' },
    { name: 'Palm', value: 'Palm', version: 'PalmOS' }
]

We also need a list of the browsers we would like to match and their codenames.

var browser = [
    { name: 'Chrome', value: 'Chrome', version: 'Chrome' },
    { name: 'Firefox', value: 'Firefox', version: 'Firefox' },
    { name: 'Safari', value: 'Safari', version: 'Version' },
    { name: 'Internet Explorer', value: 'MSIE', version: 'MSIE' },
    { name: 'Opera', value: 'Opera', version: 'Opera' },
    { name: 'BlackBerry', value: 'CLDC', version: 'CLDC' },
    { name: 'Mozilla', value: 'Mozilla', version: 'Mozilla' }
]

We also need a list of the browser headers we want to check against. These will be joined together as one long string for us to check.

var header = [
    navigator.platform,
    navigator.userAgent,
    navigator.appVersion,
    navigator.vendor,
    window.opera
];

Next is the RegEx helper function which matches a string against the list of items. For our example we will pass in the browser headers as the string, and the os/browsers as the list.

function matchItem(string, data) {
    var i = 0,
        j = 0,
        html = '',
        regex,
        regexv,
        match,
        matches,
        version;        for (i = 0; i < data.length; i += 1) {
        regex = new RegExp(data[i].value, 'i');
        match = regex.test(string);
        if (match) {
            regexv = new RegExp(data[i].version + '[- /:;]([\d._]+)', 'i');
            matches = string.match(regexv);
            version = '';
            if (matches) { if (matches[1]) { matches = matches[1]; } }
            if (matches) {
                matches = matches.split(/[._]+/);
                for (j = 0; j < matches.length; j += 1) {
                    if (j === 0) {
                        version += matches[j] + '.';
                    } else {
                        version += matches[j];
                    }
                }
            } else {
                version = '0';
            }
            return {
                name: data[i].name,
                version: parseFloat(version)
            };
        }
    }
    return { name: 'unknown', version: 0 };
}

To run the code all we need to do is join the headers into a string. Then use the helper function to match the os list and the browser list against each one.

var agent = header.join(' ');
var os = this.matchItem(agent, os);
var browser = this.matchItem(agent, browser);

After running this output I get the following:

One of the useful things about this version numbering is that it allows you to check the version as a number in javascript. e.g.

if (os.name === 'Windows' && os.version > 6) { } // Windows 8
if (browser.name === 'Chrome' && browser.version < 26) { } // Chrome 0.1 - 25.9

https://jsfiddle.net/kmturley/Gd6c8/

How do I find device info?

Navigate to the app > res > layout > activity_main. xml and add the below code to that file. Below is the code for the activity_main. xml file.

How can I tell if a device is mobile JavaScript?

To detect if the user is using a mobile device in JavaScript, we can use the userAgent property. This property is part of the navigator object and sent by the browser in HTTP headers. It contains information about the name, version, and platform of the browser.

How do I get the device information in react JS?

Detect Device & Browser in Javascript.

Using react-device-detect NPM Library. ... .

Using window. ... .

Using react-responsive NPM Library. ... .

Using Navigator. ... .

Using node-device-detector NPM Library. ... .

Using mobile-detect NPM library. ... .

Using express-device NPM library. ... .

Using ua-parser-js NPM Library..

What is UA sniffing?

User-Agent (UA) Sniffing One can derive properties of the client by looking at the User-Agent header in the HTTP request. UA Sniffing usually involves searching for a specific string or pattern in the UA string and basing choices on the result of that search.

Get user device info javascript

User agents

Getting hardware info using JavaScript

Memory

Processors

Detecting connection info using JavaScript

Detecting the device model

FAQ

How do I find device info?

How can I tell if a device is mobile JavaScript?

How do I get the device information in react JS?

What is UA sniffing?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội