Acessando recursos do dispositivo com JavaScript

Na dica de hoje, vamos mostrar como obter informações de alguns recursos do dispositivo, utilizando JavaScript puro, recursos estes como, por exemplo: conexão de rede, velocidade da internet, estado on-line/off-line, informações da bateria/carregamento e memória do dispositivo.

Você pode está si, perguntando, quando e para que vou precisar saber destas informações? É verdade, para a maioria das aplicações web provavelmente não tem esta necessidade, no entanto, estamos falando aqui de recursos que existe e que podemos utilizar. Também temos aplicações especificas que requer estas e outras informações sem a necessidade de ser um aplicativo nativo que baixamos da loja, mas sim, uma aplicação web. Para citar um exemplo vamos supor que seu cliente tem uma plataforma de vídeo como YouTube na web, e que antes de disponibilizar o vídeo, precisa analisar qual a velocidade da internet do dispositivo que está acessando, e com base nesta informação, baixar apenas vídeos com maior ou menor qualidade, isso é apenas um caso, mas podemos ter várias outras situações.

Hoje, as aplicações Web podem alcançar qualquer pessoa em qualquer lugar, em qualquer dispositivo e com uma única base de código. Os aplicativos da Web progressivos (PWAs), em particular, são criados e aprimorados com APIs modernas para fornecer vários recursos e segue em constantemente evolução.

Vamos ver alguns destes recursos agora e em outras postagens vamos continuar mostrando outros recursos.

Lembrando que a SoloWeb desenvolve soluções personalizadas para sua empresa ou negócio, como também hospedagem de sites com servidores VPS ou Dedicados. Acesse e confira soloweb.com.br

Tipo de rede e velocidade

A API de informações de rede permite que os aplicativos da Web leiam o tipo de rede atual e a velocidade máxima de downlink, assumidas com base na tecnologia de conexão subjacente usada pelo cliente. Também permite assinar uma notificação quando o tipo de rede for alterado.

Uma observação é que nem todos navegadores web possuem todas as implementações. Para consultar acesse https://caniuse.com/online-status

Neste exemplo vamos obter o estado da conexão atual e monitorar quando esta conexão for alterada entre on-line e off-line.

<i>*Ative e desative sua internet para ver as mudanças.</i>
<p>O estado de conexão inicial estava <b id="status">---</b></p>
<div id="target_internet_status"></div>

<script>
document.getElementById('status').innerHTML = navigator.onLine ? 'online' : 'offline';

var target_internet = document.getElementById('target_internet_status');

function handleStateChange() {
  var timeBadge = new Date().toTimeString().split(' ')[0];
  var newState = document.createElement('p');
  var state = navigator.onLine ? 'online' : 'offline';
  newState.innerHTML = '' + timeBadge + ' Connexão alterada para ' + state + '.';
  target_internet.appendChild(newState);
}
window.addEventListener('online', handleStateChange);
window.addEventListener('offline', handleStateChange);
</script>

Estados on-line

Os navegadores expõem uma informação de disponibilidade de conexão de rede as aplicações Web, para que os aplicativos possam reagir adequadamente, ou seja, interromper todas as operações que utilizam a rede e alternar para dados em cache quando a condição offline for detectada.

Neste exemplo vamos obter o tipo de rede, e velocidade.

<p>O tipo de rede atual é <b id="networkType">---</b></p>
<p>O tipo de rede efetivo atual é <b id="effectiveNetworkType">---</b></p>
<p>A velocidade máxima para downlink atual é <b id="downlinkMax">---</b>

<script>
function getConnection() {
  return navigator.connection || navigator.mozConnection ||
    navigator.webkitConnection || navigator.msConnection;
}
function updateNetworkInfo(info) {
  document.getElementById('networkType').innerHTML = info.type;
  document.getElementById('effectiveNetworkType').innerHTML = info.effectiveType;
  document.getElementById('downlinkMax').innerHTML = info.downlinkMax;
}

var info = getConnection();
if (info) {
  info.onchange = function (event) {
    updateNetworkInfo(event.target);
  }
  updateNetworkInfo(info);
}
</script>

Downlink é um termo de telecomunicação pertencente a dados enviados de um nível superior ou parte de uma rede. Tradicionalmente, refere-se a um processo de comunicação por satélite onde os dados são enviados de um satélite para um terminal ou dispositivo terrestre, daí a palavra “para baixo”. Ele também é usado em outros campos de redes, como redes celulares e de computadores, onde é usado de maneira semelhante, mas pode ou não envolver o significado direcional de cima, ou para baixo.

Status da bateria

A API de status da bateria permite que os aplicativos da Web obtenham informações sobre a fonte de alimentação do dispositivo, nível de carga da bateria, tempo esperado de carregamento ou descarregamento. Também expõe eventos sempre que qualquer uma das informações disponíveis muda. A API permite que os aplicativos ativem/desativem suas operações conforme os níveis de energia. E é o que vamos ver no exemplo a seguir.

