9 Web API's que fazem mgica

Se voltssemos no tempo uns 20 anos, ou at menos, e falssemos para os desenvolvedores web daquela poca o que os navegadores conseguem fazer hoje, definitivamente no acreditariam. Olhando em perspectiva o que os browsers fazem hoje com certeza garantiriam a entrada do Chrome, Firefox, Edge e outros em Hogwarts. Sabemos tambm quem ficaria de fora (aqueles que no devem ser mencionados IE/Safari)
Vamos dar um panorama de algumas Web Api's que fazem verdadeiras mgicas, especialmente em dispositivos mveis.

1. Ambient Light Events

Quando o sensor de luz de um dispositivo detecta uma mudana no nvel de luz, ele notifica o navegador dessa mudana. Imagine o que d pra fazer com fotografias, ambientes escuros ou contrastes de acessibilidade Instantneos!

Exemplo:

 if ('ondevicelight' in window) {      window.addEventListener('devicelight', function(event) {        var body = document.querySelector('body');        if (event.value < 50) {          body.classList.add('darklight');          body.classList.remove('brightlight');        } else {          body.classList.add('brightlight');          body.classList.remove('darklight');        }      });    } else {      console.log('devicelight event not supported');    }

Compatibilidade - Firefox, Firefox Android

2. Web Bluetooth API

E se eu lhe dissesse que os sites podem se comunicar com dispositivos Bluetooth prximos de maneira segura e preservando a privacidade? Dessa forma, monitores de frequncia cardaca, medidores de glicemia, e muito mais poderiam interagir diretamente com um site.

At agora, a capacidade de interagir com dispositivos Bluetooth s era possvel para aplicativos especficos da plataforma. A API Web Bluetooth pretende mudar isso e traz-lo tambm para navegadores da web.

Como recurso de segurana, a descoberta de dispositivos Bluetooth com navigator.bluetooth.requestDevice deve ser acionada por uma ao do usurio, como um toque ou clique do mouse. Estamos falando sobre ouvir eventos pointerup, click e touchend.

Compatibilidade - Chrome, Edge, Opera, Chrome Android, Opera Android, Samsung Internet

