Roteiro do App Helper

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.

Uso

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.

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 essa 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>
Esta função depende da verificação dos agentes do usuário, então ela só funciona se você tiver configurado o aplicativo para ajustar o agente do usuário que ele usa. Você pode habilitar esta opção nas configurações de navegação do seu aplicativo. Abrir configurações de navegação

isInCustomTab, getCustomTabData, closeCustomTab

Estas funções são usadas para gerenciando abas personalizadas.