Ember-browser-checker NPM

ember-browser-checker

Browser detector using browser features, not navigator.userAgent

Compatibility

Ember.js v3.12 or above
Ember CLI v2.13 or above
Node.js v10 or above

Installation

ember install ember-browser-checker

Usage

Check what browser is being used with ease. For example:

Print a special message for safari:

{{#if (is-safari)}}
  I'm on a safari!
{{/if}}

Get the name of the user's browser:

You are on {{browser-name}}.

Inject the browserChecker service and use everywhere else

import { inject as service } from '@ember/service';

...
@service browserChecker;

this.browserChecker.isBlink
this.browserChecker.isChrome
this.browserChecker.isEdge
this.browserChecker.isEdgeChromium
this.browserChecker.isExplorer
this.browserChecker.isFirefox
this.browserChecker.isOpera
this.browserChecker.isSafari

Browsers detected

Browser	Helper	{{browser-name}}	Detects
Blink	`is-blink`	n/a *
Chrome	`is-chrome`	`chrome`	1.0+
Edge	`is-edge`	`edge`	20+
EdgeChromium	`is-edge-chromium`	`edgeChromium`	all
Explorer	`is-explorer`	`explorer`	6-11
Firefox	`is-firefox`	`firefox`	1.0+
Opera	`is-opera`	`opera`	8.0+
Safari	`is-safari`	`safari`	3.0+

* Blink is the rendering engine used by multiple browsers (Chrome, Microsoft Edge (chromium), Opera) so blink is not returned by the helper

Template linting errors

In Ember Octane (v3.15+), non-builtin helpers will generate linting errors for the following rules: no-curly-component-invocation and no-implict-this.

To disable these errors, you need to allow the helpers in the .template-lintrc.js file located in the project root. Example entries for the browser helpers is below:

'use strict';

module.exports = {
  extends: 'octane',
  rules: {
    'no-curly-component-invocation': {
      allow: [
        'browser-name',
        'is-blink',
        ...
      ]
    },
    'no-implicit-this': {
      allow: [
        'browser-name',
        'is-blink',
        ...
      ]
    }
  }
};