Web Share API Not Working On Some IOS Versions

Question

I am using the Web Share API to allow downloading/sharing an image from my web app. I have followed the documentation and have it working well, however, on certain IOS devices the share API fails. I've noticed this happen on IOS 12, 14, and even 15. It works fine on my personal iPhone running 15.1.1 but it fails on our client's iPhone running some version of IOS 15 (not sure the exact version). I have not seen this issue with any android devices so far.

// This function is called when the use hits the take screenshot button on the app. This is where we are creating the image that will be shared via Web Share API

function createFinalImage() {
    const screenshotContainer =  document.getElementById("screenshot-container") 

    // here we are turning all elements in our screenshot container into one image
    html2canvas(screenshotContainer).then(canvas => {

        try {
            var finalScreenshot = canvas.toDataURL('image/jpeg', 1);

            // share image
            shareScreenshot(finalScreenshot)
        }
        catch (e) {
            console.log("Screenshot failed: " + e);
        }

    });
}

// Here we are sending the image to the web share API

async function shareScreenshot(finalScreenshot) {
    const blob = await (await fetch(finalScreenshot)).blob();

    const filesArray = [
      new File(
        [blob],
        `harry-caray${Date.now()}.jpg`,
        {
          type: blob.type,
          lastModified: new Date().getTime()
        }
      )
    ];

    const shareData = {
      files: filesArray,
    };

    if (navigator.canShare && navigator.canShare({ files: filesArray })) {
        navigator.share(shareData);
    } else {
        console.log(`Your system doesn't support sharing files.`);
    }
}

// share screenshot 
document.getElementById("share-button").addEventListener("click", function() {
    createFinalImage()
});

On the devices that Web Share fails on, I am seeing "Your system doesn't support sharing files." in the console so that's where it is erroring out.

score 0 · Answer 1 · answered Feb 01 '22 at 10:01

General hint: wrap the await navigator.share() call in try..catch. Like that you can know if someone just cancels the share operation (throws AbortError) or if it actually fails (throws other error).

The Web Share API with the files parameter is supported by browsers as you can see on CanIUse. People might have toggled a feature flag in Safari to enable support before the API was actually supported.

Web Share API Not Working On Some IOS Versions

1 Answers1