button.addEventListener('pointerup', function(event) {  // Call navigator.bluetooth.requestDevice});

Assim voc consegue acessar as informaes de bateria por exemplo:

async function onButtonClick() {  try {    log('Requesting Bluetooth Device...');    const device = await navigator.bluetooth.requestDevice({        filters: [{services: ['battery_service']}]});    log('Connecting to GATT Server...');    const server = await device.gatt.connect();    log('Getting Battery Service...');    const service = await server.getPrimaryService('battery_service');    log('Getting Battery Level Characteristic...');    const characteristic = await service.getCharacteristic('battery_level');    log('Reading Battery Level...');    const value = await characteristic.readValue();    log('> Battery Level is ' + value.getUint8(0) + '%');  } catch(error) {    log('Argh! ' + error);  }}

E outras dezenas de opes esto disponveis!

3. Broadcast Channel API

Compartilhando de informaes entre janelas, tabs, iframes etc, quem j teve problema em precisar integrar esse tipo de comunicao, essa api salvao.

Tente fazer login em um de seus sites favoritos. Em seguida, abra o mesmo site em uma guia separada. Normalmente voc estar logado em ambas as pginas. Em seguida, saia em uma de suas guias. Na maioria dos sites, parecer que voc est conectado em uma pgina e desconectado na outra.

Suas janelas esto em estados diferentes: conectado ou desconectado. Isso no timo e se voc um tabber manaco (como eu), pode causar alguma confuso.

Isso pode at ser um problema de segurana. Imagine que seu usurio est em uma cafeteria usando o painel da empresa. Ele sai para ir ao banheiro e deixa o computador ligado. Se a aplicao fosse aberta em mltiplas abas seria possvel acessar os dados disponveis nas demais abas (na tela ou talvez algum token JWT).

Compatibilidade - Chrome, Edge, Firefox, Opera, WebView Android, Chrome Android, Opera Android, Samsung Internet

4. Contact Picker API

Voc tem acesso aos contatos do telefone via browser (: Usar informaes como nome, email, telefone, endereo e cone se estiverem disponveis, a aplicabilidade disso quase infinita.

Compatibilidade - Opera, WebView Android, Chrome Android, Opera Android, Samsung Internet

5. Web Video Text Tracks Format (WebVTT)

Outra grande amiga da acessibilidade, quer colocar legenda nos seus vdeos? usando a tag <video> ? possvel customizar via css as legendas tambm. Vai fundo nessa lindeza =D

Exemplo:track.vtt

00:01.000 --> 00:04.000- Never drink liquid nitrogen.00:05.000 --> 00:09.000- It will perforate your stomach.- You could die.  <video controls autoplay src="video.webm">    <track default src="track.vtt">  </video>

Compatibilidade - Todos os browsers modernos

6. The WebSocket API

O protocolo Websocket uma tecnologia que permite comunicao bidirecional e conexo persistente entre servidores e clientes

Ele oferece uma conexo nica e de longa durao que uma alternativa mais eficiente ao HTTP (apesar que o handshake, pra realizar a conexo em si http) para aplicativos da web em tempo real.

Essa uma verdadeira mgica! Com essa API, voc pode enviar mensagens a um servidor e receber respostas orientadas a eventos sem precisar consultar o servidor para obter uma resposta. Realtime meus amigos <3

Compatibilidade - Todos os browsers modernos

7. Screen Capture API

A mgica do print e da gravao de tela! Com essa API, sites e aplicativos na web podem gravar facilmente uma aba do navegador, uma janela especfica ou at mesmo a tela inteira de um usurio. Super simples de usar!

Exemplo:

  async function startCapture(displayMediaOptions) {    let captureStream = null;    try {      captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);    } catch(err) {      console.error("Error: " + err);    }    return captureStream;  }

Compatibilidade - Chrome, Edge, Firefox, Opera, Safari

8. Proximity Events

Essa API define eventos que fornecem informaes sobre a distncia entre um dispositivo e um objeto, medida por um sensor de proximidade. Inicialmente fazia parte da API Sensor, posteriormente dividida e se tornou uma API independente. As especificaes da API Proximity so consideradas estveis porque atingiu o status de Recomendao Candidata do W3C em 1 de outubro de 2013.

Se voc j teve ou usou um smartphone, o que presumo que j tenha, voc j viu essa API em ao :)

Quer um exemplo? Pense em sua ltima ligao e no que voc fez. Voc desbloqueou seu smartphone, digitou o nmero para o qual deseja ligar e tocou no boto Ligar. Feito isso, voc colocou o smartphone prximo ao ouvido e de repente algo mgico aconteceu, a tela desligou.

Bem intuitiva a implementao:

  window.addEventListener('userproximity', function(event) {    if (event.near) {      // let's power off the screen      navigator.mozPower.screenEnabled = false;    } else {      // Otherwise, let's power on the screen      navigator.mozPower.screenEnabled = true;    }  });

Compatibilidade - Firefox, Firefox Android

9. Picture-in-Picture API

Comum no whatsapp, facebook, youtube. Essa API permite criar o vdeo flutuante em cima de outras janelas para que os usurios possam continuar a consumir mdia enquanto interagem com outros sites de contedo ou aplicativos em seus dispositivos.

Compatibilidade - Chrome, Edge, Opera, Safari, iOS Safari

E tem muito mais! So 77 API's com capacidades incrveis. Cada uma merece um artigo dedicado, vale a pena conferir e brincar com elas.

Gostou? Comenta o que mais interessante pra ti? Qual API dessas j usou ou quer usar?

Que a Magia esteja com voc

Fonte: MDN web docs

.
.
.
.
.

Conhea a Comunidade Nomadz
https://www.patreon.com/nomadz/membership

Quer falar comigo? T por aqui:
https://instagram.com/lincoli.xavier
https://www.tiktok.com/@lincoli.xavier
https://twitter.com/lincolixavier
https://youtube.com/@lincoli.xavier/
https://www.lincolixavier.com/