Detect whether client system is Laptop or Desktop using JavaScript

Question

I want to show the battery status of client's system and a clock in a widget in my webpage If it is a Laptop.
If it is a desktop, I don't want to show the battery status.
The clock widget is working fine.

Also I am able to get the battery details by using navigator.getBattery().
But if it is Desktop, I don't want to show the widget.

So, How to detect whether the client using Desktop or Laptop using JavaScript?

The below is the contents of navigator but it didn't have details to detect whether it is a Laptop or Desktop.

console.log(navigator);

{
  "vendorSub": "",
  "productSub": "20030107",
  "vendor": "Google Inc.",
  "maxTouchPoints": 0,
  "hardwareConcurrency": 4,
  "appCodeName": "Mozilla",
  "appName": "Netscape",
  "appVersion": "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36",
  "platform": "Win32",
  "product": "Gecko",
  "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36",
  "language": "en-GB",
  "languages": [
    "en-US",
    "en"
  ],
  "onLine": true,
  "cookieEnabled": true,
  "doNotTrack": null,
  "geolocation": {
    "getCurrentPosition": function getCurrentPosition() { [native code] },
    "watchPosition": function watchPosition() { [native code] },
    "clearWatch": function clearWatch() { [native code] }
  },
  "mediaDevices": {
    "enumerateDevices": function enumerateDevices() { [native code] },
    "getSupportedConstraints": function getSupportedConstraints() { [native code] },
    "getUserMedia": function getUserMedia() { [native code] },
    "addEventListener": function addEventListener() { [native code] },
    "removeEventListener": function removeEventListener() { [native code] },
    "dispatchEvent": function dispatchEvent() { [native code] }
  },
  "plugins": {
    "0": [object Plugin],
    "1": [object Plugin],
    "2": [object Plugin],
    "3": [object Plugin],
    "4": [object Plugin],
    "length": 5,
    "item": function item() { [native code] },
    "namedItem": function namedItem() { [native code] },
    "refresh": function refresh() { [native code] }
  },
  "mimeTypes": {
    "0": [object MimeType],
    "1": [object MimeType],
    "2": [object MimeType],
    "3": [object MimeType],
    "4": [object MimeType],
    "5": [object MimeType],
    "6": [object MimeType],
    "length": 7,
    "item": function item() { [native code] },
    "namedItem": function namedItem() { [native code] }
  },
  "webkitTemporaryStorage": {
    "queryUsageAndQuota": /**id:16**/ function queryUsageAndQuota() { [native code] },
    "requestQuota": /**id:17**/ function requestQuota() { [native code] }
  },
  "webkitPersistentStorage": {
    "queryUsageAndQuota": /**ref:16**/,
    "requestQuota": /**ref:17**/
  },
  "serviceWorker": /**error accessing property**/,
  "getBattery": function getBattery() { [native code] },
  "sendBeacon": function sendBeacon() { [native code] },
  "requestMediaKeySystemAccess": function requestMediaKeySystemAccess() { [native code] },
  "getGamepads": function getGamepads() { [native code] },
  "webkitGetUserMedia": function webkitGetUserMedia() { [native code] },
  "javaEnabled": function javaEnabled() { [native code] },
  "vibrate": function vibrate() { [native code] },
  "requestMIDIAccess": function requestMIDIAccess() { [native code] },
  "credentials": {
    "get": function get() { [native code] },
    "store": function store() { [native code] },
    "requireUserMediation": function requireUserMediation() { [native code] }
  },
  "storage": {
    "persisted": function persisted() { [native code] },
    "persist": function () { [native code] }
  },
  "permissions": {
    "query": function query() { [native code] }
  },
  "presentation": {
    "defaultRequest": null
  },
  "getUserMedia": function getUserMedia() { [native code] },
  "registerProtocolHandler": function registerProtocolHandler() { [native code] },
  "unregisterProtocolHandler": function unregisterProtocolHandler() { [native code] }
}

