Hostsystem im Browser erkennen
Wenn Sie eine Progressive Web App schreiben und feststellen möchten, auf welcher Art von System der Agent gehostet wird, kann Ihnen eine einfache API helfen.
Ich ziele mit dem Code in diesem Artikel ausdrücklich nur auf moderne Web-Apps ab. Die Erkennung der Betriebssystem- oder Browserversion war in der Vergangenheit notorisch anfällig, sodass die neuen APIs, die auf dem „Navigator“ verfügbar sind, eine robuste Lösung für solche Aufgaben bieten, die jedoch nur in modernen Browsern verfügbar sind.
Überprüfung der Plattform
Der folgende Code zeigt Ihnen, wie Sie die Umgebung zuverlässig per Javascript ermitteln. Es greift auf den „Navigator“ zu, ein im Fenster verfügbares Objekt, das eine ganze Reihe von APIs bereitstellt, um Ihre Webanwendung schrittweise zu verbessern.
/**
* 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
Wie Sie sehen können, ist die Logik zur Bestimmung, auf welchem System Ihre Anwendung gehostet wird, sehr einfach und erfordert nur wenige Codezeilen.
Beispiele für Anwendungsfälle
Ein häufiger Anwendungsfall zur Bestimmung des Betriebssystems des Hosts besteht darin, verschiedene Tastaturkürzel und anschließend „kbd“-Tags in Ihrem Code bereitzustellen. Beispielsweise verwendet macOS die „Command“-Taste, während Windows und Linux die „Control“-Taste für viele Shortcuts verwenden.
Sie können auch das Design Ihrer Benutzeroberfläche ändern, um sie besser an die native Benutzeroberfläche des Hostsystems anzupassen, um nur ein weiteres Beispiel zu nennen.
