How do software download sites identify the user’s operating system?

Someone asked me the following question:

“How do software download sites manage to change the download button depending on the user’s operating system?”

One way to do this is to learn a little about the BOM (Browser Object Model), which is a model like the DOM (Document Object Model) in JavaScript. With the Browser Object Model, it is possible to manipulate and know the characteristics of the end user, in this case the browser.

Well, have you ever visited a download site and noticed that the download button automatically adapts to your operating system? For example, if you are on Windows, the site displays a button to download the Windows-compatible version, and if you are on macOS, the macOS version appears automatically. This magic happens thanks to the Browser Object Model (BOM) and other techniques used in JavaScript.
What is the Browser Object Model (BOM)?

The BOM (Browser Object Model) is a model that allows you to access and interact with the web browser through JavaScript. Unlike the DOM (Document Object Model), which is used to manipulate HTML elements and the structure of the document, the BOM focuses on information specific to the browser and the environment in which it is running.

The BOM provides access to several useful properties, such as:

navigator: information about the browser and operating system.
window: interaction with the browser window (e.g., resizing, opening alerts, etc.).
location: details about the current URL.
screen: information about the screen resolution.

To determine the user’s operating system, we mainly use the navigator object, which is part of the BOM.
Detecting the operating system with navigator.userAgent

The navigator object has a property called userAgent, which contains a string with information about the browser, operating system, and other device data. With this string, you can identify the operating system and display the appropriate download button.
Code example

Here is a simple example of how to use navigator.userAgent to detect the operating system and adapt the download button:

// Função para detectar o sistema operacional
function detectarSistemaOperacional() {
    const userAgent = navigator.userAgent;

    if (userAgent.includes("Windows")) {
        return "Windows";
    } else if (userAgent.includes("Mac")) {
        return "macOS";
    } else if (userAgent.includes("Linux")) {
        return "Linux";
    } else if (userAgent.includes("Android")) {
        return "Android";
    } else if (userAgent.includes("iPhone") || userAgent.includes("iPad")) {
        return "iOS";
    } else {
        return "Desconhecido";
    }
}

// Atualizar o botão de download com base no sistema operacional detectado
function atualizarBotaoDownload() {
    const sistema = detectarSistemaOperacional();
    const botao = document.getElementById("botao-download");

    switch (sistema) {
        case "Windows":
            botao.textContent = "Baixar para Windows";
            botao.href = "/downloads/software-windows.exe";
            break;
        case "macOS":
            botao.textContent = "Baixar para macOS";
            botao.href = "/downloads/software-macos.dmg";
            break;
        case "Linux":
            botao.textContent = "Baixar para Linux";
            botao.href = "/downloads/software-linux.tar.gz";
            break;
        case "Android":
            botao.textContent = "Baixar para Android";
            botao.href = "/downloads/software-android.apk";
            break;
        case "iOS":
            botao.textContent = "Baixar na App Store";
            botao.href = "https://apps.apple.com/";
            break;
        default:
            botao.textContent = "Escolha a versão para download";
            botao.href = "/downloads/";
            break;
    }
}

// Executa a função ao carregar a página
document.addEventListener("DOMContentLoaded", atualizarBotaoDownload);

Cautions and Limitations

While userAgent is useful, it does have some limitations:

UserAgent Spoofing: Some browsers or devices may manually change the userAgent string, making accurate detection difficult.
Hybrid Devices: On devices such as tablets and hybrids, it can be difficult to determine whether the operating system should be treated as mobile or desktop.
Future Deprecation: Some navigator properties may change in the future to improve user privacy. Therefore, it is important to keep up with updates to web standards.
Alternatives and Best Practices

In addition to using userAgent, other approaches include:

Offer all options: Display links to all versions of the software and let the user choose.
Server-side detection: Use HTTP headers such as User-Agent on the server side to redirect or customize the response.
Progressive Web Apps (PWAs): Offer cross-platform versions that automatically adapt to the operating system.