Webgl : How to use javascript sharing function

Unity Engine
1

Hello. i have a working javascript sharing function (port from another project) that i’d like to use in my webgl project but i dont think it is suitable with unity’s webgl.

i have a Pugins folder in the Assets with the .jslib file. in the file :

mergeInto(LibraryManager.library, {
    
     Sharing: function () {
         if (navigator.share)
         {
             navigator.share({
                 title: 'Street Food Festival',
                 text: 'Check out it out',
                 url: 'ur',
             }).then(() => console.log('Successful share')).catch((error) => console.log('Error sharing', error));
         }
         else
         {
             alert('Sorry. Sharing not available on your device')
         }
     }
});

c# script wise :

 [DllImport("__Internal")]
private static extern void Sharing();
public void ShareExperience()
{
     Sharing();
}

and a button click is suppose to trigger it. but when i try to build and run to test, unity throws errors. im pretty sure its the Sharing function but im not sure how to fix it to make it work with unity webgl.

2

Can you post those errors here?

One thing that catches my eye is that .jslib files do not currently support ES6 syntax. Try reverting back to ES5 constructs instead. In particular the anynymous => lambda construct is not there for ES5.

So instead of

}).then(() => console.log(‘Successful share’)).catch((error) => console.log(‘Error sharing’, error));

try

}).then(function() { console.log(‘Successful share’)}).catch(function(error) { console.log(‘Error sharing’, error)});

1 Like
3

i have corrected my mistake in the hopes that it would build and run but the error is basically just that it failed to build. no reference to any code or anything like that.

errors:

Exception: Failed building WebGL Player.
UnityEditor.WebGL.ProgramUtils.StartProgramChecked (System.Diagnostics.ProcessStartInfo p) (at /Users/builduser/buildslave/unity/build/PlatformDependent/WebGL/Extensions/Unity.WebGL.extensions/ProgramUtils.cs:48)
UnityEditor.WebGL.WebGlBuildPostprocessor.EmscriptenLink (UnityEditor.Modules.BuildPostProcessArgs args, System.Boolean wasmBuild, System.String sourceFiles, System.String sourceFilesHash) (at /Users/builduser/buildslave/unity/build/PlatformDependent/WebGL/Extensions/Unity.WebGL.extensions/BuildPostprocessor.cs:431)
UnityEditor.WebGL.WebGlBuildPostprocessor.LinkBuild (UnityEditor.Modules.BuildPostProcessArgs args) (at /Users/builduser/buildslave/unity/build/PlatformDependent/WebGL/Extensions/Unity.WebGL.extensions/BuildPostprocessor.cs:473)
UnityEditor.WebGL.WebGlBuildPostprocessor.PostProcess (UnityEditor.Modules.BuildPostProcessArgs args) (at /Users/builduser/buildslave/unity/build/PlatformDependent/WebGL/Extensions/Unity.WebGL.extensions/BuildPostprocessor.cs:912)
UnityEditor.Modules.DefaultBuildPostprocessor.PostProcess (UnityEditor.Modules.BuildPostProcessArgs args, UnityEditor.BuildProperties& outProperties) (at :0)
UnityEditor.PostprocessBuildPlayer.Postprocess (UnityEditor.BuildTargetGroup targetGroup, UnityEditor.BuildTarget target, System.String installPath, System.String companyName, System.String productName, System.Int32 width, System.Int32 height, UnityEditor.BuildOptions options, UnityEditor.RuntimeClassRegistry usedClassRegistry, UnityEditor.Build.Reporting.BuildReport report) (at :0)
UnityEditor.BuildPlayerWindow:BuildPlayerAndRun()

4

Oh hmm, there is an error with BuildPostProcessor.cs executing. That certainly means the ES5 vs ES6 issue, since BuildPostProcessor.cs will call out to a ES5 based JS parser.

Try double checking the contents of the .jslib file and reduce it to a minimum that would not exhibit the issue, then try to build up the code again to find the offending construct?

1 Like
5

It didn’t seem to like the then catch. its okay. ill just remove it. thanks.

6

I have the same problem, so I append the sharing script on the Build’s index.html (You can also append it in your WebglTemplates index.html to have this code automatically generated for future builds)

        function TriggerShareDialogue() {     
            if(navigator.share)
            {
                navigator.share({
                    title: "Your web title",
                    text: "Your web description",
                    url: "Your web url", 
                }).then(() => console.log("share success")).catch((error) => console.log(error));
            }
            else
            {
                alert('Sorry. Sharing not available on your device');
            }
        }

Next, in your jslib file inside Plugins folder, add this function

mergeInto(LibraryManager.library, {
   
    Share: function () {
        document.documentElement.addEventListener('pointerup', function () {
            TriggerShareDialogue();
        }, { once: true });   
    },
   
});

which will call the TriggerShareDialogue() function defined in the index.html

Finally to call the Share function in your c# script, you can write

    [DllImport("__Internal")]
    private static extern void Share();

    public void ShareExperience()
    {
        Share();
    }