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 ou PWAs. Em meu canal do Youtube comecei uma série sobre como construir uma PWA, esse post serve como conteúdo complementar, caso queira saber mais sobre PWA assine 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 Web Share Target 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:

Para habilitar Web Share target API precisamos implementar informações extra em nosso manifest.json e preparar 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');
}

No código acima verificamos se o nosso browser tem suporte a função canShare e na sequência verificamos se o OS suporta compartilhamento de arquivos via Web apps. Agora que temos a verificação que podemos compartilhar nosso arquivo dentro da condicional invocamos 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');
}

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 aplicativos de email o título e texto serão exibidos. Já aplicações de edição de images essas informações serão irrelevantes.

Deixe um comentário

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