Guion de ayuda para la app

Hemos creado un archivo script de JavaScript con un par de funciones de ayuda útiles que simplifican la comunicación entre tu sitio web y tu aplicación.

Uso

Puedes copiar el script (o partes de él) y alojarlo tú mismo, o cargarlo directamente desde nuestro sitio web.

<script src="https://webtoapp.design/static/js/app-helper.js"></script>

El script está minificado, pero no ofuscado, así que puedes utilizar un formateador/embellecedor de javascript si quieres echar un vistazo a las implementaciones de las funciones.

Funciones

executeWhenAppReady

Después de la carga de cada página, la app necesita inyectar algo de javascript en la página cargada. Esto es para permitir que tu sitio web llame a funciones javascript como setNotificationTopicSubscriptionStatus. Desgraciadamente, esto no es instantáneo, por lo que si intentas llamar a una función javascript que interactúe con la app muy rápidamente después de la carga de la página, puede que aún no esté definida.

Puedes evitarlo envolviendo el código que interactúa con tu app en un comando para executeWhenAppReady.

Cuando tu sitio web se cargue con un navegador, el código dentro de executeWhenAppReady no se ejecutará. Esto significa que también puedes usar esta función para detectar si tu sitio web fue cargado por la app o un navegador. Otros métodos para eso se explican aquí.

<script>
    // setNotificationTopicSubscriptionStatus interacts with the app, so it won't immediately be available after a new page was loaded
    executeWhenAppReady(function () {
        console.log("Website was loaded by the app and the app is ready for interaction");

        // by running inside a executeWhenAppReady call, we avoid potentially calling it while still undefined
        setNotificationTopicSubscriptionStatus(true, "new-games");
    });
        
    // remember to make the function async if you use await inside it!
    // getSubscribedNotificationTopics also interacts with the app and returns a result that needs to be awaited
    executeWhenAppReady(async function () {
        var topics = (await getSubscribedNotificationTopics())["topics"];
    });
</script>

getAppPlatform

Puedes utilizar esta función para saber en qué sistema operativo el usuario actual está utilizando la aplicación.

Esta función no necesita estar envuelta dentro de executeWhenAppReady. También puede utilizarse para comprobar si el usuario actual está utilizando la aplicación (comprueba que el valor devuelto no es nulo). Sin embargo, esto no garantiza que la aplicación esté lista para la interacción con JavaScript. Si quieres llamar funciones de JavaScript que interactúen con la aplicación, debes envolverlas en executeWhenAppReady.

<script>
    // possible return values are:
    // "android"
    // "ios"
    // null -> not using app, most likely a regular browser
    var platform = getAppPlatform();
</script>

isInCustomTab, getCustomTabData, closeCustomTab

Estas funciones se utilizan para manejar las pestañas personalizadas.