Bijgewerkt op 27. december 2022 door Jan Bunk
We hebben een JavaScript script bestand gemaakt met een paar handige helperfuncties die de communicatie tussen je website en je app vereenvoudigen.
Je kunt het script (of delen ervan) kopiëren en zelf hosten of het direct van onze website laden.
Bekijk het app helper script
<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.
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 geladen werd door de app of door een browser. Een alternatieve methode hiervoor is de user agent te controleren, zoals uitgelegd in onze
handleiding over het uitfilteren van app gebruikers in je website analytics.
<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");
});
</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.