Publicado em 11. dezembro 2022 por Jan Bunk
Para alguns sites pode ser útil modificar dinamicamente os itens de menu dos aplicativos. Você pode conseguir isto com estas funções JavaScript.
executeWhenAppReady()
do
nosso script auxiliar de aplicação. Ele garante que seu site não tente interagir com o aplicativo antes que ele esteja pronto ou quando o site for carregado usando um navegador comum (ReferenceError, a função não está definida).
getMenuItems
Use esta função para obter uma lista de objetos representando todos os itens do menu que estão sendo exibidos no momento.
<script>
try {
// returns a list of objects representing the menu items
let menuItems = (await getMenuItems())["menuItems"];
}
catch (e) {
// Can occur if:
// - the app couldn't connect to the native code. Should be very unlikely.
console.log(e);
}
</script>
setMenuItems
Use esta função para modificar os itens de menu que devem ser exibidos.
<script>
try {
// example for a menu item object
let newMenuItem = {
name: "Contact",
action: {
urlToRedirectTo: "https://webtoapp.design/contact",
javascriptToExecute: null,
elementToClickSelector: null,
isFavoriteAction: false,
isShareAction: false,
isOpenExternallyAction: false,
isSettingsAction: false
},
icon: null,
children: []
};
// get the currently displayed menu items
let allMenuItems = (await getMenuItems())["menuItems"];
// add the new menu item to the list of menu items
allMenuItems.push(newMenuItem);
// display the list of menu items, including the new menu item
await setMenuItems(allMenuItems);
}
catch (e) {
// Can occur if:
// - the app couldn't connect to the native code. Should be very unlikely.
console.log(e);
}
</script>
convertElementToMenuItem
Esta é uma função utilitária para obter um objeto de item de menu que é equivalente a clicar em um determinado elemento, geralmente um link ou um botão.
<a href="https://webtoapp.design/" id="my-link">My Link</a>
<script>
let myLinkElement = document.getElementById("my-link");
let myMenuItem = convertElementToMenuItem(myLinkElement);
/*
The result will look something like this:
{
name: "My Link",
action: {
urlToRedirectTo: null,
javascriptToExecute: null,
elementToClickSelector: "#my-link",
isFavoriteAction: false,
isShareAction: false,
isOpenExternallyAction: false,
isSettingsAction: false
},
icon: null,
children: []
};
or (depending on the app configuration)
{
name: "My Link",
action: {
urlToRedirectTo: "https://webtoapp.design/",
javascriptToExecute: null,
elementToClickSelector: null,
isFavoriteAction: false,
isShareAction: false,
isOpenExternallyAction: false,
isSettingsAction: false
},
icon: null,
children: []
};
*/
</script>
Aqui está uma lista de documentação relacionada aos desenvolvedores sobre notificações push:
E aqui estão mais alguns artigos (não relacionados a desenvolvedores) relacionados a notificações push: