MikeKovarikplatform-detect
🃏 Minimalistic isomorphic library for detection of platform, runtime, APIs and more.
- 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.
terminalbool
Script running in console or terminal (Node, Worker)guibool
App has a window & access to DOM. Can render GUI
runtime.mjs
nodebool
True when Node.js & core modules are available. (Node, Electron, NWJS app)pwabool
App has been loaded as a PWA with separate window. Not just a plain website.webbool
App is served from the web (could be website or PWA)websitebool
App has been loaded as a plain website in a browser (and is not PWA)packagedbool
App is packaged, compiled or bundled and not served from the web (UWP, Electron, NW.JS, Chrome App, Cordova, etc...)workerbool
Script is executed inside Web Workernwjsboolelectronboolcordovabooluwpbool
formfactor.mjs
orientationstring, event
values:portraitorlandscapeportraitbool, eventlandscapebool, eventformfactorstring, event
values:phone,tablet,desktoportvpixelRatiofloat
number of the scale of how many physical pixels are used to render one logical pixel.inputstring, event
values:mouseortouch
Current primary input type. It's watched and may change when keyboard attached/detached on hybrid devices.touchbool
Alwaystrueif the device has a touchscreen, regardless of current primary input type, tablet mode, etc...mousebool, event
True when primary input type is mouse (desktops, laptops, hybrid with attached keyboards)gamepadbool
browser.mjs
Browsers:
edgebool (all of them, legacy, the new chromium, all the webkit/blink mobile verions)chromeboolfirefoxbooloperaboolsamsungBrowserboolsafaribooliebool- Also:
edgeAndroid,edgeIos,chromeIos,firefoxIos(these are in fact blink or webkit)
Rendering engines:
edgeHtmlbool (the old one)edgeChromiumbool (the new one)blinkbool (chrome and all Android browswers)webkitbool (safari and all iOs browswers)geckobooltridentbool
os.mjs
androidboolchromeosbooltizenbooliosboollinuxBasedboolwindowsboolmacosboollinuxbool
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)