Web Share API

A web share API é uma API do navegador que permite aos usuários compartilhar arquivos e links de forma nativa. Ela foi criada para simplificar o processo de compartilhamento de conteúdo entre os navegadores e as aplicações da web. A API é baseada em Promises, o que significa que ela pode ser facilmente integrada às suas aplicações da web existentes.

Neste artigo, vamos mostrar como utilizar a web share API em progressive web apps. Vamos começar mostrando como verificar se o navegador suporta a API. Em seguida, vamos criar um exemplo de uma aplicação da web que utiliza a API para compartilhar um link.

Por quê é importante compartilhar conteúdo?

Adicionar a possibilidade de dos usuários compartilhar o seu conteúdo em redes sociais ou diretamente para outros usuários. Permitem que as pessoas se conectem, compartilhem as suas opiniões, e nada melhor que uma recomendação direta sobre a sua aplicação.

Aplicações web progressivas estão totalmente acessíveis a um clique e adicionar mais um canal para os seus usuários compartilharem o seu conteúdo com outros usuários é extremamente importante.

Compartilhar conteúdo nas redes sociais pode ajudar a aumentar o alcance do seu conteúdo, bem como aumentar o engajamento e a interação com o seu público. Além disso, compartilhar conteúdo nas redes sociais pode ajudar a construir relacionamentos com outros influenciadores e profissionais de marketing, o que pode levar a mais oportunidades de colaboração e crescimento.

Como utilizar a web share API

Para fazer a chamada no card nativo de compartilhamento chamamos a função navigator.share() no nosso browser, esse método faz parte da Web Share API, ele dá o controle ao usuário de como ele quer compartilhar esse conteúdo. O seu uso é baseado em Promise, o método aceito um objeto com as informações de título, texto de descrição e URL como podemos ver no código abaixo:

if (navigator.share) {
  navigator.share({
      title: 'Blog Fellyph Cintra',
      text: 'Como compartilhar conteúdo com web share API',
      url: 'https://blog.fellyph.com.br/',
  })
    .then(() => console.log('Compartilhamento realizado com sucesso'))
    .catch((error) => console.log('Erro no compartilhamento', error));
}
Code language: JavaScript (javascript)

No exemplo acima, inicialmente utilizamos uma condicional para verificar se o suporte a web share API existe, caso positivo definimos o conteúdo que será compartilhado e adicionamos um then para tomar uma ação caso o compartilhamento seja realizado com sucesso ou catch em caso de error.

Requisitos

Existem alguns critérios importantes para requisitar o card nativos de compartilhamento para isso precisamos seguir alguns requisitos:

• A URL deve ser servida por HTTPS
• O método share deve ser invocado por uma resposta do usuário, por exemplo, um evento de click. Você não pode chamar a share API num evento de page load.
• Você só pode compartilhar um URL no escopo da aplicação.
• Sempre verifique se o usuário tem suporte a esse recurso antes de chamar o método.

Resultado

Na imagem acima temos dois exemplos de como o card de compartilhamento será exibido no Android e iOS. Para a plataforma iOS o recurso está disponível para Chrome e Safari. Vamos finalizamos por aqui caso tenha alguma dúvida só deixar um comentário.

Curso de PWA

Recentemente comecei a postar vídeos sobre PWA no meu canal onde abordo diversos temas, desde assuntos mais básicos até conteúdo mais avançado. O curso atualmente está com mais de 50 aulas, onde falo sobre service worker, cache, conteúdo offline e web app manifest. E claro que web share API também foi assunto no canal.

Confira o vídeo sobre Web Share API no curso de aplicações web progressivas:

A web share api já tem uma atualização para saber mais confira o post sobre a nova versão da Web Share API.