š Minimalistic isomorphic library for detection of platform, runtime, APIs and more.
npm install platform-detect
npm install platform-detect
`
ur use CDN like unpkg.com/platform-detect (comes with)
`js
`
Usage
Import everything
`js
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
`
`js
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
`js
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.
`html
`
Or the new ES Modules.
`html
`
$3
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:
`js
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
$3
* 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
$3
* 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
$3
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
$3
* android bool
* chromeos bool
* tizen bool
* ios bool
* linuxBased bool
* windows bool
* macos bool
* linux bool
$3
Some aspects can change during app's life. You can listen to these changes with EventEmitter-like api.
`js
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')
})
``