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

编程问答 2022-06-12

问题描述

附带的代码在Android（即使是旧版本）上也可以完美运行，并且在IOS（在Safari 13上测试）上不起作用。 如果您尝试在Whatsapp上共享，则在android上它也共享照片，仅在iPhone上显示文字。 我哪里错了？ Codepen：dict.setdefault 

<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>

解决方法

每个人都可能有 BUGS！

你的代码没问题。只需删除除 {files:...} 之外的所有内容。然后轰！

以下是适合您的代码片段。

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';
}
iosiosprogressive-web-appsshare