Atualizado em 27. dezembro 2022 por Jan Bunk
Nós criamos um arquivo de script JavaScript com um par de funções úteis de ajuda que simplificam a comunicação entre o seu site e seu aplicativo.
Você pode copiar o roteiro (ou partes dele) e hospedá-lo você mesmo, ou carregá-lo diretamente de nosso site.
Veja o script do app helper
<script src="https://webtoapp.design/static/js/app-helper.js"></script>
O script é reduzido, mas não ofuscado, então você pode usar um formatador javascript, caso queira dar uma olhada nas implementações das funções.
executeWhenAppReady
Após cada página carregada, o aplicativo precisa primeiro injetar algum javascript na página carregada. Isto é para permitir que seu site chame funções javascript como setNotificationTopicSubscriptionStatus
. Infelizmente, isto não é instantâneo, então se você tentar chamar uma função javascript que interage com o aplicativo muito rapidamente após o carregamento da página, eles podem não estar definidos ainda.
Você pode evitar isso embrulhando o código que interage com seu aplicativo em uma chamada para executeWhenAppReady
.
Quando seu site é carregado usando um navegador, o código dentro de executeWhenAppReady
não será executado. Isso significa que você também pode usar esta função para detectar se seu site foi carregado pelo app ou por um navegador. Outros métodos para isso são explicados aqui.
<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
Você pode usar esta função para descobrir em qual sistema operacional o usuário atual está usando o aplicativo.
Esta função não precisa ser envolvida dentro de executeWhenAppReady
. Ela também pode ser usada para verificar se o usuário atual está usando o aplicativo (verifique se o valor retornado não é nulo). Isto não garante que o aplicativo esteja pronto para interação JavaScript ainda. Se você quiser chamar funções JavaScript que interagem com o aplicativo, você ainda deve envolvê-las em 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 funções são usadas para gerenciando abas personalizadas.