book

Livro de receitas da API da Web

by Joe Attardi

March 2025

Intermediate to advanced

286 pages

5h 46m

Portuguese (Portugal, Brazil)

O'Reilly Media, Inc.

Read now

Unlock full access

O poder dos browsers modernosDesvantagens das bibliotecas de terceirosA quem se destina este livroO que contém este livroRecursos adicionaisCanIUse.comMDN Web DocsEspecificaçõesConvenções utilizadas neste livroUtilizar exemplos de códigoAprendizagem em linha da O'ReillyComo contactar-nosAgradecimentos
IntroduçãoFunções de retornoEventosPromessasTrabalhar com promessasProblemaSoluçãoDebateCarregar uma imagem com um FallbackProblemaSoluçãoDebateEncadeamento de promessasProblemaSoluçãoDebateUtilizar as palavras-chave async e awaitProblemaSoluçãoDebateUsando Promessas em ParaleloProblemaSoluçãoDebateAnimar um elemento com requestAnimationFrameProblemaSoluçãoDebateEnvolvendo uma API de evento em uma promessaProblemaSoluçãoDebate
IntroduçãoObter e definir itensDesvantagensVerificação do suporte para armazenamento na WebProblemaSoluçãoDebatePersistência de dados de cadeiaProblemaSoluçãoDebatePersistência de objectos simplesProblemaSoluçãoDebatePersistência de objectos complexosProblemaSoluçãoDebateEscuta as modificações no armazenamentoProblemaSoluçãoDebateEncontrar todas as chaves conhecidasProblemaSoluçãoDebateRemoção de dadosProblemaSoluçãoDebate
IntroduçãoPartes de um URLResolver um URL relativoProblemaSoluçãoDebateRemoção de parâmetros de consulta de um URLProblemaSoluçãoDebateAdicionar parâmetros de consulta a um URLProblemaSoluçãoDebateLeitura de parâmetros de consultaProblemaSoluçãoDebateCriando um roteador simples do lado do clienteProblemaSoluçãoDebateCorrespondência de URLs com padrõesProblemaSoluçãoDebate
IntroduçãoEnvio de um pedido com XMLHttpRequestProblemaSoluçãoDebateEnvio de um pedido GET com a API FetchProblemaSoluçãoDebateEnvio de um pedido POST com a API FetchProblemaSoluçãoDebateCarregamento de um ficheiro com a API FetchProblemaSoluçãoDebateEnviar um sinalizadorProblemaSoluçãoDebateEscuta de eventos remotos com eventos enviados pelo servidorProblemaSoluçãoDebateTroca de dados em tempo real com WebSocketsProblemaSoluçãoDebate
IntroduçãoArmazenamento de objetos e índicesChavesTransacçõesPedidosCriação, leitura e eliminação de objectos numa base de dadosProblemaSoluçãoDebateAtualização de uma base de dados existenteProblemaSoluçãoDebateConsulta com índicesProblemaSoluçãoDebatePesquisa de valores de cadeia de caracteres com cursoresProblemaSoluçãoDebatePaginando um grande conjunto de dadosProblemaSoluçãoDebateUsando promessas com a API IndexedDBProblemaSoluçãoDebate
IntroduçãoMutaçãoObservadorRedimensionarObservadorIntersectionObserverCarregamento lento de uma imagem quando se desloca para a vistaProblemaSoluçãoDebateEnvolvendo IntersectionObserver com uma promessaProblemaSoluçãoDebatePausa e reproduz automaticamente um vídeoProblemaSoluçãoDebateAnimar alterações na alturaProblemaSoluçãoDebateAltera o conteúdo de um elemento com base no tamanhoProblemaSoluçãoDebateAplicar uma transição quando um elemento se desloca para a vistaProblemaSoluçãoDebateUtilizar o scrolling infinitoProblemaSoluçãoDebate
IntroduçãoDados do formulárioValidaçãoPreenchimento de um campo de formulário a partir do armazenamento localProblemaSoluçãoDebateSubmeter um formulário com Fetch e a API FormDataProblemaSoluçãoDebateSubmeter um formulário como JSONProblemaSoluçãoDebateTornar um campo de formulário obrigatórioProblemaSoluçãoDebateRestringir uma entrada de númeroProblemaSoluçãoDebateEspecificar um padrão de validaçãoProblemaSoluçãoDebateValidação de formuláriosProblemaSoluçãoDebateUtilizar a lógica de validação personalizadaProblemaSoluçãoDebateValidando um grupo de caixas de seleçãoProblemaSoluçãoDebateValidando um campo de forma assíncronaProblemaSoluçãoDebate
IntroduçãoAnimação baseada em keyframesAnimação de keyframes com JavaScriptObjectos de animaçãoAplicar um efeito "Ripple" no cliqueProblemaSoluçãoDebateIniciar e parar animaçõesProblemaSoluçãoDebateAnimação da inserção e remoção de DOMProblemaSoluçãoDebateInverter animaçõesProblemaSoluçãoDebateMostrar um indicador de progresso de deslocamentoProblemaSoluçãoDebateFazer um elemento saltarProblemaSoluçãoDebateExecuta várias animações ao mesmo tempoProblemaSoluçãoDebateMostrar uma animação de carregamentoProblemaSoluçãoDebateRespeitar as preferências de animação do utilizadorProblemaSoluçãoDebate
IntroduçãoReconhecimento de falaSíntese de falaSuporte do navegadorAdicionar ditado a um campo de textoProblemaSoluçãoDebateCriar um Promise Helper para o reconhecimento de vozProblemaSoluçãoDebateObter as vozes disponíveisProblemaSoluçãoDebateSintetizar o discursoProblemaSoluçãoDebatePersonalizar os parâmetros da síntese de falaProblemaSoluçãoDebatePausa automaticamente a falaProblemaSoluçãoDebate

