尋常でないレベルでブラウザを判定するライブラリ、what-browser-am-iをnpmに公開しました

2020年08月23日日曜日 02:17

クライアントサイド専用の Web ブラウザ判定用ライブラリwhat-browser-am-i を npm に公開しました。

頻繁に偽装される userAgent に惑わされず、可能な限りビルトインオブジェクトを使ってバージョン等を判定するように実装しています。新旧を問わず、広範な DHTML ブラウザでの動作を目標に開発を続けます。

フワッとしたブラウザ判定をしてしまうと、これ以降に書かれるクロスブラウザ用コードもフワッとしてしまって、精神衛生上宜しくありません。この点が改善されるようになってきた、と個人的には感じています。Enjoy!

ブラウザエンジンはおろかブランド名まで判定してUXをアゲアゲする

ブラウザ判定というとブラウザエンジンと OS の判定がまず念頭に浮かびます。EdgeHTML の開発中止や Windows Phone の撤退など、エンジンと OS の多様性は失われていく傾向です。Web 開発者はクロスブラウザ対応から解放されつつある、と考えてよいのでしょうか？

ところで Android や iOS の組み込み WebView をラップした各種ブラウザアプリケーションは独自の変更が加えられています。つまりユーザーに最良の体験を提供したい場合、先の2点に加えてブランド(アプリケーション名)を判定する必要があります。

エンジンと OS は減少傾向ですがブランドとなると際限がなく、長らく二の足を踏んでいました。しかしある時、一年発起してコードを書き始めました。Web 開発の一丁目一番地はブラウザ判定、コードを書いて本当に良かったです。

クロスブラウザに頭を悩ます状況は変わりませんが、ユーザーの多様な選択肢を保証するため知見とコードを積み上げていきましょう。

モバイル用ブラウザには、スクロール操作でアドレスバーの高さが低くなり表示エリアが拡大するギミックを備えるものが多くあります。ややこしいことに変化しないものもあります！この際に取れる表示エリアのサイズが各ブラウザ(ブランド)で異なることに業を煮やしたのでした。

また Facebook, Line などの提供する in App ブラウザを使用中の場合、これを検出してフォローリンクを表示することも考えられますね。

Comparison of web browsers: Web ブラウザを網羅する Wikipedia のページ。Amaya 等の非ダイナミック HTML ブラウザ、w3m 等のテキストブラウザも含まれる。

以降のテーブルは、開発を進めながら加筆・修正して参ります。悪しからず！

PC用ブラウザエンジン
プロパティ	値の例	メモ
Trident	4, 5, 5.5, 6, 7, 8, 9, 10, 11
Tasman	5.2
EdgeHTML	12, 13, 14, 15, 16, 17, 18
Presto	7.2, 7.5, 8, 8.6, 9, 10, 11, 12.1
~~NetscapeNavigator~~	4.06	未実装。
Gecko		Quantum も含む。5以降でGeckoとFirefoxのナンバリングが一致
Goanna		Quantum に切り替わる直前に Gecko から分岐したエンジン。
FennecPC		Mobile 用 Gecko の開発中にリリースされたPC向けのベータ版。
KHTML
WebKit		Webkit2 を含む
Chromium		Blink も含む。
~~QtWebKit~~
~~QtWebEngine~~		Chromium がベース。Chromium と判定。
iCab		iCab 3.x までが独自エンジン。以降は WebKit。

スマートデバイスとゲーム用のブラウザエンジン
プロパティ	値の例	メモ
TridentMobile	4, 5, 6, 7, 9, 10, 11
~~TridentPocket~~	4	未実装。W-ZERO3 等に搭載された `XMLHttpRequset` が追加されて、css-p がサポートが無効の IE4。
EdgeMobile	12
PrestoMobile	12.1
NetFront	3.4, 4. 4.2
SafariMobile		iOSの標準ブラウザ
iOSWebView		iOS用の WebView をラップしたブラウザや in App ブラウザのエンジン。Safari Mobile から一部に機能制限がある。
AOSP	1.5, 2, 2.1, 2.2, 2.3, 3, 4, 4.1, 4.2, 4.3, 4.4	AOSP stock browser。Android OS のバージョンと一致。
ChromiumMobile		Blink も含む。
ChromeWebView	4.4, 以降は Chromium のバージョン	Chrome ベースの AOSP の後継 WebView。Android 5 移行で、OS のアップデートと分離した。
Fennec		Mobile 用 Gecko。Quantum も含む。
Samsung	0.9, 1, 1.5, 1.6, 2...	『サムスンによる魔改造Webブラウザ、Samsung Internet の判定』
Sony		『ITmedia NEWS > PS3のWebブラウザ、独自エンジンだからできること』

サーバサイドレンダリングエンジン
プロパティ	値の例	メモ
OperaMini
UCWEB		User-Agent and X-UCBrowser-UA Specification of UC Browser

インドネシアの特殊なブラウザ事情(Opera Mini,UC Browser Mini): UserAgent を用いた判定と、Web アプリのサーバサイドレンダリングブラウザ対応について。
シェアの少ないJS殺しブラウザ対応の話: Web アプリのサーバサイドレンダリングブラウザ対応について。

NetFront などエンジンと同名がブランドになるケースもある。

エンジン開発社提供のブラウザブランド
プロパティ	値の例	メモ
NetFront		NetFront エンジン。
Safari		WebKit, SafariMobile エンジン。
Chrome		Chromium, ChromiumMobile
Edge		EdgeHTML, EdgeMobile, Chromium(Windows, MacOS X), ChromeWebView(Android, iOS)
IE		Trident エンジン。
IEHost		Trident エンジン。IE8 以上でシュミレータを使用した場合。
ModernIE		Windows 8.x のモダンUI用ブラウザ。Live タイルが使用できる。アドレスバーの挙動がモバイルブラウザと同じ。
MacIE		Trident, Tasman エンジン。
Opera		Presto, PrestoMobile, Chromium, ChromeWebView エンジン。
Silk		ChromeWebView エンジン。
Firefox		Gecko, Fennec, FennecPC
Focus		Klar 含む。但し FireTV 版は ChromiumMobile。
Klar		Fennec エンジン。
PaleMoon		Goanna エンジン。
Samsung		Samsung エンジン。
Konqueror		KHTML, Webkit エンジン。
iCab		iCab, Webkit エンジン。
unknown

In app ブラウザ
プロパティ	値の例	メモ
LINE
Facebook

2022年11月02日水曜日 12:23, 編集