Clipboard API 提供原生粘贴感，而不只是 Ctrl+V 支持

为什么复制/粘贴模式对 PWA 很重要

用户期望每个应用都参与系统复制/粘贴生态。当一个 PWA 复制内容时，用户本能地在其他应用中按粘贴并期望它能工作。当他们在其他地方复制内容时，期望能粘贴到你的 PWA 中。

Clipboard API 是让这成为可能的东西——不只是对纯文本，还包括图像、HTML 甚至自定义数据格式等富内容。

Clipboard API 与 execCommand 有何不同

旧的 document.execCommand('copy') 方法有严重限制：

• 仅同步，阻塞主线程
• 仅支持纯文本，没有富内容支持
• 需要文本选择和焦点操作
• 操作期间在 DOM 中可见
• 在浏览器中表现不可预测

现代 Clipboard API 修复了所有这些：

• 异步、非阻塞、尊重用户手势要求
• 支持多种 MIME 类型：文本、HTML、图片、自定义格式
• 在没有可见 DOM 操作的情况下工作
• 浏览器行为一致
• 默认安全（HTTPS 要求，需要用户手势）

最重要的是：它提供了异步读取能力，让你能明智地处理富内容，而不仅仅是原始转储。

读取剪贴板内容

异步读取操作给你文本和 MIME 类型信息：

const readClipboard = async () => {
  try {
    const items = await navigator.clipboard.read();
    for (const item of items) {
      if (item.types.includes('text/plain')) {
        const blob = await item.getType('text/plain');
        const text = await blob.text();
        return text;
      }
      if (item.types.includes('text/html')) {
        const blob = await item.getType('text/html');
        const html = await blob.text();
        return html;
      }
      if (item.types.includes('image/png')) {
        const blob = await item.getType('image/png');
        const url = URL.createObjectURL(blob);
        return url;
      }
    }
  } catch (err) {
    console.error('Failed to read clipboard', err);
  }
};

用户手势要求：你必须在用户触发的事件（如点击、点击或按键）中调用 read()。你不能在计时器或后台工作器中轮询剪贴板。

多种 MIME 类型：用户可能一次复制了带有 HTML 格式、纯文本回退和嵌入图片的富内容。处理对你的用例有意义的类型。

写入富剪贴板内容

写入让你能贡献给系统剪贴板生态：

const copyRichContent = async () => {
  const blobText = new Blob(['Plain text'], { type: 'text/plain' });
  const blobHtml = new Blob(['<p>Rich <strong>HTML</strong> content</p>'], { type: 'text/html' });
  const data = [new ClipboardItem({
    'text/plain': blobText,
    'text/html': blobHtml
  })];
  await navigator.clipboard.write(data);
};

提供回退：始终在任何富格式旁边包含 text/plain。不是每个应用都能处理 HTML 或自定义 MIME 类型。

清理资源：如果你使用 Blob 对象，它们会保留在内存中直到垃圾回收。对于长时间运行的操作或高频复制操作，谨慎管理这一点。

PWA 特定的剪贴板用例

内容编辑器集成：当用户从你的 PWA 复制内容并粘贴到 Word、Google Docs 或富邮件编辑器中时，保留格式。当他们从其他地方粘贴到你的编辑器时，理解你得到的东西。

重图像工作流：用户频繁复制截图、编辑照片或生成图形。支持图像粘贴，而不需要中间步骤保存到磁盘然后上传。

数据导入/导出：智能启动表单可以检测用户何时从另一个应用复制了结构化数据（如 CSV 文本或 JSON）并自动解析，而不是要求上传导航。

URL 分享：当用户从你的 PWA 复制 URL 时，确保它们是干净、可共享的链接。当他们将 URL 粘贴到你的 PWA 时，适当检测和解析它们。

权限和信任考虑

剪贴板读取是一个敏感操作：

需要 HTTPS：Clipboard API 只在 HTTPS 上工作。这防止不安全的源窥探剪贴板数据。

需要用户手势：浏览器要求读取请求作为用户交互的响应。这防止可能损害隐私的静默剪贴板轮询。

权限提示：某些浏览器可能在站点首次读取剪贴板时显示权限提示。此页面授予或拒绝每个源的访问。

焦点感知：浏览器安全模型可能会在你的 PWA 不是焦点或活动选项卡时限制剪贴板访问。

浏览器支持和兜底策略

Clipboard API 在 Chrome、Edge、Firefox 和 Safari 中有强支持。

读取操作的兜底：如果你需要支持较旧的浏览器，使用传统 document.execCommand('paste') 方法包装在功能检测中。这只适用于文本，并且有浏览器特定的怪癖。

写入操作的兜底：document.execCommand('copy') 被更广泛支持，并且无需异步工作。将其用作旧环境的兜底。

功能检测模式：

const writeToClipboardModern = async (text) => {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch (err) {
    console.warn('Modern clipboard API failed, falling back', err);
  }
  try {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    textarea.style.position = 'fixed';
    textarea.style.opacity = '0';
    document.body.appendChild(textarea);
    textarea.select();
    const success = document.execCommand('copy');
    document.body.removeChild(textarea);
    return success;
  } catch (fallbackErr) {
    console.error('Clipboard write completely failed', fallbackErr);
    return false;
  }
};

剪贴板集成检查清单

在 PWA 中上线剪贴板集成功能之前：

• [ ] 所有剪贴板操作都包装在用户手势处理程序中
• [ ] 功能检测包括旧浏览器的兜底路径
• [ ] 富内容包括兼容性的 text/plain 回退
• [ ] 图像剪贴板操作包括格式检测
• [ ] 剪贴板读取操作在空剪贴板状态下正确处理
• [ ] 错误消息区分用户手势失败和实际错误
• [ ] 与外部应用（不只是你自己的）测试复制/粘贴流程
• [ ] 验证剪贴板状态尊重 HTTPS 要求
• [ ] 确认不支持时优雅处理自定义 MIME 类型
• [ ] 记录哪些剪贴板功能是您的功能的依赖

这对 PWA UX 意味着什么

剪贴板集成在重要之前一直不可见：

当它工作时：用户没注意到任何特别的东西。他们只是从你的应用复制，在其他地方粘贴，它工作。他们将到你的应用，它工作。

当它不工作时：用户立即感知到摩擦。"我刚才复制了那个图片，为什么不能粘贴？"成为挫败点。

"感觉原生的 PWA"和"感觉像网站的 PWA"之间的区别往往归结于用户从未提及的这些微妙集成点——他们只是期望它们能工作。

下一步

1. 审计你的 PWA 中当前使用传统方法的复制/粘贴交互
2. 识别有价值的读取富内容用例（图像、HTML、自定义数据）
3. 实现有适当回退的多格式写入操作
4. 在不同源和目标应用之间测试剪贴板流程
5. 监控剪贴板相关用户错误以识别不支持的场景

Clipboard API 是 PWA 参与用户依赖的跨应用自动化的方式。它不花哨，但它是我从这里复制时应该能粘贴到那里这一期望的基础。