Cómo: Obtener y establecer los elementos de la barra de la app

Publicado en 4. octubre 2025 por Jan Bunk


Para algunos sitios web puede ser útil modificar dinámicamente los botones en la barra de la app. Puedes lograr esto con estas funciones de JavaScript.

Uso de las funciones de JavaScript

Quizá quieras consultar la función executeWhenAppReady() de nuestro script de ayuda de la aplicación. Garantiza que tu sitio web no intente interactuar con la aplicación antes de que esté lista o cuando tu sitio web se cargue utilizando un navegador normal (ReferenceError, function is not defined).

getAppBarItems

Usa esta función para obtener una lista de objetos que representan todos los elementos de la barra de la app que se están mostrando actualmente.


<script>
    try {
        // returns a list of objects representing the app bar items
        let appBarItems = (await getAppBarItems())["appBarItems"];
    }
    catch (e) {
        // Can occur if:
        // - the app couldn't connect to the native code. Should be very unlikely.
        console.log(e);
    }
</script>
    

setAppBarItems

Usa esta función para modificar los elementos de la barra de la app que deberían mostrarse.


<script>
    try {
        // example for an app bar item object
        let newAppBarItem = {
            action: {
                urlToRedirectTo: "https://webtoapp.design/contact",
                javascriptToExecute: null,
                elementToClickSelector: null,
                isFavoriteAction: false,
                isShareAction: false,
                isOpenExternallyAction: false,
                isSettingsAction: false,
                isRateAction: false,
                isPastNotificationsAction: false,
            },
            icon: {
                name: "list"
            }
        };

        // get the currently displayed app bar items
        let allAppBarItems = (await getAppBarItems())["appBarItems"];

        // add the new app bar item to the list of app bar items
        allAppBarItems.push(newAppBarItem);

        // display the list of app bar items, including the new app bar item
        await setAppBarItems(allAppBarItems);
    }
    catch (e) {
        // Can occur if:
        // - the app couldn't connect to the native code. Should be very unlikely.
        console.log(e);
    }
</script>
    

Modificando el Menú de la App

Aquí tienes una lista de documentación de desarrolladores relacionada con el cambio dinámico del menú de la app. Asegúrate de ver la que aplica al diseño de tu app.