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.
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.
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>
isInCustomTab, getCustomTabData, closeCustomTab
Queste funzioni sono utilizzate per gestire le schede personalizzate.