UserAgentとClientHintからOSのバージョンを判定する

UserAgentとClientHintとは

UserAgentはWebブラウザやその他のクライアントがWebサーバーに送信する文字列で、使用しているブラウザの種類、バージョン、ホストのオペレーティングシステムなどの情報を伝えます。これにより、Webサーバーはユーザーの環境に適したコンテンツを提供することができます。

一方、Client Hintは新しい機能で、HTTPクライアントヒント を拡張し、JavaScriptを使用してブラウザとプラットフォームの情報を取得するための新しい機能です。

この記事ではUserAgent、UserAgentClientHintに関する詳しい説明は省き、OSの名称、OSのバージョンをどのように取得するかを解説します。

また、ClientHint から取得できる情報は他にも存在しますが、詳細は公式ドキュメントを参照してください

ClientHint からOSのバージョンを取得する方法

ClientHintを取得するには、JavaScriptを使用して、下記のコードを実行する事で取得できます

await navigator.userAgentData.getHighEntropyValues(['platformVersion'])

Windows10, Chrome で実行すると下記のようなオブジェクトが取得できます

{
    "brands": [
        {
            "brand": "Not.A/Brand",
            "version": "8"
        },
        {
            "brand": "Chromium",
            "version": "114"
        },
        {
            "brand": "Google Chrome",
            "version": "114"
        }
    ],
    "mobile": false,
    "platform": "Windows",
    "platformVersion": "10.0.0"
}

レスポンスにある通り、platform がOSの名前、platformVersion がOSのバージョンになります。

UserAgent ClientHint を使用する上でのハマりどころ

ClientHintが提供されているブラウザでは、基本的にそのまま値を使用すればよいのですが、OSなどによって場合ごとにUserAgentを使用するのか、ClientHintを使用するのかが変わってくるため、ハマりどころを紹介します。

Windows

Edge, Chrome ともにClientHintによってOSの名前、バージョンを取得できます。

ただし、バージョンについてはWindows 10, Windows 11 などが渡ってくるわけではなく、０～13の数字が渡されます。

0 の場合はWin7 or Win8 or Win8.1
0~10 の場合は Win10
13以上 の場合はWin11 となります

JavaScript の方でplatformVersion に渡ってくる値を見てどのOSバージョンかを判断する必要があります。
下記は公式ドキュメントに記載されているサンプルコードです

navigator.userAgentData.getHighEntropyValues(["platformVersion"])
 .then(ua => {
   if (navigator.userAgentData.platform === "Windows") {
     const majorPlatformVersion = parseInt(ua.platformVersion.split('.')[0]);
     if (majorPlatformVersion >= 13) {
       console.log("Windows 11 or later");
      }
      else if (majorPlatformVersion > 0) {
        console.log("Windows 10");
      }
      else {
        console.log("Before Windows 10");
      }
   }
   else {
     console.log("Not running on Windows");
   }
 });

Safari

Safari ではClientHintの提供がないため、UserAgentからOSの名前、バージョンを取得する必要があります。

iOS/iPadOS

iOS, iPadOS ではUserAgentからバージョンを取得すべきです。
この2つのOSは以下で動くChromeはSafari 基準で動作するため、ClientHintを取得する事が出来ません。

その為、UserAgentのブラウザバージョンを取得します。
iOS, iPadOS のSafari バージョンはOSバージョンと同じものになっているため、使いまわしが可能です。

こちらの記事で対応表を作成いただいてました！お世話になっております。非常に助かりました

Mac OS

mac OS の場合、Chrome ではClientHintを使用してOS名、バージョンを取得できます。
こちらはSafariのバージョン＝OS のバージョンではないですが、Safari のバージョンからOSバージョンを推察する事が可能です。

（バージョンの対応表は、公式では出していない為、Wikipedia から参考用として引用します）
https://ja.wikipedia.org/wiki/Safari