1

The typical code (see below) to get the Web Share API doesn't work on my Firefox browser, but it does on Safari. This applies to both desktop and mobile.

// NextJS/React
if (navigator.share) await navigator.share(data);

But a very similar code seems to work (for any browser) on Vanilla JS according to these users on Reddit (Does the Web Share API work in Firefox on Android?) and this Codepen (Web Share API demo):

//VanillaJS
if (navigator.share) { 
   navigator.share({
      title: 'WebShare API Demo',
      url: 'https://codepen.io/ayoisaiah/pen/YbNazJ'
    }).then(() => {
      console.log('Thanks for sharing!');
    })
    .catch(console.error);
    } else {
        shareDialog.classList.add('is-open');
    }

My educated guess is that this must be a framework dependent issue. Has anyone had any trouble getting the Web Share API to work on NextJS, and Firefox specifically?

Alternatively, I wonder if the Codepen website has custom code to get the API working.

At any case, it can't be my browser configuration because I've tested both on mobile and desktop, and as I said, the Codepen linked works on my browser.

Therefore, this must be an issue with getting the API working on React/NextJS.

A satisfactory solution to this answer would be one that ideally manages to reproduce the situation and offers a clear explanation of the workaround or fix.

josealvarez97
  • 75
  • 1
  • 8

1 Answers1

1

https://caniuse.com/web-share It says it is not supported on Firefox and your link for the subreddit is locked.

Paarth
  • 11
  • 1
  • You can still visit this link https://codepen.io/ayoisaiah/pen/YbNazJ. If it's not supported, why is that link able to show a share popup? – josealvarez97 Aug 03 '23 at 22:34
  • @josealvarez97 Because they implemented a complete custom share dialog as a fallback... you can see all the HTML in the codepen and explanation of it here: https://css-tricks.com/how-to-use-the-web-share-api/ – mb21 Aug 24 '23 at 11:55