O navigator.share
não tem imagem, no máximo o que você pode fazer (que é bem limitado ainda) é enviar arquivos.
Se observar bem, adicionando um link copiado manualmente em postagens de redes sociais (Facebook, VK, etc), mensageiros (Telegram, WhatsApp, etc) vai notar que eles próprios detectam a(s) imagem(s) de pré-visualização, alguns suportam mais de uma imagem, isso é feito pelos próprias redes sociais, mensageiros e outros tipos de programa (com suporte), de forma independente, eles é quem acessam a página de destino do link e tentam determinar o conteúdo através de web scraping, isso geralmente é feito com o apoio das META-tags OpenGraph vindas da página de destino (explico melhor isso no final).
Como disse no começo, o envio de arquivos via navigator.share
é bastante limitado, isso porque o navigator.canShare()
e o files:
tem suporte parcial no MacOS em navegadores baseados em Chromium (Edge, Chrome, Opera, etc), o files:
também não é suportado pelo Firefox Android, os únicos navegadores com suporte "completo" são:
Suporte para navigator.canShare()
Safari MacOS |
Chrome Android |
Firefox Android |
Safari iOS |
Samsung Internet |
14 |
75 |
96 |
15 |
11 |
Suporte para o parâmetro data.files
Safari MacOS |
Chrome Android |
Safari iOS |
Samsung Internet |
15 |
76 |
15 |
11 |
Um exemplo de uso do navigator.share
+ data.files
:
const arquivos = [];
// pode usar fetch() ou um <canvas>+drawImage para "converter" uma imagem existente (use o arraybuffer)
arquivos.push(new File([arraybuffer], 'foto.jpg', { type: 'image/jpeg' }));
// Testa se os arquivos enviados são suportados
if (navigator.canShare && navigator.canShare({ files: arquivos })) {
navigator.share({
files: arquivos,
title: 'Foo bar baz',
text: 'Foo bar baz etc',
}).then(() => {
console.log('Compartilhado com sucesso');
}).catch((error) => {
console.error('Sharing failed', error)
});
} else {
console.error('Seu navegador não suporta navigator.share');
}
No exemplo acima o arraybuffer
deve ser uma variável, que pode ter sido obtida de um <canvas>
ou com fetch()
(supondo que sua intenção seja compartilhar uma imagem estática existente no servidor).
Isso é o máximo (e bem limitado) que conseguirá com navigator.share
e como já dito, isso não é um "preview".
Resolvendo a pré-visualização
Como já explicado, quem gera a pré-visualização são os aplicativos, programas, rede sociais, etc, aonde o usuário irá postar o link, através do processo de web scraping e para facilitar esse trabalho dos "clientes" (mensageiros, redes sociais, etc) buscarem esses dados, foram desenvolvidas as META-tags OpenGraph, então sem o link compartilhado tiver em sua página uma estrutura semelhante a isso:
<head>
<title>Titulo da página</title>
<meta property="og:title" content="Titulo da página" />
<meta property="og:url" content="https://url completa da página (canonical)" />
<meta property="og:image" content="https://seusite/images/preview.jpg" />
...
</head>
Os "clientes" (mensageiros, redes sociais, etc) irão acessar a página do link e pegarão os valores dessas META-tags para gerar o preview (não só da imagem, mas de outros detalhes que forem pertinentes).
Em resumo, quem gera essas pré-visualizações, na hora de compartilhar, geralmente são as META-tags OpenGraph e na ausência delas um "cliente" poderá tentar contornar (buscando outras imagens) ou ignorar a pré-visualização, isso depende do "cliente", alguns irão tentar compensar buscando conteúdo no corpo da página, já outros não.
É importante notar que dependendo se o site estiver fora dor, lento ou oscilando, os "clientes" podem ignorar essa parte de baixar os dados do OpenGraph, pois problemas de conectividade não podem interferir na entrega de mensagens, o preview é mais uma "perfumaria".