App Hjälparskript

Uppdaterad den 27. december 2022 av Jan Bunk


Vi har skapat en JavaScript-skriptfil med ett par användbara hjälpfunktioner som förenklar kommunikationen mellan din webbplats och din app.

Användning

Du kan antingen kopiera skriptet (eller delar av det) och lägga upp det själv eller ladda det direkt från vår webbplats.

Visa skriptet för apphjälpen

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

Skriptet är minifierat, men inte forvrängt eller dolt, så du kan använda en javascriptformater/beautifierare om du vill titta på funktionernas implementering.

Funktioner

executeWhenAppReady

Efter varje sidladdning måste appen först injicera javascript i den laddade sidan. Detta för att webbplatsen ska kunna anropa javascriptfunktioner som t.ex. setNotificationTopicSubscriptionStatus. Tyvärr är detta inte omedelbart, så om du försöker anropa en javascript-funktion som interagerar med appen väldigt snabbt efter att sidan laddats kanske de inte är definierade ännu.

Du kan undvika detta genom att omsluta koden som interagerar med din app med ett anrop till executeWhenAppReady.

När din webbplats laddas med en webbläsare kommer koden i executeWhenAppReady inte att exekveras. Detta innebär att du också kan använda den här funktionen för att upptäcka om din webbplats laddades av appen eller en webbläsare. Andra metoder för det förklaras här.


<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

Du kan använda den här funktionen för att ta reda på vilket operativsystem den aktuella användaren använder appen på.

Den här funktionen behöver inte vara inbakad i executeWhenAppReady. Den kan också användas för att kontrollera om den aktuella användaren använder appen (kontrollera att det returnerade värdet inte är noll). Detta garanterar dock inte att appen är redo för JavaScript-interaktion ännu. Om du vill anropa JavaScript-funktioner som interagerar med appen bör du fortfarande paketera dem i executeWhenAppReady.


<script>
    // possible return values are:
    // "android"
    // "ios"
    // null -> not using app, most likely a regular browser
    var platform = getAppPlatform();
</script>
Den här funktionen bygger på kontroll av användaragenter, så den fungerar bara om du har konfigurerat appen så att den kan justera den användaragent som används. Du kan aktivera det här alternativet i appens navigeringsinställningar. Öppna navigeringsinställningar

isInCustomTab, getCustomTabData, closeCustomTab

Dessa funktioner används för att hantera anpassade flikar.