[解決済み] Safari、Chrome、IE、Firefox、Operaのブラウザを検出する方法は？

質問

FF、Chrome、IE、Opera、Safariの5つのアドオン/エクステンションを持っています。

ユーザーのブラウザを認識し、対応するアドオンをダウンロードするように（インストールボタンがクリックされたら）リダイレクトするにはどうすればよいですか？

どのように解決するのですか？

ブラウザの信頼性検知でググると、ユーザーエージェント文字列のチェックがよく出てきます。この方法は ではなく というのも、この値を偽装するのは簡単だからです。
でブラウザを検出する方法を書きました。 ダックタイピング .

ブラウザ検出の方法は、拡張機能をインストールするためにブラウザ固有の手順を表示するなど、本当に必要な場合のみ使用してください。 可能な限り、機能検出を使用する。

デモの様子 https://jsfiddle.net/6spj1059/

// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

// Edge (based on chromium) detection
var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;


var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isEdgeChromium: ' + isEdgeChromium + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;

信頼性の分析

は 前方法 は、レンダリングエンジンのプロパティに依存していた ( -moz-box-sizing と -webkit-transform ) を使ってブラウザを検出します。これらの接頭辞はいずれ削除される予定なので、検出をさらに強固にするために、ブラウザ固有の特性に切り替えました。

• インターネットエクスプローラー JScriptの 条件付きコンパイル (IE9まで)と document.documentMode .
• Edge: TridentおよびEdgeブラウザーでは、Microsoftの実装が StyleMedia コンストラクタを使用します。Tridentを除くと、Edgeになります。
• Edge (chromiumベース)。ユーザーエージェントは、最後に "Edg/[version]"という値を含みます（例： "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.16 Safari/537.36) エドッグ/80.0.361.9 "）。
• Firefoxの場合。アドオンをインストールするためのFirefoxのAPI。 InstallTrigger
• クローム グローバルな chrome オブジェクトがあり、ドキュメント化された chrome.webstore オブジェクトを作成します。
• アップデート3 chrome.webstore は最近のバージョンでは非推奨で未定義です。
• サファリです。コンストラクタの命名に独特のパターンがある。これはリストアップされたプロパティの中で最も耐久性の低い方法ですが、どうでしょう？Safari 9.1.3では修正されています。そのため、私たちは SafariRemoteNotification これはバージョン 7.1 以降に導入され、3.0 以降のすべての Safaris をカバーするようになったものです。
• オペラ window.opera は何年も前から存在していましたが は削除されます。 OperaがエンジンをBlink + V8 (Chromiumが使用)に置き換えたとき。
• 更新1: Opera 15がリリースされました そのUA文字列はChromeと似ていますが、"OPR"が加わっています。このバージョンでは chrome オブジェクトが定義されています（ただし chrome.webstore がない）。OperaはChromeのクローンを作ろうと頑張るので、そのためにユーザーエージェントのスニッフィングを使っています。
• 更新2: !!window.opr && opr.addons を検出するために使用することができます。 Opera 20+ (エバーグリーン)です。
• ブリンク CSS.supports() はBlinkで紹介されました GoogleがChrome 28に切り替えた時点で もちろん、Operaで使われているBlinkと同じものです。

でのテストに成功しました。

• Firefox 0.8 - 61
• クローム1.0 - 71
• オペラ8.0 - 34
• サファリ 3.0 - 10
• IE 6 - 11
• エッジ - 20-42
• Edge Dev - 80.0.361.9

2016年11月のアップデートで、9.1.3以降のSafariブラウザの検出が可能になりました

2018年8月に更新し、クローム、ファイヤーフォックスIE、エッジでのテストに成功した最新情報を更新しました。

2019年1月に更新し、クロームの検出を修正し（window.chrome.webstore deprecationのため）、クロームでの最新の成功テストを含めるようにしました。

2019年12月に更新し、Chromium検出をベースにEdgeを追加しました（@Nimeshのコメントに基づいています）。