@wetransfer/concorde-browser v1.8.1
concorde-browser
Browser module. Handy functions to retrieve information and capabilities from the browser.
Installation
npm install @wetransfer/concorde-browser --save
Usage
In the browser
Import the package if your are using a package bundler like Webpack or Parcel:
import Browser from '@wetransfer/concorde-browser';
if (Browser.supportsTouchEvents) {
// Do some magic!
}
Or load directly the final bundle on your browser, using a script tag. All concorde.js modules will be available in a global variable called WT
:
<!-- This will load the latest version of @wetransfer/concorde-browser module -->
<script src="https://unpkg.com/@wetransfer/concorde-browser/dist/concorde-browser.min.js"></script>
<script>
if (WT.browser.supportsTouchEvents) {
// Do some magic!
}
</script>
On the server
const Browser = require('@wetransfer/concorde-browser');
let deps;
if (Browser.platform('windows')) {
deps = require('windows/deps');
} else {
deps = require('unix/deps');
}
Methods
Browser.matches
Given a browser and version requirement, determines if the actual environment meets the given criteria, in terms of browser name and version.
// If the actual browser is Chrome 69
// The result of this call will be true
Browser.matches('chrome >= 43');
// The result of this call will be false
Browser.matches('explorer < 6');
Browser.oneOf
Given a list of browsers and version requirements, determines if the actual environment meets the criteria.
// If the actual browser is Chrome 69
// The result of this call will be true
Browser.oneOf([
'explorer >= 9.0',
'chrome >= 43',
'firefox >= 42',
'safari >= 5'
]);
Browser.isOutdated
Given a list of browsers and version requirements, determines if the actual environment does not meet the criteria, aka, it's outdated. Think in that method as the opposite of Browser.oneOf
.
// If the actual browser is Chrome 69
// The result of this call will be false
Browser.isOutdated([
'explorer >= 9.0',
'chrome >= 43',
'firefox >= 42',
'safari >= 5'
]);
Browser.platform
Determines if the provided platform matches the actual platform.
Browser.plaform('mac');
// => true
Browser.plaform('windows');
// => false
Properties
Browser.currentBrowser
Returns an object containing information about the user agent.
Browser.currentBrowser
// => {
// string: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36',
// subString: 'Chrome',
// identity: 'Chrome'
//}
Browser.currentPlatform
Returns an object containing information about the current platform.
Browser.currentPlatform
// => { string: 'MacIntel', subString: 'Mac', identity: 'Mac' }
Browser.currentVersion
Returns the version of the current browser based on its userAgent string, in array format.
// Given a user agent like 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36'
Browser.currentVersion
// => [62, 0, 3202, 94]
Browser.identity
Returns the current platform and browser identity (OS + Browser).
// Given a user agent like 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36'
Browser.identity
// => {
// platform: 'Mac',
// browser: 'Chrome',
// version: '62.0.3202.94'
// }
Browser.supportsTouchEvents
Test if this document supports touch, however... There is much discussion about detecting touch on Modernizr.
Browser.supportsTouchEvents
// => true or false 🤷♂️
Browser.isMobile
Test if this device is mobile, based on its userAgent string.
Browser.isMobile
// => true or false
Browser.isIphone
Test if this device is an iPhone, based on its userAgent string.
Browser.isIphone
// => true or false
Browser.isAndroid
Test if this device is an Android, based on its userAgent string.
Browser.isAndroid
// => true or false
Browser.isTablet
Test if this device is an iPad, based on its userAgent string. The name of the method is quite unfortunate...
Browser.isTablet
// => true or false
Development
In case you want to develop/debug this module while integrating with other project, please follow these steps:
- Run
npm link
to create a global symlink to that module - Run
npm run build:watch
to listen to changes and rebuild the module - Link to this module from your project with
npm link @wetransfer/concorde-browser
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago