Como desenvolvedores, frequentemente usamos APIs (Application Programming Interfaces) para implementar funcionalidades complexas facilmente ou criá-las para abstrair a complexidade. As APIs permitem que os serviços se comuniquem e façam coisas como postar um tweet ou exibir um mapa.
Podemos classificar as APIs da web em duas categorias para construir aplicativos da web do lado do cliente:
APIs do navegador : são APIs que fazem interface com JavaScript, permitindo que os desenvolvedores implementem funcionalidades facilmente. APIs como DOM, Fetch, Audio and Video, WebGL, Notifications e muito mais APIs de terceiros: você provavelmente já usou uma em seu projeto. Essas são APIs que não são integradas ao navegador por padrão. Eles são fornecidos por empresas como Google, Facebook, Trello, etc. para permitir que você acesse sua funcionalidade via JavaScript e use-a em seu projeto
Estas são algumas APIs comuns que você provavelmente já usou:
Vamos examinar algumas das APIs da Web populares:
API de localização geográfica: esta API permite acesso para recuperar informações de localização do dispositivo host API do modelo de objeto de documento: O DOM é a API para documentos HTML no sentido em que é a interface entre seu programa JavaScript e o documento HTML. O DOM em si tem uma extensa lista de interfaces , como o Documento interface, interface de janela e assim por diante API de histórico: A API de histórico é abstraída na maioria das implementações de roteador. A API permite que você rastreie e modifique o URL do navegador e os dados de histórico, bem como acesse seu histórico de navegação por meio da API JavaScript Canvas: A API Canvas permite que você exiba gráficos visuais diferentes na página usando um elemento
Neste artigo, explorarei algumas de minhas APIs favoritas que fornecem funcionalidade compatível com dispositivos móveis. Isso pode incluir qualquer coisa, desde compartilhamentos de mídia social e operações de área de transferência a funcionalidades de contato, fala e notificações.
5 APIs da web de funcionalidade móvel para seu próximo projeto
Até agora, discutimos algumas APIs comuns que você usou direta ou indiretamente por meio de bibliotecas JavaScript.
Nesta seção, exploraremos cinco APIs exclusivas que você pode precisar em seu próximo projeto. Essas APIs são importantes porque trazem funcionalidades nativas móveis para a web.
API de compartilhamento da Web
Essa API ajuda a implementar a funcionalidade de compartilhamento em seus sites. Dá aquela sensação de compartilhamento nativo móvel. Torna possível compartilhar texto, arquivos e links para outros aplicativos no dispositivo.
A API Web Share pode ser acessada através do método navigator.share:
if (navigator.share) { navigator.share ({title:’Logrocket alert here’, texto:’Check out Logrocket’, url:’
O trecho de código acima exemplifica como compartilhar texto usando o JavaScript vanilla. Uma coisa importante a ser observada é que você só pode invocar essa ação com o evento onclick:
function Share ({label, text, title}) {const shareDetails={title, text}; const handleSharing=async ()=> {if (navigator.share) {try {await navigator.share (shareDetails).then (()=> console.log (“Enviado”)); } catch (error) {console.log (`Ops! Não consegui compartilhar com o mundo porque: $ {error}`); }} else {//código de fallback console.log (“Compartilhamento da Web atualmente não é suportado neste navegador. Forneça um retorno de chamada”); }}; return (); }
O snippet de código acima é um exemplo básico de como usar a API com React para implementar opções de compartilhamento em seu aplicativo. Você pode verificar esta demonstração no CodeSandbox .
NB, a partir de hoje, o Web Share é não é compatível com o navegador Chrome para desktop, mas funciona no navegador Android.
Compartilhe seu código de referência: {{referralCode}} com um amigo e ganhe quando ele se inscrever
Se você estiver trabalhando com o Vue, o snippet de código acima mostra uma implementação básica da API Web Share. Verifique a demonstração completa .
API Contact Picker
A maioria dos aplicativos móveis tendem a solicitar acesso aos seus contatos ou lista telefônica. Esta é outra funcionalidade móvel que também está disponível na web.
Digamos que você esteja implementando um recurso de recarga de tempo de antena para um aplicativo da web fintech. Você deseja que o usuário selecione um contato ou vários contatos. Isso pode ser implementado usando navigator.contacts. Ele aceita dois argumentos: propriedades, uma matriz contendo a propriedade que você deseja acessar e opções:
const props=[‘nome’,’tel’,]; const opts={multiple: true}; função assíncrona getContacts () {try {const contacts=await navigator.contacts.select (props, opts); handleResults (contatos); } catch (ex) {//Trate os erros aqui. }}
Se você estiver trabalhando com o React, poderá implementar o recurso selecionador de contato da seguinte maneira:
exportar função padrão Contact ({label}) {const properties=[“name”,”tel”]; opções const={múltiplo: verdadeiro}; const handleGetContacts=()=> {tente {const contacts=navigator.contacts.select (propriedades, opções); contatos de retorno; } catch (ex) {console.log (ex); }}; return (> ); }
Você pode verificar a demonstração React Contact Picker no CodeSandbox.
Trabalhar com Vue ? Você não fica de fora. É assim que você pode implementar esse recurso com o Vue:
Você pode verificar a demonstração do seletor de contatos para Vue no CodeSandbox .
NB, esta API só funcionará em navegadores móveis.
API da área de transferência
Operações da área de transferência, como copiar, cortar e colar são alguns dos recursos mais comuns em aplicativos móveis. A API da área de transferência permite que um usuário da web acesse a área de transferência do sistema e execute operações básicas da área de transferência.
Anteriormente, você podia interagir com a área de transferência do sistema usando o DOM document.execCommand; algumas bibliotecas ainda usam esse método. No entanto, a moderna Clipboard API assíncrona fornece acesso para ler e gravar o conteúdo da área de transferência diretamente.
Vamos ver como funciona com JavaScript.
Leitura da área de transferência:
navegador.clipboard.readText (). then (clipText=> document.getElementById (“caixa de saída”). innerText=clipText);
Gravando na área de transferência:
function updateClipboard (newClip) {navigator.clipboard.writeText (newClip).then (function () {/* área de transferência definida com sucesso */}, function () {/* área de transferência escrita fracassado */ }); }
Confira esta postagem se você estiver tentando implemente a Clipboard API com React .
Para desenvolvedores do Vue, você pode implementar a cópia do texto com a API assim:
Web Speech API
A maioria dos aplicativos móveis hoje em dia incorpora reconhecimento de voz e recursos de conversão de texto em voz para melhorar a acessibilidade e a experiência do usuário. A API Web Speech traz essas funcionalidades para o navegador. Neste artigo, discutiremos apenas a interface SpeechRecognition.
O reconhecimento de fala pode ser acessado usando a interface SpeechRecognition e faz uso do sistema de reconhecimento de fala padrão do dispositivo:
const SpeechRecognition=SpeechRecognition || webkitSpeechRecognition; reconhecimento const=novo SpeechRecognition ();//novo reconhecimento de objeto SpeechRecognition.continuous=false; reconhecimento.lang=’en-US’; reconhecimento.interimResults=false; reconhecimento.onstart=function () {console.log (“Fale no microfone”); }; reconhecimento.onspeechend=function () {//quando o usuário terminar de falar reconhecimento.stop (); }//Isso é executado quando o serviço de reconhecimento de voz retorna o reconhecimento de resultado.onresult=function (event) {var transcript=event.results [0] [0].transcript; confiança var=event.results [0] [0].confidence; };//inicia o reconhecimento reconhecimento.start ();
Fonte: MDN Speech Recognition
Vamos examinar o snippet de código acima.
Em primeiro lugar, criamos um objeto de reconhecimento de voz atribuindo um novo SpeechRecognition. O objeto SpeechRecognition tem algumas propriedades, como:
reconhecimento.contínuo: escuta um único resultado (palavra ou frase) quando o reconhecimento de fala é iniciado. Se definido como verdadeiro, o serviço speechRecognition continuará ouvindo, a menos que você interrompa o reconhecimento.lang: O reconhecimento de preferência de idioma do usuário.interimResults: Retorna resultados provisórios junto com os resultados finais quando definido como verdadeiro
Além disso, para fazer nosso serviço de reconhecimento de fala funcionar, precisamos fornecer um retorno de chamada para eventos como onstart, onspeechend e onresult.
recognition.onstart: Quando um usuário dispara este evento, o serviço de reconhecimento de fala inicia o reconhecimento.onspeechend: Isso impede o serviço de reconhecimento de voz de executar o reconhecimento.onresult: este evento é disparado assim que um resultado bem-sucedido for recebido
Se você quiser implementar isso no React, vá até este tutorial que mostra como usar o React Speech Recognition Hook para assistência por voz .
API de notificação
O A API de notificação da Web costuma ser trocada pela API Web Push, mas são diferentes. O objetivo da API de notificação é exibir informações para o usuário enquanto a API Push permite que o service worker manipule mensagens push do servidor, mesmo quando o dispositivo está inativo.
Isso agora é amplamente usado por blogs e aplicativos da web para notificar os usuários quando houver uma mudança ou atualização em um serviço. Um caso de uso comum para esta API é quando seu aplicativo é um PWA (aplicativo da web progressivo) e você precisa que o usuário atualize o navegador para obter novas atualizações para o aplicativo.
Para criar uma notificação, o JavaScript tem um construtor de notificação:
const message=’Atualizar para obter novos recursos’; var notification=new Notification (‘Savings PWA app’, {body: text});
Você pode implementar esta API com a estrutura da web desejada.
APIs da web que devem ter amplo suporte no futuro
Até agora, discutimos APIs que trazem essa sensação de celular na web. Uma semelhança com todas essas APIs é que elas são amplamente suportadas por navegadores modernos populares.
Nesta seção, destacarei três APIs que deverão ter amplo suporte entre os navegadores no futuro.
API Screen Wake Lock
A maioria dos aplicativos precisa acessar o status de energia do seu dispositivo. Se você notou, aplicativos móveis como o YouTube irão pausar se sua tela estiver bloqueada; alguns outros aplicativos como o Spotify continuarão em execução mesmo se a tela estiver bloqueada.
Na web, a API Screen Wake Lock permite que o desenvolvedor controle o estado de energia do dispositivo quando o aplicativo da web está em execução. No entanto, ainda não é compatível com os navegadores Firefox, Safari e Opera Mini.
API do dispositivo WebXR
A realidade mista está se tornando popular hoje em dia graças a Pokémon Go e Google Translate. A API do dispositivo WebXR permite que os desenvolvedores criem aplicativos incríveis de realidade mista para a web como a gama de dispositivos que podem suportar XR continua aumentando.
Navegadores como Android, Opera, Safari e Firefox ainda não oferecem suporte a essa API.
API Web NFC
Em dispositivos móveis, o NFC ajuda os usuários a fazer transações seguras e se conectar com outros dispositivos dentro de um determinado raio.
Na web, o NFC da Web permitirá que os sites leiam e gravem em tags NFC quando estiverem em proximidade com o usuário. Até agora, ele é compatível apenas com o Chrome para Android.
Conclusão
Neste artigo, discutimos APIs da Web que adicionam funcionalidade móvel ao seu projeto e algumas outras APIs que deve ter amplo suporte no futuro.
Construir para a web significa construir para todos os tipos de usuários e dispositivos que têm acesso a um navegador da web. É por isso que APIs que imitam funcionalidades móveis estão se tornando essenciais para desenvolvedores da web.
