Se você é um desenvolvedor web, é importante conhecer o ambiente de execução do usuário que está visitando seu site.
Saber informações sobre o sistema operacional do usuário pode ajudar a fornecer uma melhor experiência do usuário. Felizmente, é possível obter detalhes do sistema operacional com JavaScript.
Para verificar o ambiente de execução, você pode usar o objeto navigator. Esse objeto contém informações sobre o navegador e o ambiente do usuário, incluindo informações sobre o sistema operacional.
Usando o objeto navigator, você pode facilmente obter informações como o nome do sistema operacional e a versão do sistema operacional.
Você pode facilmente detectar o sistema operacional com Javascript e usar essa informação para personalizar a experiência do usuário.
Com as informações fornecidas pelo objeto navigator, você pode fornecer conteúdo específico para usuários em diferentes sistemas operacionais ou exibir mensagens de erro personalizadas para usuários em sistemas operacionais específicos.
Destaques:
- O objeto navigator contém informações sobre o navegador e o ambiente do usuário, incluindo informações sobre o sistema operacional com Javascript.
- É possível detectar o sistema operacional com Javascript e personalizar a experiência do usuário.
- Com as informações fornecidas pelo objeto navigator, é possível fornecer conteúdo específico para usuários em diferentes sistemas operacionais ou exibir mensagens de erro personalizadas para usuários em sistemas operacionais específicos.
Verificando o Ambiente de Execução
Ao desenvolver uma aplicação com JavaScript, é importante verificar em qual ambiente de execução o código está sendo executado.
Isso pode ser útil para adaptar o comportamento da aplicação, dependendo do ambiente em que ela está sendo executada.
Existem duas maneiras principais de verificar o ambiente de execução em JavaScript: através do objeto navigator no navegador ou do módulo process no Node.js.
Você vai gostar também:
Se você tem interesse em artigos relacionado a categoria Javascript clique aqui!
Navegador vs. Node.js
Quando o código JavaScript está sendo executado em um navegador, é possível verificar informações sobre o sistema operacional do usuário utilizando o objeto navigator. Esse objeto contém informações sobre o navegador e o ambiente do usuário, incluindo informações sobre o sistema operacional.
Por exemplo, é possível obter o nome e a versão do sistema operacional do usuário usando as propriedades platform e oscpu do objeto navigator. Veja o exemplo abaixo:
const platform = window.navigator.platform;
const oscpu = window.navigator.oscpu;
console.log(`Sistema operacional: ${platform} ${oscpu}`);No entanto, se o código JavaScript estiver sendo executado no Node.js, o objeto navigator não estará disponível. Nesse caso, é possível verificar informações sobre o sistema operacional utilizando o módulo process.
Por exemplo, é possível obter o nome e a versão do sistema operacional usando a propriedade platform do módulo process. Veja o exemplo abaixo:
const platform = process.platform;
console.log(`Sistema operacional: ${platform}`);Usando o Objeto Navigator
O objeto Navigator em JavaScript fornece informações sobre o navegador do usuário, incluindo o sistema operacional.
É uma das maneiras mais confiáveis de obter informações do usuário sobre o sistema operacional com Javascript. Nesta seção, veremos como acessar as informações do navegador usando o objeto Navigator.
Acessando Informações do Navegador
O objeto Navigator possui várias propriedades que fornecem informações sobre o navegador do usuário. A propriedade navigator.userAgent retorna uma string que contém informações do usuário sobre o navegador e o sistema operacional.
Você pode usar essa propriedade para obter informações do usuário sobre o sistema operacional com Javascript.
let userAgent = navigator.userAgent;
console.log(userAgent);A saída do console pode ser algo como:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3A informação sobre o sistema operacional está incluída na string. Neste exemplo, o sistema operacional é Windows NT 10.0.
Compatibilidade entre Navegadores
Embora a propriedade navigator.userAgent seja suportada por todos os navegadores, as informações retornadas podem variar entre navegadores.
Isso ocorre porque diferentes navegadores podem usar diferentes strings de agente do usuário.
Portanto, se você estiver escrevendo um código que depende das informações retornadas pela propriedade navigator.userAgent, é importante testá-lo em diferentes navegadores para garantir que ele funcione corretamente.
Além disso, as informações retornadas pela propriedade navigator.userAgent podem ser falsificadas. Portanto, não é uma maneira infalível de obter informações do usuário sobre o sistema operacional com Javascript.
Confira os melhores smartphone da Amazon:
Utilizando a Biblioteca OS do Node.js
Para obter informações detalhadas do sistema operacional com JavaScript, podemos utilizar a biblioteca OS do Node.js.
Essa biblioteca fornece uma série de funções para obter informações do sistema operacional e do computador em que o programa está sendo executado.
Importando e Usando a Biblioteca OS
Para começar a usar a biblioteca OS, é necessário importá-la no seu código JavaScript. Isso pode ser feito usando o seguinte comando:
const os = require('os');Uma vez que a biblioteca foi importada, você pode começar a usar suas funções para obter informações do sistema operacional com Javascript.
Por exemplo, para obter informações sobre a CPU do sistema, você pode usar a função cpus() da seguinte forma:
const cpuInfo = os.cpus();A função cpus() retorna um array de objetos, onde cada objeto representa uma CPU do sistema e contém informações como o modelo, velocidade e número de núcleos.
Além disso, a biblioteca OS também fornece funções para obter informações sobre a memória do sistema, como a quantidade total de memória disponível e a quantidade de memória livre.
Por exemplo, para obter a quantidade total de memória disponível no sistema, você pode usar a função totalmem() da seguinte forma:
const totalMemory = os.totalmem();Essa função retorna o número total de bytes de memória disponíveis no sistema. Para converter esse valor em gigabytes, você pode usar a seguinte fórmula:
const totalMemoryInGB = (totalMemory / 1024 / 1024 / 1024).toFixed(2);Essa fórmula divide o número total de bytes por 1024 três vezes para convertê-lo em gigabytes e, em seguida, usa a função toFixed() para arredondar o valor para duas casas decimais.
Com a biblioteca OS do Node.js, é possível obter uma ampla variedade de informações do sistema operacional e do computador em que o programa está sendo executado. Basta importar a biblioteca e usar suas funções para obter as informações necessárias.
Detectando o Sistema Operacional com Expressões Regulares
Uma maneira de detectar o sistema operacional com JavaScript é usando expressões regulares. As expressões regulares são padrões que podem ser usados para encontrar e manipular strings de texto.
Em JavaScript, as expressões regulares são objetos e podem ser usadas com vários métodos de string, como match() e replace().
Criando e Testando Expressões Regulares
Para criar uma expressão regular que possa detectar o sistema operacional com Javascript, você pode usar o objeto navigator em conjunto com o método userAgent.
O método userAgent retorna uma string que descreve o navegador do usuário e o sistema operacional. Você pode usar uma expressão regular para extrair informações específicas dessa string.
Por exemplo, a seguinte expressão regular pode ser usada para detectar se o usuário está usando o Windows:
var isWindows = /Windows/.test(navigator.userAgent);Nessa expressão regular, o padrão /Windows/ é testado na string navigator.userAgent. Se o padrão for encontrado na string, o método test() retorna true, indicando que o usuário está usando o Windows.
Você pode criar expressões regulares mais complexas para detectar outros sistemas operacionais, como macOS e Linux. Por exemplo, a seguinte expressão regular pode ser usada para detectar se o usuário está usando o macOS:
var isMacOS = /Mac OS X/.test(navigator.userAgent);Essas expressões regulares são apenas exemplos e podem não funcionar em todas as situações. É importante testar essas expressões regulares em vários sistemas operacionais e navegadores para garantir que elas funcionem corretamente.
Exibindo Detalhes do Sistema Operacional com Javascript
Para exibir detalhes do sistema operacional com JavaScript, podemos utilizar a propriedade navigator.userAgent.
Essa propriedade retorna uma string contendo informações sobre o navegador e o sistema operacional em que o código está sendo executado.
Para acessar as informações específicas do sistema operacional com Javascript, podemos utilizar expressões regulares para extrair as informações relevantes da string retornada.
Por exemplo, para obter o nome do sistema operacional, podemos utilizar a seguinte expressão regular:
const osName = navigator.userAgent.match(/(Windows|Mac|Linux)/)[0];Essa expressão regular procura pela ocorrência das palavras “Windows”, “Mac” ou “Linux” na string retornada pela propriedade navigator.userAgent.
O resultado é um array contendo a primeira ocorrência encontrada, que corresponde ao nome do sistema operacional.
Formatando e Apresentando as Informações
Para apresentar as informações do sistema operacional com Javascript de forma mais legível, podemos formatar as informações em uma tabela ou lista. Por exemplo, podemos criar uma tabela com as seguintes informações:
- Nome do sistema operacional
- Versão do sistema operacional
- Arquitetura do sistema (32 ou 64 bits)
const osInfo = {
name: navigator.userAgent.match(/(Windows|Mac|Linux)/)[0],
version: navigator.userAgent.match(/(Windows NT|Mac OS X|Linux)[^;)]*/)[0].replace(/(Windows NT|Mac OS X|Linux)/, '').trim(),
arch: navigator.userAgent.match(/(Win64|x64|WOW64|Win32|x86_64|arm64|armv8l)/i)[0]
};
const table = `
<table>
<tr>
<td><strong>Nome do sistema operacional:</strong></td>
<td>${osInfo.name}</td>
</tr>
<tr>
<td><strong>Versão do sistema operacional:</strong></td>
<td>${osInfo.version}</td>
</tr>
<tr>
<td><strong>Arquitetura do sistema:</strong></td>
<td>${osInfo.arch}</td>
</tr>
</table>
`;
document.body.innerHTML = table;Nesse exemplo, estamos criando um objeto osInfo contendo as informações do sistema operacional com Javascript.
Em seguida, estamos criando uma tabela HTML com as informações formatadas e inserindo a tabela no corpo do documento.
O resultado é uma tabela contendo as informações do sistema operacional de forma clara e legível.
Com essas informações, você pode facilmente exibir os detalhes do sistema operacional com Javascript em sua aplicação de forma clara e legível.
