如何用Web Share API实现原生分享功能？

navigator.share()

title

text

url

files

const shareData = {
  title: document.title,
  text: '快来看看这个超棒的内容！',
  url: window.location.href,
};

async function shareContent() {
  // 先判断浏览器是否支持Web Share API
  if (navigator.share) {
    try {
      await navigator.share(shareData);
      console.log('内容分享成功！');
      // 分享成功后，你可能想做一些用户反馈，比如弹个toast
    } catch (error) {
      // 处理分享失败或用户取消的情况
      if (error.name === 'AbortError') {
        console.log('用户取消了分享。');
      } else {
        console.error('分享失败:', error);
        // 对于非用户取消的错误，可以考虑提供一个备用分享方案
      }
    }
  } else {
    // 浏览器不支持，提供一个备用方案
    alert('抱歉，您的浏览器不支持原生分享功能。您可以手动复制链接分享。');
    // 也可以弹出一个自定义的分享弹窗，里面包含常见的社交媒体链接
  }
}

// 假设你有一个按钮来触发分享
document.getElementById('shareButton').addEventListener('click', shareContent);

navigator.share()

navigator.share

if (navigator.share)

navigator.share()

title

text

url

files

try...catch

navigator.share()

navigator.share()

async/await

try...catch

catch

DOMException

name

async function shareRobustly(shareData) {
  if (navigator.share) {
    try {
      await navigator.share(shareData);
      // 分享成功，可以给用户一个轻量级的成功提示
      showToast('内容已成功分享！');
    } catch (error) {
      if (error.name === 'AbortError') {
        console.log('用户取消了分享，这很正常。');
        // 不需要给用户提示，保持静默
      } else if (error.name === 'NotAllowedError' || error.name === 'SecurityError') {
        console.error('分享被阻止：', error.message);
        showToast('分享功能受限，请确保在安全环境下操作并由用户手势触发。');
      } else if (error.name === 'TypeError') {
        console.error('分享数据格式错误：', error.message);
        showToast('分享内容格式不正确，请稍后再试。');
      } else {
        console.error('未知分享错误：', error);
        showToast('分享失败，请检查网络或稍后再试。');
      }
      // 无论哪种失败，都可以考虑提供一个备用方案
      fallbackShare(shareData);
    }
  } else {
    // 浏览器不支持，直接走备用方案
    fallbackShare(shareData);
  }
}

function showToast(message) {
  // 实际项目中可以实现一个漂亮的toast提示
  alert(message);
}

function fallbackShare(shareData) {
  // 备用方案：比如弹出一个自定义的分享弹窗，里面有复制链接按钮
  // 或者直接复制链接到剪贴板
  navigator.clipboard.writeText(shareData.url || shareData.text)
    .then(() => showToast('您的浏览器不支持原生分享，链接已复制到剪贴板。'))
    .catch(err => console.error('复制失败:', err));
  // 或者打开一个新的窗口，跳转到一些社交媒体的分享页面
  // window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(shareData.text)}&url=${encodeURIComponent(shareData.url)}`);
}

// 再次绑定到按钮
document.getElementById('shareButton').addEventListener('click', () => shareRobustly(shareData));

AbortError

navigator.share()

files

File

<img>

src

Blob

File

fetch

canvas.toBlob()

async function shareImageFile() {
  if (navigator.share && navigator.canShare && navigator.canShare({ files: [new File([], 'test.png', { type: 'image/png' })] })) {
    try {
      // 假设我们有一个canvas元素，并从中获取图片blob
      const canvas = document.getElementById('myCanvas');
      const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));

      // 创建一个File对象
      const file = new File([blob], 'my_drawing.png', { type: 'image/png' });

      await navigator.share({
        files: [file],
        title: '我的涂鸦',
        text: '看看我画的这张图！',
      });
      console.log('图片分享成功！');
    } catch (error) {
      console.error('图片分享失败:', error);
      if (error.name === 'AbortError') {
        console.log('用户取消了图片分享。');
      } else {
        alert('分享图片失败，请稍后再试。');
      }
    }
  } else {
    alert('抱歉，您的浏览器不支持文件分享，或无法分享此类型文件。');
    // 提供备用方案，比如下载图片
    downloadFile('my_drawing.png');
  }
}

function downloadFile(filename) {
  // 实际的下载逻辑
  console.log(`下载文件: ${filename}`);
}

// 假设有一个按钮来触发图片分享
document.getElementById('shareImageButton').addEventListener('click', shareImageFile);

navigator.canShare()

navigator.share()

files

text

url

true

false

share()

catch

canShare()

share()

navigator.share