Publicado en 4. octubre 2025 por Jan Bunk
For some websites it may be useful to dynamically modify the buttons in the apps' app bar. You can achieve this with these JavaScript functions.
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
Use this function to get a list of objects representing all the app bar items that are currently being displayed.
<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
Use this function to modify the app bar items that should be displayed.
<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>
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.