platform-detect

platform-detect

🃏 Minimalistic isomorphic library for detection of platform, runtime, APIs and more.

Check out the demo

• No dependencies
• Small size ~5kB
• Split into multiple files "import just what you need"
• ... but also available as a bundle of all detectors.

Detects

• Systems: Windows, Android, macOS, iOS, Linux
• Runtime
  • general: Node.js, browser, web worker
  • specific: website, PWA, Electron, NW.JS, console app, UWP (Windows Store)
• Context: has rendererer (i.e. has window); is console script (Node, web worker, NW background script, Electron main script); running on SDK build, with DEV context, Dev Tools open or debugger attached.
• Form factor: phone, tablet, desktop, tv
• Screen: touchscreen, input type (touch, mouse), tablet mode (whether keyboard is attached/detached on 2-in-1 like Surface Pro)

Installation

npm install platform-detect

ur use CDN like unpkg.com/platform-detect (comes with)

<script src="https://unpkg.com/platform-detect"></script>

Usage

Import everything

import platform from 'platform-detect'
// The script has no GUI to render content to.
// It only runs in console / terminal. (Might be a Node script or WebWorker)
platform.terminal
// App has a window, access to DOM. Can render GUI.
platform.gui

var platform = require('platform-detect')
// Fully functional Node & core modules are available. (Might be an Electron / NWJS app or a good old Node console script)
platform.node
// App has been loaded as a plain website in a browser.
platform.website
// App is served from the web (could be website or PWA)
platform.web
// App is packaged, compiled or bundled and not served from the web. Could be UWP, Electron, NW.JS, Chrome App, Cordova, etc...
platform.packaged
// Script is executed inside Web Worker.
platform.worker

Or import just what you need

import {windows, android, linux, macos, tizen} from 'platform-detect/os.mjs'
import {chrome, edge, safari} from 'platform-detect/browser.mjs'
import {input, mouse, touch, formfactor} from 'platform-detect/formfactor.mjs'

if (formfactor === 'tv' && tizen) {
  console.log(`I'm a Samsung Smart TV!`)
}

if (windows && edge && (uwp || pwa)) {
  console.log(`I should use Fluent Design System`)
} else if (android || chromeos) {
  console.log(`I should use Material Design Language`)
}

if (touch) {
  console.log(`I'm a device with touchscreen`)
  if (mouse) {
    console.log(`But I also have a mouse (it's the primary input type now)`)
    console.log(`I'm a laptop with touchscreen or a Surface Pro with attached keyboard`)
  } else {
    console.log(`Mouse is currently not the primary input type`)
    console.log(`I might be phone, tablet, or Surface Pro in tablet mode`)
  }
}

You can choose between the old UMD module.

<script src="./node_modules/platform-detect/index.js"></script>
<script>
var platform = window['platform-detect']
console.log('pixel ratio of this device is', platform.pixelRatio)
</script>

Or the new ES Modules.

<script type="module">
import platform from './node_modules/platform-detect/index.mjs'
console.log(platform.pwa ? `I'm installed PWA app` : `I'm just a website`)
platform.on('orientation', orientation => console.log(orientation))
</script>

Usage in older browsers

Be advised: The library uses various ES6 and newer features. The syntax is compiled down to ES5 using babel. But you need to polyfill the built-in methods in case you target browsers that don't implement them.

Namely String.prototype.includes and Array.from.

For example:

if (!String.prototype.includes) {
	String.prototype.includes = function(item) {
		return this.indexOf(item) !== -1
	}
}
if (!Array.from) {
	Array.from = function(nodelist) {
		return Array.prototype.slice.call(nodelist)
	}
}

API

Check out the demo for full table of APIs

By importing the index.js bundle you get all of the below. Or you can pick only certain file with the checks you need.

• terminal bool
  Script running in console or terminal (Node, Worker)
• gui bool
  App has a window & access to DOM. Can render GUI

runtime.mjs

• node bool
  True when Node.js & core modules are available. (Node, Electron, NWJS app)
• pwa bool
  App has been loaded as a PWA with separate window. Not just a plain website.
• web bool
  App is served from the web (could be website or PWA)
• website bool
  App has been loaded as a plain website in a browser (and is not PWA)
• packaged bool
  App is packaged, compiled or bundled and not served from the web (UWP, Electron, NW.JS, Chrome App, Cordova, etc...)
• worker bool
  Script is executed inside Web Worker
• nwjs bool
• electron bool
• cordova bool
• uwp bool

formfactor.mjs

• orientation string, event
  values: portrait or landscape
• portrait bool, event
• landscape bool, event
• formfactor string, event
  values: phone, tablet, desktop or tv
• pixelRatio float
  number of the scale of how many physical pixels are used to render one logical pixel.
• input string, event
  values: mouse or touch
  Current primary input type. It's watched and may change when keyboard attached/detached on hybrid devices.
• touch bool
  Always true if the device has a touchscreen, regardless of current primary input type, tablet mode, etc...
• mouse bool, event
  True when primary input type is mouse (desktops, laptops, hybrid with attached keyboards)
• gamepad bool

browser.mjs

Browsers:

• edge bool (all of them, legacy, the new chromium, all the webkit/blink mobile verions)
• chrome bool
• firefox bool
• opera bool
• samsungBrowser bool
• safari bool
• ie bool
• Also: edgeAndroid, edgeIos, chromeIos, firefoxIos (these are in fact blink or webkit)

Rendering engines:

• edgeHtml bool (the old one)
• edgeChromium bool (the new one)
• blink bool (chrome and all Android browswers)
• webkit bool (safari and all iOs browswers)
• gecko bool
• trident bool

os.mjs

• android bool
• chromeos bool
• tizen bool
• ios bool
• linuxBased bool
• windows bool
• macos bool
• linux bool

Events

Some aspects can change during app's life. You can listen to these changes with EventEmitter-like api.

platform.on('orientation', orientation => console.log('orientation changed': orientation))

platform.on('input', input => {
  if (input === 'mouse')
    console.log('keyboard attached')
  else
    console.log('tablet mode')
})

TO-DOs & Ideas for the future

• fix dev mode detection
• battery (platform.hasBattery)
• battery saver mode (there's hardly any battery api, let alone battery saver in it)