Rileva il sistema host nel browser
Se stai scrivendo un'app Web progressiva e desideri determinare quale tipo di sistema ospita l'agente, una semplice API può aiutarti.
Mi rivolgo esplicitamente solo alle app Web moderne con il codice in questo articolo. Il rilevamento del sistema operativo o della versione del browser era notoriamente fragile in passato, quindi le nuove API disponibili sul "navigatore" forniscono una soluzione solida per tali attività, ma sono disponibili solo nei browser moderni.
Controllo della piattaforma
Il codice seguente mostra come determinare in modo affidabile l'ambiente tramite Javascript. Accede al “navigatore”, un oggetto disponibile in finestra che mette a disposizione un intero set di API per potenziare progressivamente la tua web app.
/**
* 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
Come puoi vedere, la logica per determinare quale tipo di sistema ospita la tua applicazione è molto semplice e richiede solo poche righe di codice.
Esempi per casi d'uso
Un caso d'uso comune per determinare il sistema operativo dell'host consiste nel fornire diversi tasti di scelta rapida e successivamente tag "kbd" nel codice. Ad esempio, macOS utilizza il tasto "Comando", mentre Windows e Linux utilizzano il tasto "Control" per molte scorciatoie.
Puoi anche modificare lo stile della tua interfaccia utente per allinearla meglio con l'interfaccia utente nativa dal sistema host, solo per citare un altro esempio.
