@wetransfer/concorde-browser
@wetransfer/concorde-browser
npm i @wetransfer/concorde-browser
Deprecated!
Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
@wetransfer/concorde-browser

@wetransfer/concorde-browser

A sexy pinnacle of engineering that’s nonetheless incredibly inefficient and expensive and goes out of business because it can’t find enough use. It also provides some tools to deal with the browser.

by WeTransfer

1.8.1 (see all)License:MITTypeScript:Not Found
npm i @wetransfer/concorde-browser
Readme

concorde-browser

npm version

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
VersionTagPublished
1.8.1
latest
4yrs ago
1.8.1-alpha.1
canary
4yrs ago
1.5.3
next
5yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate