Acessando o "compartilhar" nativo, vulgo Web-Share, em VanillaJS e Vue

Nessa semana estive trabalhando em uma demanda simples de um cliente Freela.

O projeto consiste em um daqueles formulários interativos que você responde X perguntas e tem um resultado no final, vulgo, um Quiz.

A ideia é que o resultado fosse compartilhado no Insta com a hashtag de uma campanha para que o usuário pudesse participar de uma promoção.

Meu desafio em si foi descobrir como fazer um botão "compartilhar" desses. O Facebook tem um "widget" que é só copiar, colar e pronto. Não encontrei nada similar para o Insta...

Foi então que me veio na cabeça a ideia de tentar utilizar a UI nativa do smartphone do usuário. Afinal, cada usuário já está acostumado a utilizar essa interface em inúmeras operações de compartilhar que são feitas todos os dias.

📖 Parti para a pesquisa e encontrei a tal da API do Web Share.

Segundo a documentação do MDN, até o presente momento, o suporte ainda é parcial, mas nos pareceu uma solução bastante viável dado o nosso público-alvo.

Existem ainda algumas restrições adicionais como:

• O site precisa ser acessado via HTTPS
• O recurso precisa ser invocado por uma ação direta do usuário

HTTPs é super fácil com o Let's Encrypt 🙌 e, de fato, queríamos que o usuário clicasse em "compartilhar" para poder enviar nossa imagem, então, até aqui, tudo certo!

Antes de seguir, criei uma funçãozinha para não ter que ficar copiando e colando toda hora (Let's keep it DRY 😜):

Com a função no jeito, vamos começar a brincadeira compartilhando um link só para esquentar os motores:

Naturalmente que, no Insta, faz mais sentido compartilhar uma imagem. Portanto precisamos passar a utilizar a propriedade files que espera um array de File.

O primeiro exemplo que encontrei para gerar esse array, foi o de simplesmente ler o resultado de um determinado input:

⚠️ OBS: Inicialmente tentei ativar o WebShare no evento change do input, mas nem sempre isso foi considerado um "user gesture", por isso precisei adicionar o botão. Se tiver interesse em validações bem detalhadas e outros possíveis cenários, da uma conferida nesse exemplo da W3C.

Funciona até que legal, mas a minha imagem estava em um servidor e não no dispositivo do usuário...

De certa forma, eu precisava converter uma URL em um File, o que (para a minha surpresa) pode ser feito facilmente utilizando o fetch:

Depois que consegui organizar minha lógica foi hora de levar isso para o Vue, que é o framework utilizado no projeto.

Para isso, optei por utilizar uma biblioteca chamada VueUse que, dentre outras coisas, leva a reatividade para o shareObj de uma forma bem interessante.

Daí para frente foi só git commit, git push e npm run build 🥳