2020年にGoogle Chromeにおいて、User-Agent文字列を段階的に削除する事を発表しました。

この変更によって、User-Agent文字列から正確なブラウザの情報を取得できなくなってしまう可能性がありあます。

ウェブ開発者の方々であれば既にご存じの方も多く、対応を進めている方もいるかと思います。

※ User-Agentについてはこちらの記事をどうぞ

ユーザーエージェントとは？

さて、User-Agentの削除計画に関してですが、現時点でどこの段階まで進んでいるのでしょうか。

下記が発表されている計画です。

フェーズ 1: M92 より、navigator.userAgent、navigator.appVersion、navigator.platform

へのアクセスに関する警告を DevTools に表示します。

フェーズ 2: Originトライアルを開始し、サイトが最終形まで削減した

UA 文字列でテストやフィードバックできる期間を、少なくとも 6 か月間継続します。

（Chrome 95～Chrome 100）

フェーズ 3: 移行にさらに時間を要するサイトなどのために、逆オリジン トライアルを開始して、少なくとも 6 か月間継続します。

（Chrome 100）

フェーズ 4: Chrome の MINOR.BUILD.PATCH バージョン番号を削減します（ "0.0.0" ）。

これがロールアウトされると、デスクトップとモバイル OS で、逆オリジン トライアルをオプトインしていないすべてのページの読み込みに、削減版の UA 文字列が適用されます。

（Chrome 101）

フェーズ 5: 削減版のデスクトップ UA 文字列と関連する JS API（navigator.userAgent、navigator.appVersion、navigator.platform）のロールアウトを開始します。

これがロールアウトされると、デスクトップ OS で、逆オリジン トライアルをオプトインしていないすべてのページの読み込みに、削減版の UA 文字列が適用されます。

（Chrome 107）

フェーズ 6: 削減版の Android モバイル（とタブレット）の UA 文字列と関連する JS API のロールアウトを開始します。

これがロールアウトされると、Android で、逆オリジン トライアルをオプトインしていないすべてのページの読み込みに、削減版の UA 文字列が適用されます。

（Chrome 110）

フェーズ７： reverse Origin Trialが終了し、すべてのページロードが縮小されたUA文字列と関連するJS APIを受け取るようになりました。

（Chrome 113）

フェーズ 1は既に完了済み、現在はフェーズ 2が進行中です。

さらに、つい先日（2022/03/01）、Chrome バージョン99が発表されたので、フェーズ 2も完了目前となります。

フェーズ 2が完了すると、いよいよ削除（フェーズ 3 ~ フェーズ 6）が進んでいくことになります。

ChromeのUser-Agent文字列削除ですが、削除後の代替方法も案内されています。

その方法が、UA-CH(User-Agent Client Hints API)を使用する方法です。

このUA-CHですが、User-Agentと同様にHTTPリクエストヘッダー、JavaScriptで利用可能となっています。

HTTPリクエストヘッダーのUA-CHですが、キャプチャの「sec-ch-ua」、「sec-ch-ua-mobile」、「sec-ch-ua-platform」がそれに該当します。

各ヘッダーからは下記情報が取得できます

デフォルトでは、「sec-ch-ua」、「sec-ch-ua-mobile」、「sec-ch-ua-platform」の3つの情報しか取得できません。

この他の情報を取得したい場合は、リクエストを受けるサーバ側で、レスポンスヘッダーの「Accept-CH」に追加で取得したい情報を渡してあげる必要があります。

レスポンスヘッダーに追加で取得したい情報を渡す必要があるため、1本目のリクエストではデフォルトの「sec-ch-ua」、「sec-ch-ua-mobile」、「sec-ch-ua-platform」しか取得できず

追加情報が取得できるのは2本目以降のリクエストとなるのでご注意ください。

よくある処理として「モバイル/PCで表示を切り替える」などの単純な処理であれば、

デフォルトで取得可能な「sec-ch-ua-mobile」を使用すれば実現可能でしょう。

JavaScriptでUA-CHを使用する場合は「navigator.userAgentData」を使用します。

navigator.userAgentData からは下記情報が取得できます。

JavaScriptの「navigator」についてですが、User-Agentを取得する場合は「navigator.userAgent」を、

ブラウザバージョンでは「navigator.appVersion」、OS名では「navigator.platform」を使用していたかと思います。

これら「navigator.userAgent」、「navigator.appVersion」、「navigator.platform」の3つは今後使えなくなってしまうので

JavaScriptでこれらを使用している場合は早めに「navigator.userAgentData」への切り替えをおすすめします。

※ 「navigator.userAgent」、「navigator.appVersion」、「navigator.platform」はChrome バージョン101で使用できなくなる予定です。

ロールアウト計画のフェーズ １の段階で開発者ツール上で警告を表示しているので、気になる方は開発者ツールでご確認ください。

代替方法のUA-CHですが、ブラウザによって対応状況が異なっています。

現在、HTTPリクエストヘッダー、JavaScriptのUA-CHに対応しているのはChromeとEdge（chromium版）、Operaとなっています。

FireFoxやMac標準のSafariではUA-CHには対応していません。

UA-CHに対応していないFireFoxやSafariでUA-CHの情報を上記の方法で取得しようとした場合、値が取得できなかったり、エラーとなってしまったりと

意図しない挙動になる可能性もあるのでUA-CHに対応する場合は、未対応ブラウザも考慮し従来の取得方法とUA-CH対応の両方に対応することをおすすめします。