Native Functions Introduction

Canvas apps include a Javascript API built into their source code, allowing your website to trigger certain in-app actions using Javascript functions.

The Native Functions are not available for use until your page is fully loaded within the app, for that reason when a page loads in the app we trigger an event, which tells us that the Javascript API is ready to be used. You will want to listen to that event to make sure the functions are called at the right time, preventing errors in your application.

Here you can see an example of how to listen to the event triggered by the app:

<script type="text/javascript">
    // Listen to events
    window.addEventListener("message", (event) => {
        runNativeFunctions(event);
    }, false);

    // Function that runs when the event is triggered
    function runNativeFunctions(event) {
        try {

            // Check if the native functions are ready to be used
            if (event.data && event.data == 'nativeFunctionsLoaded') {
                // Native function can be called here
                nativeFunctions.onesignalSetExternalUserId("1");
            }

        } catch (ex) {
            // Log any error messages for easier debugging
            console.log(ex.message;);
        }
    }
</script>

We have also prepared a sample page that can be used in your app for testing the native functions, or if you prefer, you can copy its code and add it to your website directly, you can find the page here: https://mobiloudsupport.github.io/nativefunctions/

Below you can find a list of all the available native functions in the Canvas platform:

nativeFunctions.login();
nativeFunctions.logout();
nativeFunctions.onesignalSendTags("1", "2");
nativeFunctions.onesignalDeleteTags("1", "2");
nativeFunctions.onesignalSetEmail("[email protected]");
nativeFunctions.onesignalLogoutEmail();
nativeFunctions.onesignalRemoveExternalUserId("user ID");
nativeFunctions.onesignalSetExternalUserId("user ID");

Related Articles