Javascriptを介してWebアプリのOSを判別する方法

ブラウザでホストシステムを検出する

プログレッシブウェブアプリを作成していて、エージェントをホストしているシステムの種類を確認したい場合は、シンプルなAPIが役立ちます。

この記事のコードを使用して、最新のWebアプリのみを明示的にターゲットにしています。 OSまたはブラウザのバージョンの検出は、これまで脆弱であったことで有名でした。そのため、「ナビゲータ」で利用できる新しいAPIは、このようなタスクに堅牢なソリューションを提供しますが、最新のブラウザでのみ利用できます。

プラットフォームの確認

次のコードは、Javascriptを介して環境を確実に判別する方法を示しています。これは、ウィンドウで使用可能なオブジェクトである「ナビゲーター」にアクセスします。このオブジェクトは、Webアプリを段階的に拡張するためのAPIのセット全体を提供します。

/**
 * Retrieve the host platform in a 
 * best-effort way w/ normalized output.
 */
export function getAgentSystem(){
  if(!("navigator" in window)){
    return "unknown";
  }
  
  // Use the modern 'web hints' provied by
  // 'userAgentData' if available, else use
  // the deprecated 'platform' as fallback.
  const platform = (navigator.userAgentData?.platform || navigator.platform)?.toLowerCase();
 
 if(platform.startsWith("win")) return "windows";
 if(platform.startsWith("mac")) return "macos";
 if(platform.startsWith("linux")) return "linux";
 return "unknown";
}

// Just to give you an idea, the following properites
// are options for the legacy 'navigator.platform':
//
// HP-UX
// Linux i686
// Linux armv7l
// Mac68K
// MacPPC
// MacIntel
// SunOS
// Win16
// Win32
// WebTV OS

ご覧のとおり、アプリケーションをホストしているシステムの種類を判別するロジックは非常に単純で、数行のコードしか必要としません。