navigator.share() not working in HTTPS and in a supported browser

I don’t understand why navigator.share() is giving me an error even though my website meets all of the requirements listed on MDN (has HTTPS and supported by the browser).

The following code gives an error when I click the button:

shareScoreBtn.addEventListener('click', e => {
  if (!(navigator.canShare && navigator.share))
  {
    console.log('This browser does not support sharing');
    showPopup('Error', 'This browser doesn't support sharing');
    return;
  }

  const toShare = {
    text: 'Check out my score in Perfectly Balanced!',
    url: 'https://pb.luisafk.repl.co',
    files: [
      new File([
        deathScreenshots[0]
      ], 'perfectly-balanced-score.png')
    ]
  };

  if (navigator.canShare(toShare))
  {
    navigator.share(toShare).then(() => {
      console.log('Shared death screenshots');
    }).catch(err => {
      console.error('Error sharing death screenshots:', err);
    });
  }
  else
  {
    delete toShare.files;
    toShare.text = `I got a score of ${score} in Perfectly Balanced!`;

    if (navigator.canShare(toShare))
    {
      navigator.share(toShare).then(() => {
        console.log('Shared score text');
      }).catch(err => {
        console.error('Error sharing score text:', err);
      });
    }
    else
    {
      showPopup('Error', 'Your browser doesn't support sharing');
      console.log('This browser does not support sharing the deathScreenshots or text');
    }
  }
});

What am I doing wrong?

The website is served over HTTPS and my browser supports the Web Share API according to Mozilla and I also checked in the console !!(navigator.canShare && navigator.share)

Doesn’t work on Windows 10 or Chrome on Android.

EDIT: ~~it says (in promise) but the only promise made in that code is by navigator.share() which according to MDN can’t reject with a DOMException so I don’t really know what’s happening.~~ If I use canShare and share in the console it works fine…

EDIT: Many people misunderstood the question, so I will clarify it. My question is what is causing navigator.share() to error?

Answer

I found the answer here

You must specify the MIME type of the blobs to the new File constructor as follows:

new File([ blob ], 'filename.png', { type: blob.type })

Advertisement

Answer