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

Question

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?

The function returns a promise. If you want to catch the error you will have to call `navigator.share(...).catch(err => { /* do something with the error */ })`. This is asynchronous, if you don't know about promises yet it's probably a good time to read up about them — A_A, Aug 25 '22 at 15:30
Regarding "which according to MDN can't reject with a DOMException": if I'm not mistaken, it explicitly says that it throws DOMExceptions — A_A, Aug 25 '22 at 15:32
@A_A Catching the errors with `.catch()` gives the same error (obviously) and, yes my bad, I didn't see the part about it throwing DOMExceptions, sorry. But I still don't know what's causing the error... — LuisAFK, Aug 25 '22 at 15:34
@LuisAFK please edit your question appropriately, I answered the question asked, I'm not thrilled I wasted my time answering the wrong one... — Jared Smith, Aug 25 '22 at 15:37

Michal Měchura · Answer 1 · 2022-08-25T15:56:43.823

1

I think that every time you're calling navigator.share() you need to call it with the await operator, like this:

await navigator.share();

Otherwise any exceptions raised inside the promise returned by navigator.share() will not be caught by your try/catch block.

edited Aug 25 '22 at 15:56

answered Aug 25 '22 at 15:54

Michal Měchura

141
5

That isn't what I'm asking. What I'm asking is _why_ `navigator.share()` is giving an error. I already said that I get the same error using `.catch()` but I will update my code for it to be clearer. – LuisAFK Aug 25 '22 at 17:19

score 1 · Accepted Answer · answered Aug 25 '22 at 18:02

1

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

answered Aug 25 '22 at 18:02

LuisAFK

846
4
22

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

2 Answers2