Implementing Capacitor share

Capacitor
1

I’m trying to implement native sharing using Capacitor’s share plugging, but it’s not working either on the web or on native devices, below is my code :

import { Share } from "@capacitor/share";

async function shareContent() {
      const isShareContent = await Share.canShare();
      console.log(isShareContent);

      if (isShareContent.value) {
        await Share.share({
          title: "See cool stuff",
          text: "Really awesome thing you need to see right now",
          url: "https://web.myapp.com/",
          dialogTitle: "Share with buddies",
        });
      }
    }

                        <ion-icon
                          class="mr-3 pointer-cursor"
                          :icon="shareSocialOutline"
                          @click="shareContent"
                        >
                        </ion-icon>

Then I call the shareContent function by clicking it, anywhere on the app. I use Ionic and vue

2

Is too less information. What happens? Any logs in the console?

3

The code looks right. I am using it in Vue as well.

A couple of tips. You should use Share.canShare() to make sure sharing is available.

Second, you should wrap it in a try /catch as if the user cancels the share, it throws a JS error. If I remember correctly, the error doesn’t cause any issues, I just didn’t like seeing it in the console.

4

Hi @twestrick ,

Thanks for your suggestion. I already use the Share.canShare() to ensure that the platform is capable of sharing, on the web browser, it returns false on the console obviously. Not so sure how I can test on mobile devices.

Warm Regards.

5

To test on a mobile device, you just run it as usual, either in an emulator or physical device.

6

Capacitor share doesn’t work in web browsers but only on mobile devices.

This is my working function:

async share(): Promise<void> {

    await Share.share({
     title: "Your title",
     dialogTitle: "Some other title",
     text: "The message you want to share"
   });

}
7

It works in some web browsers like safari (desktop and iOS) , chrome (Android, windows and Chrome OS), edge, etc.

See the full support at Web Share API | Can I use... Support tables for HTML5, CSS3, etc

It might require a secure context (https url)

8

What you says it’s true but I’m not sure it’s a viable option… You want to be able to use a share feature on more browsers than those you mentioned. It depends on the requirements.