IntroduçãoCarregar texto de um ficheiroProblemaSoluçãoDebateCarregar uma imagem como um URL de dadosProblemaSoluçãoDebateCarregar um vídeo como um URL de objetoProblemaSoluçãoDebateCarregar uma imagem com arrastar e largarProblemaSoluçãoDebateVerificar e solicitar permissõesProblemaSoluçãoDebateExportação de dados API para um ficheiroProblemaSoluçãoDebateExportação de dados de API com um link de downloadProblemaSoluçãoDebateCarregamento de um ficheiro com Arrastar e LargarProblemaSoluçãoDebate
IntroduçãoFormatar uma dataProblemaSoluçãoDebateObtendo as partes de uma data formatadaProblemaSoluçãoDebateFormatar uma data relativaProblemaSoluçãoDebateFormatação de númerosProblemaSoluçãoDebateArredondamento de casas decimaisProblemaSoluçãoFormatar um intervalo de preçosProblemaSoluçãoDebateFormatação de unidades de medidaProblemaSoluçãoDebateAplicar as regras de pluralizaçãoProblemaSoluçãoDebateContagem de caracteres, palavras e frasesProblemaSoluçãoDebateFormatação de listasProblemaSoluçãoDebateOrdenar uma matriz de nomesProblemaSoluçãoDebate
IntroduçãoCriar um componenteRegistar um elemento personalizadoModelosCaça-níqueisDOM SombraLuz DOMCriar um componente para mostrar a data de hojeProblemaSoluçãoDebateCriar um componente para formatar uma data personalizadaProblemaSoluçãoDebateCriar um componente de feedbackProblemaSoluçãoDebateCriar um componente de cartão de perfilProblemaSoluçãoDebateCriar um componente de imagem de carregamento lentoProblemaSoluçãoDebateCriar um componente de divulgaçãoProblemaSoluçãoDebateCriar um componente de botão com estiloProblemaSoluçãoDebate
IntroduçãoDiálogosDetalhesPopoversNotificaçõesCriar uma caixa de diálogo de alertaProblemaSoluçãoDebateCriar uma caixa de diálogo de confirmaçãoProblemaSoluçãoDebateCriar um componente Web de diálogo de confirmaçãoProblemaSoluçãoDebateUtilizar um elemento de divulgaçãoProblemaSoluçãoDebateMostrar um PopoverProblemaSoluçãoDebateControlar manualmente um PopoverProblemaSoluçãoDebatePosicionando um Popover em relação a um elementoProblemaSoluçãoDebateMostrar uma dica de ferramentaProblemaSoluçãoDebateMostrar uma notaProblemaSoluçãoDebate
IntroduçãoLer o estado da bateriaProblemaSoluçãoDebateLer o estado do Network+ProblemaSoluçãoDebateObter a localização do dispositivoProblemaSoluçãoDebateMostrar a localização do dispositivo num mapaProblemaSoluçãoDebateCopiar e colar textoProblemaSoluçãoDebatePartilhar conteúdo com a API Web ShareProblemaSoluçãoDebateFazer vibrar o dispositivoProblemaSoluçãoDebateObter a orientação do dispositivoProblemaSoluçãoDebate
IntroduçãoMedir o desempenho do carregamento da páginaProblemaSoluçãoDebateMedição do desempenho dos recursosProblemaSoluçãoDebateEncontrar os recursos mais lentosProblemaSoluçãoDebateProcurar horários para um recurso específicoProblemaSoluçãoDebateCriação de perfil do desempenho de renderizaçãoProblemaSoluçãoDebateCriação de perfis de tarefas de várias etapasProblemaSoluçãoDebateEscuta as entradas de desempenhoProblemaSoluçãoDebate
IntroduçãoEstilizar a saída da consolaProblemaSoluçãoDebateUtilização de níveis de registoProblemaSoluçãoDebateCriando registradores nomeadosProblemaSoluçãoDebateExibição de uma matriz de objetos em uma tabelaProblemaSoluçãoDebateUtilizar os temporizadores da consolaProblemaSoluçãoDebateUtilizar grupos de consolasProblemaSoluçãoDebateUtilizar contadoresProblemaSoluçãoDebateRegistrando uma variável e seu valorProblemaSoluçãoDebateRegistar um Stack TraceProblemaSoluçãoDebateValidação de valores esperadosProblemaSoluçãoDebateExaminar as propriedades de um objetoProblemaSoluçãoDebate
IntroduçãoDestacar intervalos de textoProblemaSoluçãoDebateEvitar um flash de texto sem estiloProblemaSoluçãoDebateAnimar transições DOMProblemaSoluçãoDebateModificando folhas de estilo em tempo de execuçãoProblemaSoluçãoDebateDefinindo condicionalmente uma classe CSSProblemaSoluçãoDebateCorrespondência de consultas multimédiaProblemaSoluçãoDebateObter o estilo computado de um elementoProblemaSoluçãoDebate
IntroduçãoGravar o ecrãProblemaSoluçãoDebateCapturar uma imagem da câmara do utilizadorProblemaSoluçãoDebateCapturar um vídeo a partir da câmara do utilizadorProblemaSoluçãoDebateDeterminação das capacidades de media do sistemaProblemaSoluçãoDebateAplicar filtros de vídeoProblemaSoluçãoDebate
IntroduçãoEm defesa das bibliotecas de terceirosDetecta funcionalidades, não versões de browsersPolyfillsOlhando para o futuroAPI Web BluetoothAPI Web NFCAPI do conta-gotasAPI de deteção de código de barrasAPI do armazenamento de cookiesAPIs de pagamentoDescobre o que se segue

