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」です。
- javascriptでブラウザの種類、バージョンの判別が出来る
import bowser from 'bowser'; // scriptタグで直接bowerを読み込む場合は必要ありません
bowser.name; // ブラウザの種類を取得
// => "Chrome"
boser.version; // ブラウザのバージョン
// => "63.0"
bower.osname; // OSの種類
// => macOS
// ...
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 を読み込んで ' 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以上、他のブラウザでも実行
});
以上が bowser の紹介でした。利用者が多い 古めのIEをサポートしているしているような Webサービスで使うと、ユーザビリティーが上げられそうなライブラリです。
GitHub : lancedikson/bowser
