{"id":1590,"date":"2024-10-14T15:55:14","date_gmt":"2024-10-14T18:55:14","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=1590"},"modified":"2025-11-27T13:08:16","modified_gmt":"2025-11-27T16:08:16","slug":"interagindo-com-hardware-pwa","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/interagindo-com-hardware-pwa\/","title":{"rendered":"Interagindo com hardware PWA"},"content":{"rendered":"Tempo de leitura: <\/span> 4<\/span> minutos<\/span><\/span>\n

Interagindo com hardware PWA<\/strong>: A capacidade de um Progressive Web App (PWA)<\/strong> de acessar e utilizar o hardware do dispositivo \u00e9 um fator chave que o eleva ao patamar de um aplicativo nativo. Por meio de APIs web padronizadas e seguras, as PWAs podem explorar recursos como c\u00e2mera, sensores e geolocaliza\u00e7\u00e3o<\/strong>, criando experi\u00eancias altamente interativas e contextuais.<\/p>\n\n\n\n

\u00c9 crucial lembrar que todo acesso a hardware \u00e9 regido pelo princ\u00edpio de permiss\u00e3o expl\u00edcita do usu\u00e1rio<\/strong> e deve ser feito via HTTPS<\/strong>.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. \ud83d\uddfa\ufe0f Localiza\u00e7\u00e3o e Multim\u00eddia (APIs Cl\u00e1ssicas)<\/h2>\n\n\n\n

Essas APIs s\u00e3o amplamente suportadas e formam a base da intera\u00e7\u00e3o de hardware na web.<\/p>\n\n\n\n

<\/div>\n\n\n\n

A. Geolocaliza\u00e7\u00e3o (navigator.geolocation<\/code>)<\/h3>\n\n\n\n

Permite determinar a posi\u00e7\u00e3o geogr\u00e1fica do dispositivo do usu\u00e1rio (latitude e longitude) usando GPS, Wi-Fi ou dados de rede.<\/p>\n\n\n\n

JavaScript<\/p>\n\n\n\n

navigator.geolocation.getCurrentPosition(\n  (position) => {\n    \/\/ Retorna a localiza\u00e7\u00e3o atual\n    console.log(\"Latitude: \" + position.coords.latitude);\n  },\n  (error) => {\n    \/\/ Lidar com o usu\u00e1rio negando a permiss\u00e3o\n    console.error(\"Erro ao obter a localiza\u00e7\u00e3o:\", error.message);\n  }\n);\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
B. C\u00e2mera e Microfone (navigator.mediaDevices.getUserMedia<\/code>)<\/h3>\n\n\n\n
A API MediaDevices<\/code> (parte da WebRTC) fornece acesso aos dispositivos de entrada de m\u00eddia, como c\u00e2mera e microfone, permitindo a captura de \u00e1udio e v\u00eddeo em tempo real.<\/p>\n\n\n\n
JavaScript<\/p>\n\n\n\n
\/\/ Solicita acesso \u00e0 c\u00e2mera\nnavigator.mediaDevices.getUserMedia({ video: true, audio: false })\n  .then(stream => {\n    const videoElement = document.getElementById('camera-feed');\n    \/\/ Exibe o stream de v\u00eddeo em um elemento <video>\n    videoElement.srcObject = stream; \n    videoElement.play();\n  })\n  .catch(err => {\n    console.error(\"Erro ao acessar a c\u00e2mera. Permiss\u00e3o negada ou hardware indispon\u00edvel:\", err);\n  });\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
2. \ud83e\uddbe Sensores e Intera\u00e7\u00e3o F\u00edsica<\/h2>\n\n\n\n
APIs espec\u00edficas permitem que o PWA reaja ao movimento, orienta\u00e7\u00e3o e intera\u00e7\u00e3o direta do usu\u00e1rio com a tela.<\/p>\n\n\n\n
<\/div>\n\n\n\n
A. Sensores de Movimento e Orienta\u00e7\u00e3o<\/h3>\n\n\n\n
Permite que as PWAs usem o Aceler\u00f4metro<\/strong> (movimento linear) e o Girosc\u00f3pio<\/strong> (orienta\u00e7\u00e3o rotacional) para criar experi\u00eancias imersivas (ex: jogos, realidade virtual).<\/p>\n\n\n\n
JavaScript<\/p>\n\n\n\n
\/\/ Ouve eventos de movimento do dispositivo (acelera\u00e7\u00e3o, rota\u00e7\u00e3o)\nwindow.addEventListener('devicemotion', (event) => {\n  \/\/ Dados de acelera\u00e7\u00e3o\n  const x = event.accelerationIncludingGravity.x; \n  console.log(`Inclina\u00e7\u00e3o no eixo X: ${x}`);\n});\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
B. Touch e Ponteiro<\/h3>\n\n\n\n
O gerenciamento de eventos de toque \u00e9 fundamental para a UX m\u00f3vel, permitindo gestos como swipe<\/em> e pinch-to-zoom<\/em>.<\/p>\n\n\n\n
JavaScript<\/p>\n\n\n\n
const element = document.getElementById('touch-area');\n\n\/\/ Detecta o in\u00edcio de um toque\nelement.addEventListener('touchstart', (event) => {\n  \/\/ Previne o comportamento padr\u00e3o do navegador (ex: scroll)\n  event.preventDefault(); \n  console.log(`N\u00famero de toques: ${event.touches.length}`);\n});\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
C. Gamepads API<\/h3>\n\n\n\n
Permite que PWAs se conectem a controladores de jogos (Gamepads) via Bluetooth ou USB, ampliando o potencial para jogos e simula\u00e7\u00f5es.<\/p>\n\n\n\n
JavaScript<\/p>\n\n\n\n
\/\/ Captura o estado dos gamepads conectados\nconst controllers = navigator.getGamepads();\nif (controllers[0]) {\n  console.log('Bot\u00e3o A (\u00cdndice 0):', controllers[0].buttons[0].pressed);\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
3. \ud83d\udd12 Autentica\u00e7\u00e3o e APIs Avan\u00e7adas<\/h2>\n\n\n\n
Com o desenvolvimento do Projeto Fugu<\/strong> (Recursos Experimentais), as PWAs ganham acesso a funcionalidades de seguran\u00e7a e baixo n\u00edvel do sistema.<\/p>\n\n\n\n
<\/div>\n\n\n\n
A. Autentica\u00e7\u00e3o Biom\u00e9trica (Web Authentication API – WebAuthn)<\/h3>\n\n\n\n
Permite autenticar usu\u00e1rios de forma segura usando recursos biom\u00e9tricos do dispositivo (impress\u00e3o digital, reconhecimento facial) sem depender de senhas tradicionais.<\/p>\n\n\n\n
JavaScript<\/p>\n\n\n\n
\/\/ Exemplo simplificado de solicita\u00e7\u00e3o de credencial\nnavigator.credentials.get({\n    publicKey: { \n        \/\/ Par\u00e2metros de desafio e ID de usu\u00e1rio \n        \/\/ (Requer um setup robusto no servidor)\n    }\n})\n.then(credential => {\n    \/\/ Credencial biom\u00e9trica validada\n})\n.catch(error => {\n    console.error(\"Falha na autentica\u00e7\u00e3o biom\u00e9trica:\", error);\n});\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
B. Outras APIs Fugu (Avan\u00e7adas)<\/h3>\n\n\n\n
Essas APIs, ainda em fase de teste (principalmente em navegadores Chromium), estendem as capacidades do PWA:<\/p>\n\n\n\n