A Web Share API permite enviar links, textos e arquivos para o menu de compartilhamento do sistema operacional. Assim, o usuário escolhe um aplicativo, contato ou outro destino disponível no dispositivo.

Esse recurso elimina integrações separadas para cada rede social. No entanto, o suporte varia entre navegadores e sistemas. Por isso, uma implementação pronta para produção precisa detectar a API e oferecer um fallback.

Como funciona a Web Share API

A API expõe dois métodos no objeto navigator:

• navigator.share() abre o seletor nativo e retorna uma Promise.
• navigator.canShare() verifica se um conjunto específico de dados pode ser compartilhado.

O destino não é controlado pelo site. O navegador e o sistema operacional apresentam as opções disponíveis para o usuário. Além disso, a especificação oficial considera o envio concluído quando entrega os dados ao sistema ou ao destino. Isso não garante que o usuário publicou ou enviou o conteúdo depois.

Requisitos antes de compartilhar

Antes de chamar navigator.share(), confirme estes pontos:

• A página usa HTTPS ou outro contexto considerado seguro.
• A chamada acontece após uma ação do usuário, como um clique.
• O documento está ativo e pode usar a Permissions Policy web-share.
• Os dados possuem um formato aceito pelo navegador e pelo sistema.

Não chame a API durante o carregamento da página. A ativação transitória do usuário impede que sites abram o menu de compartilhamento sem consentimento.

Quando a página roda em um iframe de outra origem, o documento incorporador também precisa permitir o recurso:

<iframe src="https://exemplo.com" allow="web-share"></iframe>Code language: HTML, XML (xml)

Compartilhar texto e links

O exemplo abaixo compartilha o título e a URL atual. A chamada fica dentro do event handler para preservar a ativação do usuário:

<button id="share" type="button">Compartilhar esta página</button>
<p id="share-status" aria-live="polite"></p>Code language: HTML, XML (xml)

const shareButton = document.querySelector('#share');
const status = document.querySelector('#share-status');

shareButton.addEventListener('click', async () => {
  const shareData = {
    title: document.title,
    text: 'Confira este conteúdo sobre compartilhamento nativo',
    url: window.location.href,
  };

  try {
    await navigator.share(shareData);
    status.textContent = 'Conteúdo enviado ao menu de compartilhamento.';
  } catch (error) {
    if (error.name !== 'AbortError') {
      status.textContent = 'Não foi possível abrir o compartilhamento.';
      console.error(error);
    }
  }
});Code language: JavaScript (javascript)

AbortError geralmente indica que o usuário fechou o seletor. Portanto, não trate esse caso como uma falha grave da aplicação.

O título, o texto e a URL podem aparecer de formas diferentes em cada destino. Um aplicativo de email pode usar o título como assunto. Por outro lado, outro aplicativo pode ignorar esse campo.

Compartilhar arquivos pelo navegador

O conteúdo antigo sobre “Level 2” apresentava o compartilhamento de arquivos como uma evolução separada. Hoje, a documentação do MDN reúne texto, links e arquivos na mesma interface.

Para arquivos, use navigator.canShare() com os objetos File reais. O suporte depende do tipo, tamanho, navegador, sistema e destinos instalados.

<label for="files">Selecione imagens</label>
<input id="files" type="file" accept="image/*" multiple>
<button id="share-files" type="button">Compartilhar imagens</button>
<p id="file-status" aria-live="polite"></p>Code language: HTML, XML (xml)

const input = document.querySelector('#files');
const button = document.querySelector('#share-files');
const status = document.querySelector('#file-status');

button.addEventListener('click', async () => {
  const files = [...input.files];
  const filesData = { files };

  if (files.length === 0) {
    status.textContent = 'Selecione pelo menos um arquivo.';
    return;
  }

  if (!navigator.canShare?.(filesData)) {
    status.textContent = 'Este dispositivo não pode compartilhar esses arquivos.';
    return;
  }

  try {
    await navigator.share({
      files,
      title: 'Imagens selecionadas',
      text: 'Arquivos compartilhados pela aplicação web',
    });
    status.textContent = 'Arquivos enviados ao menu de compartilhamento.';
  } catch (error) {
    if (error.name !== 'AbortError') {
      status.textContent = 'O compartilhamento dos arquivos falhou.';
      console.error(error);
    }
  }
});Code language: JavaScript (javascript)

Teste somente membros conhecidos pela interface ShareData. Objetos com propriedades desconhecidas podem produzir uma verificação enganosa, porque o Web IDL ignora esses campos.

Fallback quando navigator.share não existe

O recurso ainda não faz parte do Baseline do MDN, pois não funciona em alguns navegadores amplamente usados. Mesmo quando o método existe, um dispositivo pode não oferecer um destino compatível.

Um fallback simples copia a URL. Se a Clipboard API também não estiver disponível, mantenha um link visível para seleção manual:

<button id="share-or-copy" type="button">Compartilhar</button>
<p id="fallback-status" aria-live="polite"></p>
<input id="page-url" type="url" readonly hidden>Code language: HTML, XML (xml)

const button = document.querySelector('#share-or-copy');
const status = document.querySelector('#fallback-status');
const urlField = document.querySelector('#page-url');

button.addEventListener('click', async () => {
  const url = window.location.href;

  try {
    if (navigator.share) {
      await navigator.share({ title: document.title, url });
      return;
    }

    if (navigator.clipboard?.writeText) {
      await navigator.clipboard.writeText(url);
      status.textContent = 'Link copiado.';
      return;
    }
  } catch (error) {
    if (error.name === 'AbortError') return;
  }

  urlField.value = url;
  urlField.hidden = false;
  urlField.select();
  status.textContent = 'Copie o link exibido.';
});Code language: JavaScript (javascript)

Além do suporte técnico, cuide da acessibilidade. Use um botão com texto claro e uma região aria-live para comunicar o resultado. O compartilhamento deve ser uma melhoria progressiva, não a única forma de acessar ou copiar o conteúdo.

Web Share e Web Share Target são diferentes

A primeira interface envia conteúdo da sua aplicação para um destino escolhido. Já a Web Share Target API permite que uma Progressive Web App instalada apareça como destino no menu do sistema.

Para receber conteúdo, a PWA declara share_target no web app manifest. Em seguida, ela processa os parâmetros enviados para a rota configurada. Arquivos normalmente exigem uma requisição POST com multipart/form-data e tratamento pelo service worker.

Esse é um fluxo mais avançado e não substitui navigator.share(). Antes de implementá-lo, valide o suporte necessário e trate os dados recebidos como entrada não confiável.

Se esse recurso faz parte de uma PWA, confira o guia de aplicações web progressivas e a introdução a service workers.

Checklist para o compartilhamento nativo

Antes de publicar a funcionalidade:

1. Sirva a página por HTTPS.
2. Chame share() diretamente após uma ação do usuário.
3. Use canShare() para validar arquivos e outros dados.
4. Trate o cancelamento sem apresentar uma mensagem de erro alarmante.
5. Ofereça fallback para copiar ou exibir o link.
6. Teste em dispositivos e sistemas reais do seu público.

Com esses cuidados, o compartilhamento nativo vira uma melhoria pequena no código e relevante para a experiência do usuário.