Content preview from Livro de receitas da API da Web

Capítulo 14. Integração de dispositivos

Este trabalho foi traduzido com recurso a IA. Agradecemos o teu feedback e comentários: translation-feedback@oreilly.com

Introdução

A plataforma do navegador Web moderno inclui APIs para interagir com todos os tipos de informações e capacidades do dispositivo, incluindo:

Estado da bateria
Estado da rede
Geolocalização
Área de transferência do dispositivo
Partilhar conteúdos
Feedback tátil

No momento em que escrevo, algumas dessas APIs ainda não são bem suportadas. Algumas ainda são consideradas experimentais, pelo queainda não as deves utilizar numa aplicação de produção.

Algumas destas APIs podem ser suportadas por um determinado navegador, como o Chrome, mas mesmo assim não funcionam se o dispositivo não tiver as capacidades necessárias. Por exemplo, a API de vibração é bem suportada pelo Chrome, mas não funciona num computador portátil ou noutro dispositivo sem suporte de vibração.

Ler o estado da bateria

Problema

Pretendes mostrar o estado de carregamento da bateria do dispositivo na tua aplicação.

Solução

Utiliza a API do estado da bateria.

Nota

Esta API pode ainda não ser suportada por todos os browsers. Consulta CanIUse para obteres os dados de compatibilidade mais recentes.

Podes consultar a API do estado da bateria chamando navigator.getBattery. Este método devolve um Promise que resolve para um objeto que contém informações sobre a bateria.

Primeiro, escreve alguns elementos HTML de espaço reservado para manter ...