You can use [the Battery API](https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API) to get the status, but you can't tell whether the device is a desktop or laptop. — Pointy, Mar 04 '17 at 13:38
There is no way to identify a device as a laptop / desktop machine. — BenM, Mar 04 '17 at 13:39
@Pointy - `From Firefox 52 onwards, the Battery Status API is only available in chrome/privileged code` — Jaromanda X, Mar 04 '17 at 13:41
why would I go to your website to see the time and my battery status, I can see both perfectly well without running my browser — Jaromanda X, Mar 04 '17 at 13:43
I am able to get the battery level in Plain JavaScript. But i want to hide the widget if it is a desktop. — Sagar V, Mar 04 '17 at 13:45
If you try it on a desktop presumably its 0 or undefined? That's your identifier if so — StudioTime, Mar 04 '17 at 13:45
@JaromandaX I am building a Web based OS in javascript running in browser. So, these are widgets — Sagar V, Mar 04 '17 at 13:46
According to some other documentation I've seen, if there's no battery at all then the level is reported as 1 and "charging" as `true`. — Pointy, Mar 04 '17 at 13:46
_If you try it on a desktop presumably its 0 or undefined?_ @DarrenSweeney I tried it on lap only. are you sure about this? — Sagar V, Mar 04 '17 at 13:50
Ok, I just had a quick look on a desktop... it says battery charging: `true`, charging time (`battery.chargingTime`): 0 - these never change regardless of time gone - so that combination would (probably) tell you it's not a laptop? - here's a fiddle https://jsfiddle.net/2943xx9j/ — StudioTime, Mar 04 '17 at 13:52
[wurfl](https://web.wurfl.io/#wurfl-js) could be help you done this. — holi-java, Mar 04 '17 at 13:55
@DarrenSweeney Thanks a lot brother. please consider making an answer for future visitors. — Sagar V, Mar 04 '17 at 13:55
perhaps including `Battery charging time: 0 seconds` and `Battery discharging time: Infinity seconds` is also pretty much a giveaway @DarrenSweeney — Jaromanda X, Mar 04 '17 at 13:56
@JaromandaX yeah, I'd think that too but comment under answer makes me wonder, I haven't got laptop to try unfortunately — StudioTime, Mar 04 '17 at 14:46
Possible duplicate of [How to detect if JavaScript is disabled?](http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled) — monstro, Mar 27 '17 at 01:13
@monstro from the title itself it is clear that this is not what I want. — Sagar V, Mar 27 '17 at 01:42

StudioTime · Accepted Answer · 2017-03-04T14:40:56.063

14

As mentioned in comments - it's possible to get charging status (true/false) battery.charging and charging time (in seconds) battery.chargingTime from the Battery API

On a desktop the charging is always true but charging time is always 0

This allows us to determine it's a desktop

Here's a quick snippet to test if desktop...

navigator.getBattery().then(function(battery) {
    if (battery.charging && battery.chargingTime === 0) {
        console.log("I'm a desktop")
    } else {
        console.log("I'm not a desktop")
    }
});

Note

This is not an exact science. As @MatheusAvellar pointed out. My guess is if you're fully charged although battery.charging may be true, battery.chargingTime may then go to 0 - don't have access to laptop to try

edited Mar 04 '17 at 14:40

answered Mar 04 '17 at 13:58

StudioTime

22,603
38
120
207

2

It's good to point out that his won't _always_ work. I'm on a plugged in laptop with 100% charge, and the code says I'm a desktop. Whatever it is you want to do with this, keep in mind that it won't be always accurate. – Matheus Avellar Mar 04 '17 at 14:32
1

this is not working in IE. navigator.getBattery is undefined. – Ankit Aneja Apr 27 '18 at 11:07
1

Note that this is limited in terms of browser support: https://caniuse.com/?search=battery e.g. no IE, Firefox, or Safari support. There's also a `battery.level` value that may (when it shows a number less than 99) better indicate a laptop... when plugged in my laptop never gets above 99% charged... but a 45% battery would be a dead giveaway that it is a *portable* device. – scunliffe Jul 28 '21 at 21:36
The fact that they made getBattery() a promise simply overcomplicates it?! Or does it have any effect on subordinated events? Bye bye simple if clause... – LuckyLuke Skywalker Aug 18 '22 at 12:55

Detect whether client system is Laptop or Desktop using JavaScript

1 Answers1