navigator.share 文件在 iOS 14 Safari 上不起作用

Question

我正在尝试向我的网页添加一个使用 Web Share API 共享图像和视频的选项。在测试它时，我遇到以下问题：在 Android + Chrome 上，它可以共享视频和图像，但是当我在 iOS 14.4 Safari（在 iPhone 6s 上运行）上执行相同的代码时，我只能得到文本和 URL 共享，不是文件。有人有同样的问题吗？基于此，它应该可以工作：https://caniuse.com/web-share

https://jsfiddle.net/ryb0x537/

问候。

<div id="error"></div>
<form method="POST" action="/share/">
  <table>
    <tr>
      <td><label for="shared_title">Title:</label></td>
      <td><input id="shared_title" name="shared_title" value="Example Title"></td>
    </tr>
    <tr>
      <td><label for="shared_text">Text:</label></td>
      <td><input id="shared_text" name="shared_text" value="Example text"></td>
    </tr>
    <tr>
      <td><label for="shared_url">URL:</label></td>
      <td><input id="shared_url" name="shared_url" value="https://example.com/a?b=c"></td>
    </tr>
    <tr>
      <td><label for="shared_file">File(s):</label></td>
      <td><input id="shared_file" name="shared_file" type="file" multiple></td>
    </tr>
  </table>
  <input type="submit" value="Share">
</form>
<script>
document.querySelector('form').onsubmit = () => {
  const error = document.getElementById('error');
  const title = document.getElementById('shared_title').value;
  const text = document.getElementById('shared_text').value;
  const url = document.getElementById('shared_url').value;
  const files = document.getElementById('shared_file').files;

  let data = {};
  if (files.length > 0) {
    data.files = files;
  }
  if (title !== '')
    data.title = title;
  if (text !== '')
    data.text = text;
  if (url !== '')
    data.url = url;

  error.textContent = '';
  navigator.share(data)
    .then(() => {
  })
    .catch((err) => {
    console.log('Unsuccessful share');
    error.textContent = 'Share failed: ' + err.message;
  });

  return false;
};
</script>

Answer 1

Safari 似乎在处理文件对象和阻塞方面存在问题（抛出 TypeError）。我可以通过使用转换为文件的 blob 来让它工作：

const blob = await fetch('https://cdn.glitch.com/f96f78ec-d35d-447b-acf4-86f2b3658491%2Fchuck.png?v=1618311092497').then(r=>r.blob())

const share = async (title, text, blob) => {
  const data = {
    files: [
      new File([blob], 'image.png', {
        type: blob.type,
      }),
    ],
    title: title,
    text: text,
  };
  try {
    if (!(navigator.canShare(data))) {
      throw new Error('Can\'t share data.', data);
    };
    await navigator.share(data);
  } catch (err) {
    console.error(err.name, err.message);
  }
};