Comment faire : Obtenir et définir les éléments de la barre d’application de l’app

Posté le 4. octobre 2025 par Jan Bunk


Pour certains sites web, il peut être utile de modifier dynamiquement les boutons dans la barre d’application des apps. Vous pouvez y parvenir avec ces fonctions JavaScript.

Utilisation des fonctions JavaScript

Nous vous conseillons de consulter la fonction executeWhenAppReady()dans notre script d'aide de l'application. Elle garantit que votre site web n'essaie pas d'interagir avec l'application avant qu'elle ne soit prête ou lorsque votre site web est chargé à l'aide d'un navigateur normal (Erreur de référence, la fonction n'est pas définie).

getAppBarItems

Utilisez cette fonction pour obtenir une liste d’objets représentant tous les éléments de la barre d’application actuellement affichés.


<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

Utilisez cette fonction pour modifier les éléments de la barre d’application qui doivent être affichés.


<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>
    

Modification du menu de l'application

Voici une liste de documentation pour développeurs concernant la modification dynamique du menu de l'application. Assurez-vous de consulter celle qui s'applique à la mise en page de votre application.