Blog fellyph cintra - Web Share API

Web Share API Level 2

Recentemente fiz um post sobre Web Share API, um dos motivos foi a inclusão de suporte pela plataforma iOS a API na última versão 12.2. Nesse post vamos abordar alguns updates que estarão presentes na versão 75 do Chrome.

Os recentes updates são relevantes para aplicações web progressivas. No meu canal do YouTube comecei uma série sobre como construir uma PWA, esse post serve como conteúdo complementar.

O que é uma PWA?

Progressive Web Apps – PWA (aplicações web progressivas) são desenvolvidas utilizando APIs modernas para fornecer novos recursos somente disponíveis em aplicações nativas. Recursos como confiabilidade e capacidade de instalação, ao mesmo tempo, estão totalmente disponíveis a qualquer usuário, em qualquer tipo dispositivo com uma única base de código.

Caso queira assistir um vídeo sobre o assunto também publiquei um vídeo no meu canal:

Voltando ao tópico do post, Web Share API level 2 irá facilitar compartilhamento de arquivos entre apps. Agora aplicações web conseguem compartilhar arquivos entre aplicações web definidas na API.

Web share Target API

Permite definir como uma aplicações disponíveis no card de compartilhamento, este recursos está apenas disponível para plataforma Android como podemos ver na imagem a seguir:

Web share api em ação
Web share api em ação

Para habilitar a API precisamos implementar informações extra no nosso manifest.json e preparar a nossa PWA interagir com o conteúdo recebido pelo app. Web Share Target API pode ser assunto que podemos abordar com mais detalhes em outro post.

Novo método canShare()

No post anterior sobre Web Share API utilizamos o “navigator.share()” para verificar se temos suporte a API e compartilhar uma url específica. Mas quando se trata de compartilhar um arquivo é mais complicado, mas agora podemos verificar se o sistema operacional suporta o compartilhamento por arquivo com a função canShare():

const shareData = { files: filesArray };
if (navigator.canShare && navigator.canShare(shareData)) {
  // Compartilhe o conteúdo aqui
} else {
  console.log('Seu sistema operacional não suporta compartilhamento de arquivos');
}
Code language: JavaScript (javascript)

No código acima verificamos se o nosso browser tem suporte a função canShare e na sequência verificamos se OS suporta compartilhamento de arquivos via Web apps. Agora que temos a verificação que podemos compartilhar o nosso arquivo na condicional invocamos o nosso a função navigator.share

if (navigator.canShare && navigator.canShare( { files: filesArray } )) {
  navigator.share({
    files: files,
    title: 'Título do card',
    text: 'descrição do conteúdo',  })
  .then(() => console.log('Conteúdo compartilhado com sucesso'))
  .catch((error) => console.log('Falha no compartilhamento', error));
} else {
  console.log('Seu sistema operacional não suporta compartilhamento de arquivos');
}
Code language: JavaScript (javascript)

Dependendo da aplicação em que você compartilhe o conteúdo, o título e o texto de descrição pode ser exibido ou não. Exemplo aplicativo de email o título e texto serão exibidos. Já aplicações de edição de imagens essas informações serão irrelevantes.

Mais posts sobre Progressive web app confira a página da categoria ou deixe um comentário


Publicado

em

,

por

Comentários

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *