Web Share API

Blog fellyph cintra - introducao web share api blog fellyph

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.

dicas para se trabalhar com a web share api

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

Comparação entre a web share api no iOS e Android

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:

Tutorial como utilizar Web share API

A web share api já tem uma atualização para saber mais confira o post sobre sua nova versão.

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.