{"id":16896,"date":"2022-08-07T20:38:30","date_gmt":"2022-08-07T20:38:30","guid":{"rendered":"https:\/\/soloweb.com.br\/blog\/?p=16896"},"modified":"2023-04-02T13:00:41","modified_gmt":"2023-04-02T13:00:41","slug":"acessando-recursos-do-dispositivo-com-javascript","status":"publish","type":"post","link":"https:\/\/soloweb.com.br\/blog\/2022\/08\/07\/acessando-recursos-do-dispositivo-com-javascript\/","title":{"rendered":"Acessando recursos do dispositivo com JavaScript"},"content":{"rendered":"\n<p>Na dica de hoje, vamos mostrar como obter informa\u00e7\u00f5es de alguns recursos do dispositivo, utilizando JavaScript puro, recursos estes como, por exemplo: conex\u00e3o de rede, velocidade da internet, estado on-line\/off-line, informa\u00e7\u00f5es da bateria\/carregamento e mem\u00f3ria do dispositivo. <\/p>\n\n\n\n<p>Voc\u00ea pode est\u00e1 si, perguntando, quando e para que vou precisar saber destas informa\u00e7\u00f5es? \u00c9 verdade, para a maioria das aplica\u00e7\u00f5es web provavelmente n\u00e3o tem esta necessidade, no entanto, estamos falando aqui de recursos que existe e que podemos utilizar. Tamb\u00e9m temos aplica\u00e7\u00f5es especificas que requer estas e outras informa\u00e7\u00f5es sem a necessidade de ser um aplicativo nativo que baixamos da loja, mas sim, uma aplica\u00e7\u00e3o web. Para citar um exemplo vamos supor que seu cliente tem uma plataforma de v\u00eddeo como YouTube na web, e que antes de disponibilizar o v\u00eddeo, precisa analisar qual a velocidade da internet do dispositivo que est\u00e1 acessando, e com base nesta informa\u00e7\u00e3o, baixar apenas v\u00eddeos com maior ou menor qualidade, isso \u00e9 apenas um caso, mas podemos ter v\u00e1rias outras situa\u00e7\u00f5es.<\/p>\n\n\n\n<p>Hoje, as aplica\u00e7\u00f5es Web podem alcan\u00e7ar qualquer pessoa em qualquer lugar, em qualquer dispositivo e com uma \u00fanica base de c\u00f3digo. Os aplicativos da Web progressivos (PWAs), em particular, s\u00e3o criados e aprimorados com APIs modernas para fornecer v\u00e1rios recursos  e segue em constantemente evolu\u00e7\u00e3o.<\/p>\n\n\n\n<p>Vamos ver alguns destes recursos agora e em outras postagens vamos continuar mostrando outros recursos.<\/p>\n\n\n\n<p>Lembrando que a SoloWeb desenvolve solu\u00e7\u00f5es personalizadas para sua empresa ou neg\u00f3cio, como tamb\u00e9m hospedagem de sites com servidores VPS ou Dedicados. Acesse e confira <a href=\"https:\/\/soloweb.com.br\" target=\"_blank\" rel=\"noreferrer noopener\">soloweb.com.br<\/a><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Acessando recursos do dispositivo com JavaScript\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/Xt3oYv7ITSs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Tipo de rede e velocidade<\/h2>\n\n\n\n<p>A&nbsp;<strong>API de informa\u00e7\u00f5es de rede<\/strong>&nbsp;permite que os aplicativos da Web leiam o tipo de rede atual e a velocidade m\u00e1xima de downlink, assumidas com base na tecnologia de conex\u00e3o subjacente usada pelo cliente.&nbsp;Tamb\u00e9m permite assinar uma notifica\u00e7\u00e3o quando o tipo de rede for alterado.<\/p>\n\n\n\n<p>Uma observa\u00e7\u00e3o \u00e9 que nem todos navegadores web possuem todas as implementa\u00e7\u00f5es. Para consultar acesse <a href=\"https:\/\/caniuse.com\/online-status\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/caniuse.com\/online-status<\/a><\/p>\n\n\n\n<p>Neste exemplo vamos obter o estado da conex\u00e3o atual e monitorar quando esta conex\u00e3o for alterada entre on-line e off-line.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;i&gt;*Ative e desative sua internet para ver as mudan\u00e7as.&lt;\/i&gt;\n&lt;p&gt;O estado de conex\u00e3o inicial estava &lt;b id=\"status\"&gt;---&lt;\/b&gt;&lt;\/p&gt;\n&lt;div id=\"target_internet_status\"&gt;&lt;\/div&gt;\n\n&lt;script&gt;\ndocument.getElementById('status').innerHTML = navigator.onLine ? 'online' : 'offline';\n\nvar target_internet = document.getElementById('target_internet_status');\n\nfunction handleStateChange() {\n  var timeBadge = new Date().toTimeString().split(' ')&#91;0];\n  var newState = document.createElement('p');\n  var state = navigator.onLine ? 'online' : 'offline';\n  newState.innerHTML = '' + timeBadge + ' Connex\u00e3o alterada para ' + state + '.';\n  target_internet.appendChild(newState);\n}\nwindow.addEventListener('online', handleStateChange);\nwindow.addEventListener('offline', handleStateChange);\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"664\" height=\"319\" src=\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/img1.png\" alt=\"\" class=\"wp-image-16910\" srcset=\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/img1.png 664w, https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/img1-300x144.png 300w\" sizes=\"auto, (max-width: 664px) 100vw, 664px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Estados on-line<\/h2>\n\n\n\n<p>Os navegadores exp\u00f5em uma informa\u00e7\u00e3o de disponibilidade de conex\u00e3o de rede as aplica\u00e7\u00f5es Web, para que os aplicativos possam reagir adequadamente, ou seja, interromper todas as opera\u00e7\u00f5es que utilizam a rede e alternar para dados em cache quando a condi\u00e7\u00e3o offline for detectada.<\/p>\n\n\n\n<p>Neste exemplo vamos obter o tipo de rede, e velocidade.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;O tipo de rede atual \u00e9 &lt;b id=\"networkType\"&gt;---&lt;\/b&gt;&lt;\/p&gt;\n&lt;p&gt;O tipo de rede efetivo atual \u00e9 &lt;b id=\"effectiveNetworkType\"&gt;---&lt;\/b&gt;&lt;\/p&gt;\n&lt;p&gt;A velocidade m\u00e1xima para downlink atual \u00e9 &lt;b id=\"downlinkMax\"&gt;---&lt;\/b&gt;\n\n&lt;script&gt;\nfunction getConnection() {\n  return navigator.connection || navigator.mozConnection ||\n    navigator.webkitConnection || navigator.msConnection;\n}\nfunction updateNetworkInfo(info) {\n  document.getElementById('networkType').innerHTML = info.type;\n  document.getElementById('effectiveNetworkType').innerHTML = info.effectiveType;\n  document.getElementById('downlinkMax').innerHTML = info.downlinkMax;\n}\n\nvar info = getConnection();\nif (info) {\n  info.onchange = function (event) {\n    updateNetworkInfo(event.target);\n  }\n  updateNetworkInfo(info);\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"673\" height=\"249\" src=\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/img2.png\" alt=\"\" class=\"wp-image-16911\" srcset=\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/img2.png 673w, https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/img2-300x111.png 300w\" sizes=\"auto, (max-width: 673px) 100vw, 673px\" \/><\/figure>\n\n\n\n<p><strong>Downlink<\/strong> \u00e9 um termo de telecomunica\u00e7\u00e3o pertencente a dados enviados de um n\u00edvel superior ou parte de uma rede. Tradicionalmente, refere-se a um processo de comunica\u00e7\u00e3o por sat\u00e9lite onde os dados s\u00e3o enviados de um sat\u00e9lite para um terminal ou dispositivo terrestre, da\u00ed a palavra &#8220;para baixo&#8221;. Ele tamb\u00e9m \u00e9 usado em outros campos de redes, como redes celulares e de computadores, onde \u00e9 usado de maneira semelhante, mas pode ou n\u00e3o envolver o significado direcional de cima, ou para baixo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Status da bateria<\/h2>\n\n\n\n<p>A&nbsp;<strong>API de status da bateria<\/strong>&nbsp;permite que os aplicativos da Web obtenham informa\u00e7\u00f5es sobre a fonte de alimenta\u00e7\u00e3o do dispositivo, n\u00edvel de carga da bateria, tempo esperado de carregamento ou descarregamento.&nbsp;Tamb\u00e9m exp\u00f5e eventos sempre que qualquer uma das informa\u00e7\u00f5es dispon\u00edveis muda.&nbsp;A API permite que os aplicativos ativem\/desativem suas opera\u00e7\u00f5es conforme os n\u00edveis de energia. E \u00e9 o que vamos ver no exemplo a seguir.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;O status inicial da bateria &lt;b id=\"charging\"&gt;---&lt;\/b&gt;&lt;\/p&gt;\n&lt;p&gt;Tempo de carga &lt;b id=\"chargingTime\"&gt;---&lt;\/b&gt;&lt;\/p&gt;\n&lt;p&gt;Tempo de descarga &lt;b id=\"dischargingTime\"&gt;---&lt;\/b&gt;&lt;\/p&gt;\n&lt;p&gt;N\u00edvel &lt;b id=\"level\"&gt;---&lt;\/b&gt;&lt;\/p&gt;\n&lt;div id=\"target_battery\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\nif ('getBattery' in navigator || ('battery' in navigator &amp;&amp; 'Promise' in window)) {\n  var target_battery = document.getElementById('target_battery');\n  function handleChange(change) {\n    var timeBadge = new Date().toTimeString().split(' ')&#91;0];\n    var newState = document.createElement('p');\n    newState.innerHTML = '' + timeBadge + ' ' + change + '.';\n    target_battery.appendChild(newState);\n  }\n  function onChargingChange() { \n    handleChange('O carregamento da bateria mudou para ' + (this.charging ? 'carregando' : 'descarregando') + '')\n  }\n  function onChargingTimeChange() {\n    handleChange('O tempo de carregamento da bateria mudou para ' + this.chargingTime + ' s');\n  }\n  function onDischargingTimeChange() {\n    handleChange('O tempo de descarga da bateria mudou para ' + this.dischargingTime + ' s');\n  }\n  function onLevelChange() {\n    handleChange('N\u00edvel da bateria alterado para ' + this.level * 100 + '%');\n  }\n  var batteryPromise;\n  if ('getBattery' in navigator) { \n    batteryPromise = navigator.getBattery();\n  } else { \n    batteryPromise = Promise.resolve(navigator.battery); \n  }\n  batteryPromise.then(function (battery) {\n    document.getElementById('charging').innerHTML = battery.charging ? 'carregando' : 'descarregando';\n    document.getElementById('chargingTime').innerHTML = battery.chargingTime + ' s';\n    document.getElementById('dischargingTime').innerHTML = battery.dischargingTime + ' s';\n    document.getElementById('level').innerHTML = (battery.level) * 100 + '%';    \n    battery.addEventListener('chargingchange', onChargingChange);\n    battery.addEventListener('chargingtimechange', onChargingTimeChange);\n    battery.addEventListener('dischargingtimechange', onDischargingTimeChange);\n    battery.addEventListener('levelchange', onLevelChange);\n  });\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"674\" height=\"468\" src=\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/img3.png\" alt=\"\" class=\"wp-image-16915\" srcset=\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/img3.png 674w, https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/img3-300x208.png 300w, https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/img3-392x272.png 392w, https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/img3-130x90.png 130w\" sizes=\"auto, (max-width: 674px) 100vw, 674px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Mem\u00f3ria do dispositivo<\/h2>\n\n\n\n<p>A&nbsp;<strong>API de mem\u00f3ria do dispositivo<\/strong>&nbsp;permite que as aplica\u00e7\u00f5es Web avaliem a tamanho da mem\u00f3ria RAM instalada.&nbsp;Ele pode ser usado para identificar os dispositivos de baixo custo para fornecer a experi\u00eancia reduzida e leve do site por motivos de desempenho.&nbsp;O valor fornecido pela API n\u00e3o indica quanto da mem\u00f3ria est\u00e1 realmente dispon\u00edvel para o aplicativo usar, sua finalidade \u00e9 apenas servir como uma indica\u00e7\u00e3o de classe de dispositivo. Vejamos um exemplo.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;A mem\u00f3ria do seu dispositivo \u00e9 de ~&lt;b id=\"result_memory\"&gt;---&lt;\/b&gt; Gb&lt;\/p&gt;\n\n&lt;script&gt;\ndocument.getElementById('result_memory').innerHTML = navigator.deviceMemory || 'desconhecida'\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"674\" height=\"109\" src=\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/img5.png\" alt=\"\" class=\"wp-image-16918\" srcset=\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/img5.png 674w, https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/img5-300x49.png 300w\" sizes=\"auto, (max-width: 674px) 100vw, 674px\" \/><\/figure>\n\n\n\n<p>Hoje temos PWA ou Progressive Web App com recursos bem explorados, que n\u00e3o deixa nada a desejar em rela\u00e7\u00e3o \u00e0 App nativa que baixamos das lojas. Segue alguns exemplos:<\/p>\n\n\n\n<p><strong>Starbucks<\/strong> &#8211; https:\/\/app.starbucks.com<br><strong>Tiktok<\/strong> &#8211; https:\/\/www.tiktok.com<br><strong>Telegram<\/strong> &#8211; https:\/\/web.telegram.org<br><strong>Flipboard<\/strong> &#8211; https:\/\/flipboard.com<br><strong>Uber<\/strong> &#8211; https:\/\/www.uber.com\/br\/pt-br<br><strong>Pinterest<\/strong> &#8211; https:\/\/br.pinterest.com<br><strong>Spotify<\/strong> &#8211; https:\/\/open.spotify.com<br>E muitos outros\u2026<\/p>\n\n\n\n<p>O termo Progressive Web App provavelmente pode ser considerado um modelo de curto prazo que ficar\u00e1 obsoleto quando as pr\u00e1ticas e tecnologias que agora o constituem se tornarem os padr\u00f5es de fato e todos os sites tirar\u00e3o 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 \u00f3bvia do desenvolvimento web. Da mesma forma, isso est\u00e1 acontecendo com o termo de web design responsivo que, com o crescimento do tr\u00e1fego m\u00f3vel, se torna sin\u00f4nimo apenas de &#8220;web design&#8221;.<\/p>\n\n\n\n<p>Os Progressive Web Apps ainda s\u00e3o um conceito bastante novo e at\u00e9 se tornar uma norma para os aplicativos incluir os recursos offline e esperar que os aplicativos da Web sejam instal\u00e1veis \u200b\u200bna tela inicial, precisamos do termo de marketing separado para promover essas ideias. Depois que isso acontecer, ser\u00e1 \u00f3bvio esperar que os aplicativos da Web se comportem como o usu\u00e1rio m\u00f3vel espera e poderemos nos referir aos PWAs apenas como &#8220;aplicativos da Web&#8221;. Ou mesmo apenas &#8220;aplicativos&#8221;, j\u00e1 que para o usu\u00e1rio final n\u00e3o importa realmente que tipo de tecnologia existe sob o cap\u00f4, desde que o aplicativo fa\u00e7a seu trabalho bem, e isso \u00e9 definitivamente poss\u00edvel na Web hoje.<\/p>\n\n\n\n<p>Veja todo c\u00f3digo dos exemplos no codepen.<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"OJvvgYg\" data-user=\"solowebbr\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/solowebbr\/pen\/OJvvgYg\">\n  Recursos do dispositivo<\/a> by SoloWeb (<a href=\"https:\/\/codepen.io\/solowebbr\">@solowebbr<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Na dica de hoje, vamos mostrar como obter informa\u00e7\u00f5es de alguns recursos do dispositivo, utilizando JavaScript puro, recursos estes como, por exemplo: conex\u00e3o de rede, velocidade da internet, estado on-line\/off-line, informa\u00e7\u00f5es da bateria\/carregamento e mem\u00f3ria do dispositivo. <\/p>\n","protected":false},"author":4,"featured_media":16922,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","footnotes":""},"categories":[106,114,25,240],"tags":[269,224,112],"class_list":["post-16896","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","category-dicas","category-geral","category-javascript","tag-api","tag-javascript","tag-pwa"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Acessando recursos do dispositivo com JavaScript - SOLOWEB Tecnologia<\/title>\n<meta name=\"description\" content=\"Na dica de hoje, vamos mostrar como obter informa\u00e7\u00f5es de alguns recursos do dispositivo, utilizando JavaScript puro, recursos estes como, por exemplo: conex\u00e3o de rede, velocidade da internet, estado on-line\/off-line, informa\u00e7\u00f5es da bateria\/carregamento e mem\u00f3ria do dispositivo.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/soloweb.com.br\/blog\/2022\/08\/07\/acessando-recursos-do-dispositivo-com-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Acessando recursos do dispositivo com JavaScript - SOLOWEB Tecnologia\" \/>\n<meta property=\"og:description\" content=\"Na dica de hoje, vamos mostrar como obter informa\u00e7\u00f5es de alguns recursos do dispositivo, utilizando JavaScript puro, recursos estes como, por exemplo: conex\u00e3o de rede, velocidade da internet, estado on-line\/off-line, informa\u00e7\u00f5es da bateria\/carregamento e mem\u00f3ria do dispositivo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/soloweb.com.br\/blog\/2022\/08\/07\/acessando-recursos-do-dispositivo-com-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"SOLOWEB Tecnologia\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-07T20:38:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-02T13:00:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/WhatsApp-Image-2022-08-07-at-17.36.20.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"940\" \/>\n\t<meta property=\"og:image:height\" content=\"787\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlos Rolim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlos Rolim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/07\\\/acessando-recursos-do-dispositivo-com-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/07\\\/acessando-recursos-do-dispositivo-com-javascript\\\/\"},\"author\":{\"name\":\"Carlos Rolim\",\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/b10ff5bc260b411c2d82b19fad8ae3f1\"},\"headline\":\"Acessando recursos do dispositivo com JavaScript\",\"datePublished\":\"2022-08-07T20:38:30+00:00\",\"dateModified\":\"2023-04-02T13:00:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/07\\\/acessando-recursos-do-dispositivo-com-javascript\\\/\"},\"wordCount\":1025,\"publisher\":{\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/07\\\/acessando-recursos-do-dispositivo-com-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/WhatsApp-Image-2022-08-07-at-17.36.20.jpeg\",\"keywords\":[\"api\",\"javascript\",\"pwa\"],\"articleSection\":[\"Desenvolvimento\",\"Dicas\",\"Geral\",\"JavaScript\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/07\\\/acessando-recursos-do-dispositivo-com-javascript\\\/\",\"url\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/07\\\/acessando-recursos-do-dispositivo-com-javascript\\\/\",\"name\":\"Acessando recursos do dispositivo com JavaScript - SOLOWEB Tecnologia\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/07\\\/acessando-recursos-do-dispositivo-com-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/07\\\/acessando-recursos-do-dispositivo-com-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/WhatsApp-Image-2022-08-07-at-17.36.20.jpeg\",\"datePublished\":\"2022-08-07T20:38:30+00:00\",\"dateModified\":\"2023-04-02T13:00:41+00:00\",\"description\":\"Na dica de hoje, vamos mostrar como obter informa\u00e7\u00f5es de alguns recursos do dispositivo, utilizando JavaScript puro, recursos estes como, por exemplo: conex\u00e3o de rede, velocidade da internet, estado on-line\\\/off-line, informa\u00e7\u00f5es da bateria\\\/carregamento e mem\u00f3ria do dispositivo.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/07\\\/acessando-recursos-do-dispositivo-com-javascript\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/07\\\/acessando-recursos-do-dispositivo-com-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/07\\\/acessando-recursos-do-dispositivo-com-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/WhatsApp-Image-2022-08-07-at-17.36.20.jpeg\",\"contentUrl\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/WhatsApp-Image-2022-08-07-at-17.36.20.jpeg\",\"width\":940,\"height\":787},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/2022\\\/08\\\/07\\\/acessando-recursos-do-dispositivo-com-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Acessando recursos do dispositivo com JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/\",\"name\":\"SOLOWEB Tecnologia\",\"description\":\"SOLOWEB Tecnologia\",\"publisher\":{\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/#organization\",\"name\":\"SOLOWEB Tecnologia\",\"url\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/cropped-solo.png\",\"contentUrl\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/cropped-solo.png\",\"width\":341,\"height\":94,\"caption\":\"SOLOWEB Tecnologia\"},\"image\":{\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/b10ff5bc260b411c2d82b19fad8ae3f1\",\"name\":\"Carlos Rolim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/avatar_user_4_1674993909-96x96.png\",\"url\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/avatar_user_4_1674993909-96x96.png\",\"contentUrl\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/avatar_user_4_1674993909-96x96.png\",\"caption\":\"Carlos Rolim\"},\"sameAs\":[\"http:\\\/\\\/carlosrolim.com\"],\"url\":\"https:\\\/\\\/soloweb.com.br\\\/blog\\\/author\\\/carlos\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Acessando recursos do dispositivo com JavaScript - SOLOWEB Tecnologia","description":"Na dica de hoje, vamos mostrar como obter informa\u00e7\u00f5es de alguns recursos do dispositivo, utilizando JavaScript puro, recursos estes como, por exemplo: conex\u00e3o de rede, velocidade da internet, estado on-line\/off-line, informa\u00e7\u00f5es da bateria\/carregamento e mem\u00f3ria do dispositivo.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/soloweb.com.br\/blog\/2022\/08\/07\/acessando-recursos-do-dispositivo-com-javascript\/","og_locale":"pt_BR","og_type":"article","og_title":"Acessando recursos do dispositivo com JavaScript - SOLOWEB Tecnologia","og_description":"Na dica de hoje, vamos mostrar como obter informa\u00e7\u00f5es de alguns recursos do dispositivo, utilizando JavaScript puro, recursos estes como, por exemplo: conex\u00e3o de rede, velocidade da internet, estado on-line\/off-line, informa\u00e7\u00f5es da bateria\/carregamento e mem\u00f3ria do dispositivo.","og_url":"https:\/\/soloweb.com.br\/blog\/2022\/08\/07\/acessando-recursos-do-dispositivo-com-javascript\/","og_site_name":"SOLOWEB Tecnologia","article_published_time":"2022-08-07T20:38:30+00:00","article_modified_time":"2023-04-02T13:00:41+00:00","og_image":[{"width":940,"height":787,"url":"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/WhatsApp-Image-2022-08-07-at-17.36.20.jpeg","type":"image\/jpeg"}],"author":"Carlos Rolim","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Carlos Rolim","Est. tempo de leitura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/soloweb.com.br\/blog\/2022\/08\/07\/acessando-recursos-do-dispositivo-com-javascript\/#article","isPartOf":{"@id":"https:\/\/soloweb.com.br\/blog\/2022\/08\/07\/acessando-recursos-do-dispositivo-com-javascript\/"},"author":{"name":"Carlos Rolim","@id":"https:\/\/soloweb.com.br\/blog\/#\/schema\/person\/b10ff5bc260b411c2d82b19fad8ae3f1"},"headline":"Acessando recursos do dispositivo com JavaScript","datePublished":"2022-08-07T20:38:30+00:00","dateModified":"2023-04-02T13:00:41+00:00","mainEntityOfPage":{"@id":"https:\/\/soloweb.com.br\/blog\/2022\/08\/07\/acessando-recursos-do-dispositivo-com-javascript\/"},"wordCount":1025,"publisher":{"@id":"https:\/\/soloweb.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/soloweb.com.br\/blog\/2022\/08\/07\/acessando-recursos-do-dispositivo-com-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/WhatsApp-Image-2022-08-07-at-17.36.20.jpeg","keywords":["api","javascript","pwa"],"articleSection":["Desenvolvimento","Dicas","Geral","JavaScript"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/soloweb.com.br\/blog\/2022\/08\/07\/acessando-recursos-do-dispositivo-com-javascript\/","url":"https:\/\/soloweb.com.br\/blog\/2022\/08\/07\/acessando-recursos-do-dispositivo-com-javascript\/","name":"Acessando recursos do dispositivo com JavaScript - SOLOWEB Tecnologia","isPartOf":{"@id":"https:\/\/soloweb.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/soloweb.com.br\/blog\/2022\/08\/07\/acessando-recursos-do-dispositivo-com-javascript\/#primaryimage"},"image":{"@id":"https:\/\/soloweb.com.br\/blog\/2022\/08\/07\/acessando-recursos-do-dispositivo-com-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/WhatsApp-Image-2022-08-07-at-17.36.20.jpeg","datePublished":"2022-08-07T20:38:30+00:00","dateModified":"2023-04-02T13:00:41+00:00","description":"Na dica de hoje, vamos mostrar como obter informa\u00e7\u00f5es de alguns recursos do dispositivo, utilizando JavaScript puro, recursos estes como, por exemplo: conex\u00e3o de rede, velocidade da internet, estado on-line\/off-line, informa\u00e7\u00f5es da bateria\/carregamento e mem\u00f3ria do dispositivo.","breadcrumb":{"@id":"https:\/\/soloweb.com.br\/blog\/2022\/08\/07\/acessando-recursos-do-dispositivo-com-javascript\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/soloweb.com.br\/blog\/2022\/08\/07\/acessando-recursos-do-dispositivo-com-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/soloweb.com.br\/blog\/2022\/08\/07\/acessando-recursos-do-dispositivo-com-javascript\/#primaryimage","url":"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/WhatsApp-Image-2022-08-07-at-17.36.20.jpeg","contentUrl":"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/08\/WhatsApp-Image-2022-08-07-at-17.36.20.jpeg","width":940,"height":787},{"@type":"BreadcrumbList","@id":"https:\/\/soloweb.com.br\/blog\/2022\/08\/07\/acessando-recursos-do-dispositivo-com-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/soloweb.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Acessando recursos do dispositivo com JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/soloweb.com.br\/blog\/#website","url":"https:\/\/soloweb.com.br\/blog\/","name":"SOLOWEB Tecnologia","description":"SOLOWEB Tecnologia","publisher":{"@id":"https:\/\/soloweb.com.br\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/soloweb.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/soloweb.com.br\/blog\/#organization","name":"SOLOWEB Tecnologia","url":"https:\/\/soloweb.com.br\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/soloweb.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/04\/cropped-solo.png","contentUrl":"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/04\/cropped-solo.png","width":341,"height":94,"caption":"SOLOWEB Tecnologia"},"image":{"@id":"https:\/\/soloweb.com.br\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/soloweb.com.br\/blog\/#\/schema\/person\/b10ff5bc260b411c2d82b19fad8ae3f1","name":"Carlos Rolim","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2023\/01\/avatar_user_4_1674993909-96x96.png","url":"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2023\/01\/avatar_user_4_1674993909-96x96.png","contentUrl":"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2023\/01\/avatar_user_4_1674993909-96x96.png","caption":"Carlos Rolim"},"sameAs":["http:\/\/carlosrolim.com"],"url":"https:\/\/soloweb.com.br\/blog\/author\/carlos\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/soloweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/16896","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/soloweb.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/soloweb.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/soloweb.com.br\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/soloweb.com.br\/blog\/wp-json\/wp\/v2\/comments?post=16896"}],"version-history":[{"count":20,"href":"https:\/\/soloweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/16896\/revisions"}],"predecessor-version":[{"id":17837,"href":"https:\/\/soloweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/16896\/revisions\/17837"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/soloweb.com.br\/blog\/wp-json\/wp\/v2\/media\/16922"}],"wp:attachment":[{"href":"https:\/\/soloweb.com.br\/blog\/wp-json\/wp\/v2\/media?parent=16896"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/soloweb.com.br\/blog\/wp-json\/wp\/v2\/categories?post=16896"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/soloweb.com.br\/blog\/wp-json\/wp\/v2\/tags?post=16896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}