<p>O status inicial da bateria <b id="charging">---</b></p>
<p>Tempo de carga <b id="chargingTime">---</b></p>
<p>Tempo de descarga <b id="dischargingTime">---</b></p>
<p>Nível <b id="level">---</b></p>
<div id="target_battery"></div>

<script>
if ('getBattery' in navigator || ('battery' in navigator && 'Promise' in window)) {
  var target_battery = document.getElementById('target_battery');
  function handleChange(change) {
    var timeBadge = new Date().toTimeString().split(' ')[0];
    var newState = document.createElement('p');
    newState.innerHTML = '' + timeBadge + ' ' + change + '.';
    target_battery.appendChild(newState);
  }
  function onChargingChange() { 
    handleChange('O carregamento da bateria mudou para ' + (this.charging ? 'carregando' : 'descarregando') + '')
  }
  function onChargingTimeChange() {
    handleChange('O tempo de carregamento da bateria mudou para ' + this.chargingTime + ' s');
  }
  function onDischargingTimeChange() {
    handleChange('O tempo de descarga da bateria mudou para ' + this.dischargingTime + ' s');
  }
  function onLevelChange() {
    handleChange('Nível da bateria alterado para ' + this.level * 100 + '%');
  }
  var batteryPromise;
  if ('getBattery' in navigator) { 
    batteryPromise = navigator.getBattery();
  } else { 
    batteryPromise = Promise.resolve(navigator.battery); 
  }
  batteryPromise.then(function (battery) {
    document.getElementById('charging').innerHTML = battery.charging ? 'carregando' : 'descarregando';
    document.getElementById('chargingTime').innerHTML = battery.chargingTime + ' s';
    document.getElementById('dischargingTime').innerHTML = battery.dischargingTime + ' s';
    document.getElementById('level').innerHTML = (battery.level) * 100 + '%';    
    battery.addEventListener('chargingchange', onChargingChange);
    battery.addEventListener('chargingtimechange', onChargingTimeChange);
    battery.addEventListener('dischargingtimechange', onDischargingTimeChange);
    battery.addEventListener('levelchange', onLevelChange);
  });
}
</script>

Memória do dispositivo

A API de memória do dispositivo permite que as aplicações Web avaliem a tamanho da memória RAM instalada. Ele pode ser usado para identificar os dispositivos de baixo custo para fornecer a experiência reduzida e leve do site por motivos de desempenho. O valor fornecido pela API não indica quanto da memória está realmente disponível para o aplicativo usar, sua finalidade é apenas servir como uma indicação de classe de dispositivo. Vejamos um exemplo.

<p>A memória do seu dispositivo é de ~<b id="result_memory">---</b> Gb</p>

<script>
document.getElementById('result_memory').innerHTML = navigator.deviceMemory || 'desconhecida'
</script>

Hoje temos PWA ou Progressive Web App com recursos bem explorados, que não deixa nada a desejar em relação à App nativa que baixamos das lojas. Segue alguns exemplos:

Starbucks – https://app.starbucks.com
Tiktok – https://www.tiktok.com
Telegram – https://web.telegram.org
Flipboard – https://flipboard.com
Uber – https://www.uber.com/br/pt-br
Pinterest – https://br.pinterest.com
Spotify – https://open.spotify.com
E muitos outros…

O termo Progressive Web App provavelmente pode ser considerado um modelo de curto prazo que ficará obsoleto quando as práticas e tecnologias que agora o constituem se tornarem os padrões de fato e todos os sites tirarão vantagem disso, pelo menos parcialmente. Foi o que aconteceu com termos como AJAX ou Web 2.0 que foram extintos depois que suas ofertas se tornaram a parte óbvia do desenvolvimento web. Da mesma forma, isso está acontecendo com o termo de web design responsivo que, com o crescimento do tráfego móvel, se torna sinônimo apenas de “web design”.

Os Progressive Web Apps ainda são um conceito bastante novo e até se tornar uma norma para os aplicativos incluir os recursos offline e esperar que os aplicativos da Web sejam instaláveis ​​na tela inicial, precisamos do termo de marketing separado para promover essas ideias. Depois que isso acontecer, será óbvio esperar que os aplicativos da Web se comportem como o usuário móvel espera e poderemos nos referir aos PWAs apenas como “aplicativos da Web”. Ou mesmo apenas “aplicativos”, já que para o usuário final não importa realmente que tipo de tecnologia existe sob o capô, desde que o aplicativo faça seu trabalho bem, e isso é definitivamente possível na Web hoje.

Veja todo código dos exemplos no codepen.

See the Pen Recursos do dispositivo by SoloWeb (@solowebbr) on CodePen.