在 IOS 上的 PWA 中与 navigator.share 共享文件答案

【问题标题】：Share files with navigator.share in PWA on IOS在 IOS 上的 PWA 中与 navigator.share 共享文件
【发布时间】：2020-09-25 06:04:15
【问题描述】：

附加的代码在 Android 上完美运行，即使是旧版本，也不能在 IOS 上运行（在 Safari 13 上测试）。如果您尝试在 Whatsapp 上分享，在 android 上它也会分享照片，在 iphone 上只有文字。我哪里错了？代码笔：https://codepen.io/michitkt/pen/YzqBbxo

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
</head><body>
<button disabled="disabled">click me</button>
<div class="result"></div>
<script>

fetch('https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/F-15C_53FS_36FW_Aviano_1993.jpeg/1920px-F-15C_53FS_36FW_Aviano_1993.jpeg')
    .then(function(response) {
        console.log("response",response);
        response.blob().then(function(myBlob) {
            console.log("blob",myBlob);
            var file = new File([myBlob], "test.jpg", {type: 'image/jpeg'});
            //alert("file: "+file.name+", size "+file.size);
            productFilesArray = [file];
            console.log("array file",productFilesArray);
            btn.removeAttribute("disabled");
        });
    });

const btn = document.querySelector('button');
const result = document.querySelector('.result');

btn.addEventListener('click', async () => {
    if (navigator.share) {
        try {
            await navigator.share({
                title: 'Sharing',
                text: 'Learn web development on MDN!',
                url: 'https://developer.mozilla.org',
                files: productFilesArray
            })
            result.textContent = 'Starting sharing';
        } catch(err) {
            result.textContent = 'Error: ' + err;
        }
    } else {
        result.textContent = 'You can\'t share';
    }
});
</script>
</body>
</html>

【问题讨论】：

我不确定，但我认为这个示例使用了只有 chrome 75+ 支持的 web 共享 api 级别 2。

标签： ios share progressive-web-apps

【解决方案1】：

每个人都有BUGS！

您的代码很好。只需删除除 {files:...} 之外的所有内容。然后砰！

以下是为您准备的代码 sn-p。

if (navigator.share) {
    try {
        await navigator.share({
            files: productFilesArray
        })
        result.textContent = 'Starting sharing';
    } catch(err) {
        result.textContent = 'Error: ' + err;
    }
} else {
    result.textContent = 'You can\'t share';
}

【讨论】：

我需要给文件添加一个链接，我无法从代码中删除它
明白了，最近我发现了这个错误/问题，然后做了一些实验，得到了我的在线服务的解决方案。如果您能找到任何解决方法来为您包含链接，您可能可以尝试更多的实验。我的理论是，WhatsApp 仅来自外部来源的一个（1）/单个项目。就像wa.me/?text=blahblah 的工作方式一样。这就是为什么如果您只包含文件，那么它会接受来自外部源的文件。

【解决方案2】：

// is file share supported
if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator.share({
    files: filesArray,
    title: 'Vacation Pictures',
    text: 'Photos from September 27 to October 14.',
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
} else {
  console.log(`Your system doesn't support sharing files.`);
}

自 2021 年初起，使用 API 共享标题、文本和 URL 的支持者有：

macOS 和 iOS 上的 Safari 12 或更高版本。
Android 上的 Chrome 75 或更高版本，Chrome 操作系统和 Windows 上的 89 或更高版本。

使用 API 共享文件 支持：

macOS 和 iOS 上的 Safari 15 或更高版本。
Android 上的 Chrome 75 或更高版本，Chrome OS 和 Windows 上的 89 或更高版本。（大多数基于 Chromium 的浏览器，如 Edge，与相应版本的 Chrome 一样支持此功能。）

【讨论】：

是的，但是用文本和 url 共享文件是个问题。现在可以用了吗？
你的问题很清楚，在safari 13中无法使用这个功能。我分享了如何检测和处理这种情况。在 IOS 15 (15-10-2021) 中无法共享带有文本和 url 的文件。如果您想在 Safari 15 中使用此功能，Sharif 的回答是正确的。但是，您只能共享文件（没有 text/tile/url）。简而言之：在 Apple 解决此问题之前，您无能为力。