App Helper Script

We hebben een JavaScript script bestand gemaakt met een paar handige helperfuncties die de communicatie tussen je website en je app vereenvoudigen.

Gebruik

Je kunt het script (of delen ervan) kopiëren en zelf hosten of het direct van onze website laden.

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

Het script is wel verkleind, maar niet verdoezeld, dus je kunt een javascript formatter/beautifier gebruiken als je wilt kijken naar de implementaties van de functies.

Functies

executeWhenAppReady

Na elke geladen pagina moet de app eerst wat javascript in de geladen pagina injecteren. Dit is om je website in staat te stellen javascript functies op te roepen zoals setNotificationTopicSubscriptionStatus. Helaas is dit niet gelijk, dus als je probeert om heel snel na het laden van de pagina een javascript functie op te roepen die met de app communiceert, kan het zijn dat ze nog niet gedefinieerd zijn.

Je kunt dit vermijden door de code die met je app interageert te verpakken in een oproep aan executeWhenAppReady.

Als je website met een browser geladen wordt, wordt de code binnen executeWhenAppReady niet uitgevoerd. Dit betekent dat je deze functie ook kunt gebruiken om te detecteren of je website is geladen door de app of door een browser. Andere methoden daarvoor worden hier uitgelegd.

<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

Je kunt deze functie gebruiken om uit te zoeken op welk besturingssysteem de huidige gebruiker de app gebruikt.

Deze functie hoeft niet verpakt te worden in executeWhenAppReady. Het kan ook gebruikt worden om te controleren of de huidige gebruiker de app gebruikt (controleer of de geretourneerde waarde niet null is). Dit garandeert echter nog niet dat de app klaar is voor JavaScript interactie. Als je JavaScript-functies wilt aanroepen die interactie hebben met de app, moet je ze nog steeds verpakken 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

Deze functies worden gebruikt voor het beheer van aangepaste tabbladen.