Bringing up device native share using navigator.share

I’m doing a web game that will primarily get used on mobile, and I’d like to bring up the native share dialogue on mobile devices for sharing an image and some texts. For some reason, using navigator.share() seems to work fine on Chrome on Android, but not on iOS (Safari or Chrome). The error is the NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

After some research, this is the same error triggered if navigator.share() is called without a user gesture. Using the W3C example on iOS Safari (Web Share Test) it seems that clicking on the “Share” button works fine but clicking on the “Share without user gesture” triggers the same error. This leads me to think that pointerdown event in Phaser 3 somehow doesn’t get recognised as a user gesture? I’m using the standard way of calling the function from a pointerdown event (and share_Button had .setInteractive()).

This is really puzzling so really appreciate any help here!

Code:

this.share_Button.on(“pointerdown”, function(event) {
console.log(“click event has been fired”);
try {
await navigator.share({text: “Sample code: 0CED2”, url: “http://www.google.com” });
console.log(‘Successfully sent share’);
} catch (error) {
console.log('Error sharing: ’ + error);
}
}, this);

1 Like

Same problem here. Phaser3’s pointerdown doesn’t get recognized as a user gesture. Did you find a solution?

Use pointerup.

On iOS devices it works only first time. Next time it throws an error:

[native code]:1 Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

Code:

shareButton.setInteractive();
shareButton.on('pointerup', function () {
    navigator.share({ title: data.title, url: data.url });
}, this);

Any ideas how to solve ?

Update:
Its iOS 14 bug: iOS 14 Webshare API Broken | Apple Developer Forums