App Helper Script

Aggiornato il 27. dicembre 2022 da Jan Bunk


Abbiamo creato un file di script JavaScript con un paio di utili funzioni di aiuto che semplificano la comunicazione tra il tuo sito web e la tua applicazione.

Uso

Puoi copiare lo script (o parti di esso) e ospitarlo tu stesso, oppure caricarlo direttamente dal nostro sito web.

Visualizza lo script helper dell'app

<script src="https://webtoapp.design/static/js/app-helper.js"></script>

Lo script è compresso, ma non offuscato, quindi puoi usare un formattatore/abbellitore javascript se vuoi dare un'occhiata alle implementazioni delle funzioni.

Funzioni

executeWhenAppReady

Dopo ogni caricamento di pagina l'applicazione ha bisogno di iniettare del javascript nella pagina caricata. Questo per permettere al tuo sito web di richiamare funzioni javascript come setNotificationTopicSubscriptionStatus. Sfortunatamente, questo non è istantaneo, quindi se provi a richiamare una funzione javascript che interagisce con l'app molto velocemente dopo il caricamento della pagina, potrebbe non essere ancora definita.

Puoi evitarlo avvolgendo il codice che interagisce con la tua app in una chiamata a executeWhenAppReady.

Quando il tuo sito web viene caricato utilizzando un browser, il codice dentro executeWhenAppReady non verrà eseguito. Questo significa che puoi anche usare questa funzione per rilevare se il tuo sito web è stato caricato dall'app o da un browser. Altri metodi per farlo sono spiegati qui.


<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

Puoi utilizzare questa funzione per scoprire su quale sistema operativo l'utente corrente sta utilizzando l'applicazione.

Questa funzione non ha bisogno di essere racchiusa dentro executeWhenAppReady. Può anche essere utilizzata per controllare se l'utente corrente sta utilizzando l'applicazione (controlla che il valore restituito non sia nullo). Questo però non garantisce che l'app sia già pronta per l'interazione JavaScript. Se vuoi chiamare funzioni JavaScript che interagiscono con l'app, dovresti comunque inserirle in executeWhenAppReady.


<script>
    // possible return values are:
    // "android"
    // "ios"
    // null -> not using app, most likely a regular browser
    var platform = getAppPlatform();
</script>
Questa funzione si basa sul controllo degli user agent, quindi funziona solo se hai configurato l'applicazione per regolare l'user agent che utilizza. Puoi attivare questa opzione nelle impostazioni di navigazione della tua app. Apri le impostazioni di navigazione

isInCustomTab, getCustomTabData, closeCustomTab

Queste funzioni sono utilizzate per gestire le schede personalizzate.