Webブラウザの種類やバージョンを判別するJSライブラリ「bowser」



javascript で ブラウザの種類やバージョンを判別出来るライブラリ「bowser」の紹介です。

 javascriptは Webブラウザの種類やバージョンによって、使おうとしているメソッドが使えたり、使えなかったりします。 例えば、' includes ' メソッドを例に挙げると、IE 10 ( インターネットエクスプローラー バージョン10 ) では利用できません。

// IE 11からは使えます

var str = "Hello world, welcome to the universe.";
// 関数 str に文字列 'world' が含まれているか判別
var n = str.includes("world");
// => true


 上記の様なメソッド単位では対処可能だと思いますが、" アップデートしたライブラリが少し古いブラウザに対応しなくなった " というような事は珍しくはありません。

そのような事を想定して、  " IE 11 以下では この javascriptの処理を実行しない " 、そんな事が簡単に出来る javascript用のライブラリが「bowser」です。

bowser で出来ること

- javascriptでブラウザの種類、バージョンの判別が出来る

import bowser from 'bowser'; // scriptタグで直接bowerを読み込む場合は必要ありません

bowser.name; // ブラウザの種類を取得
// => "Chrome"
boser.version; // ブラウザのバージョン
// =>  "63.0"
bower.osname; // OSの種類
// => macOS

// ...


bowser の導入

 bowserの導入は こちら のGitHubのページから minify(圧縮) されたファイルをダウンロードするか、' npm ' や ' yarn ' などのパッケージマネージャーを通す他、CDNを通してブラウザから 直接読み込むことが出来ます。

# npm
npm i bowser --save
# yarn
yarn add bowser
# cdn * ブラウザ上でスクリプトタグから読み込み
https://unpkg.com/bowser@1.9.0/src/bowser.js


bowser の基本的な使い方

 bowser はユーザーエージェントをベースに判別する機能が備わっているだけなので、ライブラリ本体さえ読み込めば、簡単に使用することが出来ます。

bowser を読み込んで ' name ' オブジェクトを呼び出せば ' 使っているブラウザ名 ' が返ってきます。

// ブラウザ名を返す
boswer.name;
/* =>
exp : Chrome, Safari, Microsoft Edge , Internet Explorer ,Firefox
...
*/


' version ' オブジェクトを呼び出すと、使っているブラウザの ' バージョン ' が返ってきます

// ブラウザのバージョンを返す
bowser.version;
// => "63.0"

 

ブラウザフラグ 

 bowser は、判別に使うオブジェクトをフラグとしてカテゴライズしており、" bowser.判別する対象 " のように 対象を指定するだけで、ブラウザの種類、 OS、レンダリングエンジンを簡単に判別できます。

 例えば、IE を判別する時は下のスニペットのように指定すれば、 " IE からアクセスした場合は true  " そうでない場合は " undefined " を返します。

bowser.msie; // IEであれば true を返す


用意されているブラウザ用のフラグ
- chrome
- chromium
- firefox
- msie : インターネットエクスプローラー ( Windows )
- msedge : マイクロソフト エッジブラウザ ( Windows )
- safari
- android : androidに搭載されているネイティブブラウザ
- ios : iosに搭載されているネイティブブラウザ
- opera
- samsungBrowser
- phantom
- blackberry
- webos
- silk : Amazon Kindleに搭載されているブラウザ
- bada
- tizen
- seamonkey
- sailfish
- ucbrowser
- qupzilla
- vivaldi
- sleipnir
- kMeleon 

レンダリングエンジン用のフラグ
- webkit : クローム 27以下, Android 4.4以下, iOS
- blink : クローム28以上, Android 4.4以上, Opera
- gecko : Firefox
- msie : IE11以下
- msedge : IE11以上

デバイス用フラグ
- mobile
- tablet

OS用のフラグ
- mac
- windows : windowsphoneも含まれます
- windowsphone
- linux : android, chromeos も含まれます
- chromeos
- android
- ios : iphone/ipad/ipod も含まれます
- blackberry
- firefoxos
- webos
- bada
- tizen
- sailfish


ミニマルバージョンを指定 

アクセス元のブラウザのバージョンが、 " IE10以上? " そういう事を判別したい時に使う便利なメソッドが、 ' check ' メソッド です。

 checkメソッドの引数に判定したいミニマルバージョンのフラグをオブジェクトで指定することで、真偽判定をします。

// アクセス元がIE 10の場 * chromeやSafariなどでもtrueを返す
bowser.check({msie: "10"});  // true
// アクセス元がIE8の場合
bowser.check({msie: "10"});  // false

// ユーザーエージェントを通すことも可能です
bowser.check({msie: "10"}, window.navigator.userAgent);

// strictモードを使うと、レンダリングエンジンまで判定します
// chromeのバージョン45以下は全てfalseを返す * Edge, Safari, Firefoxなどの他のブラウザも含む
bowser.check({chrome: "45"}, true, window.navigator.userAgent);


/** checkメソッドと組み合わせた自作関数例  **/

function ieCallback(mode, ie, other) {
  return bowser.check(mode) ? ie() : other();
}

ieCallback(
  {msie: "10"},
  function() {
    // IE10 以下の場合に実行
  }
  function() {
    // IE 10以上、他のブラウザでも実行
  });

 

Summary

 以上が bowser の紹介でした。利用者が多い 古めのIEをサポートしているしているような Webサービスで使うと、ユーザビリティーが上げられそうなライブラリです。

GitHub : lancedikson/bowser

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