App-Helper-Skript

Wir haben eine JavaScript-Datei mit ein paar nützlichen Hilfsfunktionen erstellt, die die Kommunikation zwischen deiner Website und deiner App vereinfachen.

Verwendung

Du kannst das Skript (oder Teile davon) entweder kopieren und selbst hosten oder es direkt von unserer Website laden.

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

Das Skript ist minified, aber nicht obfuscated, damit du einen Javascript Formatter/Beautifier verwenden kannst, wenn du einen Blick auf die Implementierungen der Funktionen werfen willst.

Funktionen

executeWhenAppReady

Nach jedem Laden einer Seite muss die App zunächst etwas Javascript in die geladene Seite injizieren. Dies dient dazu, dass deine Webseite Javascript-Funktionen aufrufen kann, wie z.B. setNotificationTopicSubscriptionStatus. Wenn du also versuchst, eine Javascript Funktion aufzurufen, die mit der App interagiert, kann es sein, dass sie noch nicht definiert ist.

Um dieses Problem zu vermeiden, packe den Code, der mit deiner App interagiert, in einen Aufruf von executeWhenAppReady.

Wenn deine Webseite mit einem Browser geladen wird, wird der Code innerhalb von executeWhenAppReady nicht ausgeführt werden. Das heißt, du kannst diese Funktion auch nutzen, um zu erkennen, ob deine Website von der App oder einem Browser geladen wurde. Andere Methoden dafür werden hier erklärt.

<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

Mit dieser Funktion kannst du herausfinden, auf welchem Betriebssystem der aktuelle Nutzer die App verwendet.

Diese Funktion muss nicht in executeWhenAppReady eingeschlossen werden. Sie kann auch verwendet werden, um zu prüfen, ob der aktuelle Benutzer die App verwendet (prüfe, ob der zurückgegebene Wert nicht null ist). Das garantiert aber noch nicht, dass die App für JavaScript-Interaktionen bereit ist. Wenn du JavaScript-Funktionen aufrufen willst, die mit der App interagieren, solltest du sie trotzdem in executeWhenAppReady packen.

<script>
    // possible return values are:
    // "android"
    // "ios"
    // null -> not using app, most likely a regular browser
    var platform = getAppPlatform();
</script>

isInCustomTab, getCustomTabData, closeCustomTab

Diese Funktionen werden verwendet um custom Tabs zu verwalten.