A plataforma da web permaneceu atraente para desenvolvedores de software, proprietários de produtos e partes interessadas por causa de seu alcance e acesso universal. Aplicativos da web poderosos funcionam em qualquer lugar, independentemente do tipo de dispositivo ou sistema operacional. Agora, quando combinados com o molho PWA, os aplicativos da web obtêm os benefícios adicionais do acesso offline, junto com outros recursos que antes só eram possíveis em plataformas nativas.
Apesar do fato de que os PWAs já percorreram um longo caminho desde que foram popularizados pelo Google em 2015, ainda há um longo caminho a percorrer. A fim de preencher continuamente a lacuna entre o que é possível na web e o que é nativo, Google, Microsoft, Intel e algumas outras corporações se uniram para iniciar, “The Web Capabilities Project” ou o que é comumente conhecido como Projeto Fugu , com um objetivo:
Os aplicativos da web devem ser capazes de fazer tudo que os aplicativos nativos podem
Neste artigo, aprenderemos sobre cinco novas APIs que foram enviadas recentemente do Project Fugu para ajudar os desenvolvedores a criar aplicativos completos na web.
API de contato
A API de contato dá acesso à lista de contatos de um usuário, (com a permissão deles, é claro) da forma como os aplicativos nativos fazem. Por exemplo, vamos supor que você esteja construindo um aplicativo da web que ajuda as pessoas a criar mensagens aleatórias para seus amigos.
Anteriormente, se você desejasse enviar uma mensagem gerada em um aplicativo da web para um membro da sua lista de contatos, você teria que copiar a mensagem, alternar telas para ir para o seu contato telefônico, selecionar o contato alvo, tocar para enviar um mensagem, cole o texto e envie. Com a nova API de contato, agora você pode adicionar a opção de permitir que os usuários selecionem automaticamente um contato de sua lista de contatos para enviar a mensagem gerada, em vez de copiá-la manualmente, procurar o contato de recebimento, colar e enviar.
Com a API de contato, não há necessidade de alternar telas. Os desenvolvedores de aplicativos podem adicionar a opção de selecionar o contato direto de seu aplicativo. Você não terá que copiar e colar e não precisará trocar de aplicativo.
Algumas coisas que você deve saber sobre esta API:
- Ele só pode ser acessado por meio de contexto seguro (ou seja, https) ou localhost para teste
- Ele está disponível no Chrome 80 e superior
- Atualmente funciona apenas em Android e requer pelo menos Android M (6.0.1)
- Foi desenvolvido com a segurança em mente para garantir que o navegador compartilhe apenas o que o usuário escolheu
- Ele só pode ser acionado por meio de um gesto, como um clique ou toque, para garantir que os sites não mostrem o seletor aleatoriamente sem qualquer contexto
- Não há opção de seleção em massa ou selecionar tudo
Para começar a usar a API de contato:
const sendMessage=async ()=> { const isSupported=('contatos'no navegador &&'ContactsManager'na janela); const availableProperties=await navigator.contacts.getProperties (); if (isSupported && availableProperties.includes ('tel')) { tentar{ const props=['nome','tel',]; const opts={multiple: true}; contatos const=espera navigator.contacts.select (adereços, opts); functionToSendMessageToSelectedContacts (contatos); }pega{ //lidar com quaisquer erros } }senão{ alert ('API de contatos não é compatível com este navegador, copie e cole a mensagem em vez disso') }
}
O método navigator.contacts.getProperties retorna uma promessa que resolve uma série de strings contendo propriedades de contato suportadas por um navegador específico, como ( nome , e-mail , tel , endereço , ícone ). navigator.contacts.select faz duas coisas-quando chamado, ele retorna uma promessa e exibe o seletor de contato para permitir que o usuário selecione o (s) contato (s) que deseja compartilhar com o site. Depois de selecionar os contatos a serem compartilhados e clicar em Concluído , a promessa é resolvida com uma série de contatos selecionados pelo usuário. Ele aceita dois argumentos-uma matriz de propriedades que deve ser retornada para cada contato e um indicador múltiplo para especificar se vários contatos podem ser selecionados ou não.
Para ver a API de contato em ação, verifique este aplicativo de demonstração .
API Web Share Target
A primeira versão do Web Share A API , que foi lançada no Chrome 61 para Android, permite que sites compartilhem dados textuais com qualquer destino compatível selecionado pelo usuário, usando os recursos de compartilhamento nativos de seus dispositivos. Isso é possível por meio do método navigator.share () , que aceita um objeto que contém uma propriedade url e/ou text com uma propriedade title opcional:
shareButton.addEventListener ("click", async ()=> { if (navigator.share) { tentar { aguarde navigator.share ({ título:"5 cartas de notícias para desenvolvedores para ajudá-lo a crescer como um desenvolvedor front-end", url:"https://www.codewithlinda.com/blog/developer-newsletters-to-help-you-grow/", texto:"Descubra 5 novos boletins informativos que o ajudarão a crescer em sua carreira"
}); console.log ("Os dados foram compartilhados com sucesso"); } catch (errar) { console.error ("Falha no compartilhamento:", err.message); } }senão{ console.log ("Compartilhamento não suportado") }
});
Como qualquer outra API sensível, o método de compartilhamento só pode ser acionado por meio de um gesto para evitar abusos. Quando um usuário clica no botão de compartilhamento, o método navigator.share () é chamado, aciona o seletor de destino de compartilhamento de dispositivo do usuário para aparecer e retorna uma promessa que é resolvida quando o usuário seleciona um aplicativo para compartilhar com.
Depois de um tempo, uma adição foi feita à API Web Share para permitir o compartilhamento de arquivos junto com o texto, por meio de uma propriedade files adicionada que aceita uma variedade de arquivos a serem compartilhados. Esta adição foi marcada como a API Web Share Nível 2 e foi enviada para o Chrome 75 e superior no Android:
if (navigator.canShare && navigator.canShare ({files: [... files]})) { tentar{ aguarde navigator.share ({ arquivos: [... arquivos], título:'Imagens', texto:'Nossas imagens.', }) console.log ('Compartilhamento bem-sucedido.') } catch (erro) { console.log ('Falha no compartilhamento', erro) }
} senão { console.log (`Seu sistema não suporta compartilhamento de arquivos`);
}
O método navigator.canShare () verifica se os arquivos pretendidos podem ser compartilhados pelo navegador.
No momento em que escrevo este artigo, Chrome não oferece suporte ao compartilhamento de arquivos PDF (consulte as extensões de tipo de arquivo permitidas para o Chrome).
Observe que os arquivos passados para a propriedade arquivos devem estar na forma de Objetos de arquivo JavaScript , como o que é recuperado de .
Aqui está uma demonstração do API de compartilhamento da Web de nível 1 e 2 em ação. Além disso, consulte a tabela de suporte do navegador atual aqui .
Isso não é tudo, para elevar o nível de compartilhamento na web, a API Web Target de nível 1 e 2 foram lançadas no Chrome 71 e Chrome 75 no Android. A API Web Target Share permite que os PWAs instalados estejam na extremidade receptora do compartilhamento. Agora, em vez de apenas fornecer conteúdo a ser compartilhado, os PWAs instalados também podem receber conteúdo compartilhado.
Para fazer isso, primeiro você precisa registrar seu aplicativo como um alvo de compartilhamento em seu arquivo de manifesto:
//No manifest.json
{ "share_target": { "action":"share.html", "params": { "nome do título", "texto":"descrição", "url":"link" } }
}
A propriedade action especifica o URL para lidar com o conteúdo compartilhado em seu PWA. Como você decide lidar com o compartilhamento de entrada dados depende de você e do que seu aplicativo faz.
Para ver a API Web Share Target em ação, verifique este aplicativo de demonstração . Para suporte ao navegador, a API Web Share Target é (no momento da redação deste artigo) compatível com o Chrome e Edge 76 ou posterior no Android e Chrome 89 ou posterior no Chrome OS.
API de atalhos do aplicativo
Se você pressionar longamente o ícone de um aplicativo em seu aparelho celular, uma lista de atalhos será exibida. Por exemplo, se você pressionar longamente o ícone do iniciador do Instagram em seu dispositivo, um painel que lista Câmera, Nova postagem, Atividade e Bate-papos aparecerá.
Isso é exatamente o que A API App Shortcuts , lançada no Chrome 84 para Android e Chrome 85 para Windows, serve para PWAs. Os desenvolvedores agora podem fornecer acesso rápido a ações comuns que os usuários executam com frequência em seus aplicativos. A presença de atalhos de aplicativos foi sugerida para aumentar a produtividade dos usuários, bem como aumentar seus níveis de envolvimento com o aplicativo da web.
Para adicionar atalhos de aplicativos ao seu PWA, adicione uma entrada de atalhos ao arquivo de manifesto. Por exemplo, se você estiver criando um aplicativo da web de investimento em ações, seus atalhos podem incluir “Comprar ações”, “Vender ações” e “Depositar fundos”:
//no manifest.json "atalhos": [ { "name":"Compre Ações", "url":"/buy-shares? utm_source=homescreen", }, { "name":"Vender Ações", "url":"/sell-shares? utm_source=homescreen", }, { "nome":"Fundos de depósito", "url":"/deposit-funds? utm_source=homescreen", },
]
A entrada do manifesto atalhos é uma matriz de objetos que contém informações para atalhos individuais. Cada objeto de atalho deve ter uma propriedade name e url com ou sem short-name , descrição e
Algumas coisas que você deve saber sobre esta API:
- Funciona apenas para PWAs que foram instalados no dispositivo do usuário
- O menu de atalho do aplicativo é acionado por meio de gestos específicos da plataforma. Para Android, pressione e segure o aplicativo, para Windows, clique com o botão direito do mouse no ícone do aplicativo na barra de tarefas
Use este link para visualizar o suporte do navegador atual . Para ver os atalhos do aplicativo em ação, consulte este aplicativo de demonstração .
API de emblemas
Você provavelmente já viu esses números exibidos no canto superior direito dos ícones do aplicativo em seu telefone ou área de trabalho, indicando quantas mensagens não lidas, notificações ou atualizações existem no aplicativo. Eles geralmente servem como dicas visuais para fazer com que os usuários abram o aplicativo e vejam o que está esperando, o que aumenta o engajamento. A boa notícia é que, com a nova Badging API, agora você pode adicionar a mesma funcionalidade aos seus PWAs.
A Badging API fornece dois métodos- navigator.setAppBadge e navigator.clearAppBadge . O método navigator.setAppBadge (value) define o valor do emblema para o valor do argumento value passado a ele, enquanto o navigator.clearAppBadge () remove o emblema do aplicativo:
if ("setAppBadge"no navegador &&"clearAppBadge"no navegador) { tentar{ aguarde navigator.setAppBadge (badgeCount) } catch (erro) { //trate os erros aqui }
}
A forma como você decide implementar o selo em seu PWA realmente depende de você e do que deseja alcançar com seu aplicativo.
No momento em que este artigo foi escrito, a Badging API não funcionava no celular, mas atualmente funciona no Windows e macOS, no Chrome 81 e no Edge 84 ou posterior. Consulte a tabela de suporte do navegador atual aqui .
Para ver a Badging API em ação, visite este aplicativo de demonstração .
API Screen Wake Lock
Dependendo das configurações definidas pelo usuário de um dispositivo, é provável que um dispositivo entre no modo de espera após alguns minutos de inatividade ou de não receber nenhum gesto do usuário, como um clique ou toque. Esse comportamento pode ser frustrante, especialmente quando você está usando aplicativos de experiência virtual que exigem que você apenas assista ou observe sem nenhuma interação. Você terá que tocar ou tocar na tela em intervalos para evitar que a tela fique escura e, eventualmente, apague. Exemplos de tais aplicativos são um aplicativo de tour virtual, um aplicativo de apresentação ou um aplicativo de receita de acompanhamento.
A capacidade de impedir que as telas entrem no modo de espera só está disponível para aplicativos nativos. Antes da API Screen Wake Lock , os desenvolvedores da web tinham que recorrer a hackers, segurança soluções alternativas propensas e que consomem muita energia para atingir esse comportamento.
Para ativar um bloqueio de tela:
deixe wakelock=null;
const requestWakeLock=async ()=> { if ('wakeLock'no navegador) { tentar { wakeLock=await navigator.wakeLock.request (); catch (err) { console.error (`$ {err.name}, $ {err.message}`); } }
}
Ao contrário das APIs anteriores, esta API não requer que os gestos do usuário sejam ativados. O método navigator.wakeLock.request () é usado para solicitar um bloqueio de ativação da tela. Ele retorna uma promessa que resolve para um objeto WakeLockSentinel se a solicitação foi bem-sucedida. A variável wakelock é usada para manter uma referência ao objeto WakeLockSentinel , já que você pode precisar acessar alguns de seus métodos e propriedades posteriormente.
Para preservar a vida útil da bateria, é aconselhável liberar o bloqueio de tela após cumprir seu propósito. Por exemplo, no caso do aplicativo de tour virtual, o bloqueio de tela deve ser liberado ao final do tour. Isso pode ser feito usando o método release do objeto WakeLockSentinel :
wakeLock.release (); wakeLock=null;
Libere o bloqueio de tela e também a referência ao objeto WakeLockSentinel existente, definindo a variável wakeLock de volta para nulo.
De acordo com o ciclo de vida da API Screen Wake Lock, quando uma página ou janela com um bloqueio de tela ativo é minimizada ou trocada, o bloqueio de ativação da tela é automaticamente liberado. Para readquirir o bloqueio de ativação da tela, ouça o visibilitychange :
const handleVisibilityChange=async ()=> { if (wakeLock!==null && document.visibilityState==='visible') { aguardar requestWakeLock (); }
}; document.addEventListener ('visibilitychange', handleVisibilityChange);
Primeiro, verifique se há uma referência de objeto WakeLockSentinel existente e se a página está visível para garantir que somente readquiriremos o bloqueio de ativação da tela quando a página ou janela de destino ficar ativa novamente.
Para ver a aparência do objeto WakeLockSentinel , você pode executar await navigator.wakeLock.request () no console do seu navegador.
Para ver a API Screen Wake Lock em ação, confira este aplicativo de demonstração da web Consulte a tabela de suporte do navegador atual aqui .
Conclusão
Neste artigo, você foi apresentado a cinco APIs empolgantes que o ajudarão a criar PWAs com melhores recursos. Agora, vá construir algo ótimo!
A postagem Projeto Fugu: 5 novas APIs para experimentar em seu PWA apareceram primeiro no LogRocket Blog .
