Share files with navigator.share in PWA on IOS

user_8548242 0
Viewed 1669

The attached code works perfectly on Android, even old versions, and doesn't work on IOS (tested on Safari 13). If you try to share on Whatsapp, on android it also shares the photo, on iphone only text. Where am I wrong? Codepen: 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>
progressive-web-apps share ios
2 Answers

Everybody can have BUGS!

Your code is fine. Just remove everything Except the {files:...}. Then BOOM!

Following is the code snippet for you.

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';
}
user_152358980 
// 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.`);
}

As of early 2021, using the API to share title, text, and URL is supported by:

  • Safari 12 or later on macOS and iOS.
  • Chrome 75 or later on Android, and 89 or later on Chrome OS and Windows.

Using the API to share files is supported by:

  • Safari 15 or later on macOS and iOS.
  • Chrome 75 or later on Android, and 89 or later on Chrome OS and Windows. (Most Chromium-based browsers, like Edge, have the same support for this feature as the corresponding version of Chrome.)
user_53308190
Related