Hoe je kunt zien of een gebruiker je website of app gebruikt

Bijgewerkt op 6. mei 2024 door Jan Bunk

Een humanoïde robot inspecteert een app en een browser om verschillen te vinden, digitale kunst

Er zijn veel gevallen waarin het nuttig kan zijn om onderscheid te maken tussen iemand die je website in de browser bekijkt en iemand die je website bekijkt via je app. Misschien wil je statistieken bekijken over hoe goed je app wordt gebruikt door gebruikers of wil je andere inhoud laten zien aan app-gebruikers.

Net zoals er meerdere use cases zijn, zijn er ook meerdere manieren om dit doel te bereiken. Laten we ze een voor een doorlopen.

Gebaseerd op de User Agent

Filteren op user agent werkt alleen als je de app hebt geconfigureerd om de user agent die hij gebruikt aan te passen. Je kunt deze optie inschakelen in de navigatie-instellingen van je app. Navigatie-instellingen openen
Als je die optie niet wilt inschakelen, bekijk dan de andere filtermethoden die in dit artikel worden uitgelegd.

De user agent is een korte string die de browser naar websites stuurt wanneer deze een pagina laadt. De user agent bevat informatie over de browser, bijvoorbeeld een Firefox browser kan iets als dit sturen:

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0

Aan de hand daarvan kan je website detecteren dat de gebruiker versie 47.0 van de Mozilla Firefox browser gebruikt. Net als browsers stuurt je app ook een user agent die hem identificeert.

Door de app gebruikte user agents

De app gebruikt een paar verschillende user agents:

  • $regularUserAgent App-WebView ($operatingSystem) $version
    Dit is de typische user agent die wordt gebruikt door de interne browser van de app (die je website weergeeft in de app). Verzoeken met deze user agent worden geïnitieerd door de gebruiker van de app door tussen pagina's te navigeren.
  • App-HttpClient $version
    Dit is de user agent die gebruikt wordt voor verzoeken van de app die niet direct door de gebruiker geïnitieerd worden. De app doet hiermee bijvoorbeeld enkele verzoeken om delen van de website op te slaan voor offline gebruik. De offline modus is tegenwoordig standaard uitgeschakeld, dus je zult waarschijnlijk niet veel aanvragen zien met deze user agent.

$version is de interne versie van de app (b.v. 1.4.8+52) en $operatingSystem is het platform waarop de app gebruikt wordt (bijv. ios of android).

$regularUserAgent is de user agent van een mobiele browser die van het toestel verwacht zou worden, zoals Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

Dus een voorbeeld user-agent die de app op iOS zou kunnen gebruiken zou zijn: Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 App-WebView (ios) 1.4.8+52

Filteren op de gebruikersagent van de app

Op basis van de bovenstaande indeling van de user agent kun je detecteren of je website wordt geladen door de app door te controleren of de user agent "App-WebView" bevat. Als je ook het besturingssysteem wilt controleren, kun je aanvullend controleren of de user agent ook "(android)" of "(ios)" bevat.

Voorbeeld: Verschillende inhoud tonen op een WordPress website

With the Default WordPress Editor

Als je WordPress gebruikt, kun je de plugin "UserAgent Content Switcher" gebruiken. De naam van de plugin is vrij beschrijvend: hiermee kun je verschillende inhoud laten zien aan gebruikers op basis van hun user agent. Hier zie je hoe je het kunt instellen (en een voorbeeld):

  1. Installeer de plugin op je website. Let op: we zijn niet verbonden aan de plugin of de ontwikkelaar ervan, we hebben hem gewoon getest en hij leek gratis te zijn en werkte prima.
  2. Voeg op de instellingenpagina van de plugin een nieuw type toe met deze instellingen:
    • Type naam: App
    • Kort-codekenmerk: app
    • Gebruiker agent: App-WebView Een screenshot van het ingevulde formulier met bovenstaande informatie.
  3. Bewerk een van je pagina's en schakel over naar de code-editor.
  4. Nu kun je secties maken die alleen zichtbaar zijn in de app, zoals deze:
    
    Deze tekst is voor iedereen zichtbaar.
    
    [agentsw ua='app']
    Deze tekst is alleen zichtbaar voor app-gebruikers!
    [/agentsw]
    Een screenshot van de bovenstaande tekst in de WordPress code editor.

With Elementor

If you're using Elementor, you can instead use the free Powerpack plugin with the powerpack-webtoapp extension plugin. Here's how it works:

  1. Install the Powerpack plugin through the WordPress store.
  2. Download the powerpack-webtoapp plugin as a zip file and install it.
    The powerpack-webtoapp plugin (and the idea to use Powerpack on Elementor websites) was created by ALL IN APPLI. They use the plugin to manage multiple webtoapp.design apps and generously decided to share it.
  3. Now you can set specific elements to only be displayed in the app. A screenshot of the Powerpack settings.

JavaScript gebruiken

Gebaseerd op de User Agent

Natuurlijk kun je de user agent niet alleen aan de serverkant controleren (zoals beschreven in de vorige sectie), maar ook in JavaScript.

Filteren op user agent werkt alleen als je de app hebt geconfigureerd om de user agent die hij gebruikt aan te passen. Je kunt deze optie inschakelen in de navigatie-instellingen van je app. Navigatie-instellingen openen

Hier is een voorbeeld van hoe je JavaScript kunt gebruiken om te detecteren of de gebruiker de app of een browser gebruikt:


const isApp = navigator.userAgent.includes("App-WebView");
if (isApp) {
    console.log("The user is using the app.");
} else {
    console.log("The user is using a browser.");
}
    
Je kunt ook getAppPlatform van het app helper script gebruiken, dat werkt op dezelfde manier.

Door te controleren op HTML-aanpassingen

De app maakt kleine onzichtbare wijzigingen in de HTML van de website die nodig zijn voor sommige functies van de app. We kunnen deze wijzigingen ook gebruiken om te detecteren of de pagina is geladen door de app.

Omdat dit een beetje lastig is, raden we je aan om executeWhenAppReady van het app helper script te gebruiken. Dan kun je elke code in de executeWhenAppReady functie zetten, en deze wordt alleen uitgevoerd als de pagina is geladen door de app. Een klein nadeel van deze methode is dat het een paar milliseconden duurt voordat de code wordt uitgevoerd, zelfs als de pagina is geladen door de app.

Door code in de app te injecteren

Op de aanpassingspagina van je website heb je de mogelijkheid om JavaScript of CSS toe te voegen die de app moet injecteren in elke pagina die wordt geladen. De mogelijkheden zijn eindeloos, maar laten we als voorbeeld deze tekst groen maken in de app:

<p id="red-text" style="color: red;">This text is red in the browser.</p>

Nu kunnen we dit JavaScript configureren om te injecteren:

document.getElementById("red-text").style.color = "green";

Of anders deze CSS om te injecteren:

#red-text {
    color: green !important;
}
Een screenshot van de ingevulde websiteaanpassing.

Dus zoals je kunt zien, werkt dit ook als een manier om ander gedrag te hebben op de website dan op de app.

Gerelateerde artikelen


Een humanoïde robot gebruikt een vergrootglas om naar een smartphone te kijken. Op de smartphone staan de letters PWA, digitale kunst

Progressive Web Apps vs. Native Apps

Wil je je website naar een hoger niveau tillen? Lees hier hoe progressive web apps zich verhouden tot standaard native apps en hoe je van je website een app kunt maken.

Een humanoïde robot met een fysieke stopwatch die toezicht houdt op een fabrieksvloer met robots die aan bureaus werken, digitale kunst

We hebben 238 Apps gepubliceerd - Dit is hoe lang het duurde om een app te beoordelen

We publiceerden veel apps en hielden bij hoe lang het duurde om ze in de app stores te krijgen, inclusief de tijd die nodig was om apps af te wijzen en opnieuw in te dienen.

Afbeelding met tekst: Je Apple Developer account voorbereiden voor het bijwerken van je bestaande app

Noodzakelijke stappen om je bestaande iOS app te updaten

Deze handleiding legt alle stappen uit die je moet doorlopen om ons je app te laten bijwerken die al in de Apple App Store is gepubliceerd.


Auteur Jan Bunk
Geschreven door
Jan Bunk

Hallo, ik ben Jan! Ik heb webtoapp.design opgericht in 2019 tijdens mijn studie informatica aan de universiteit. Sindsdien is er veel veranderd; niet alleen ben ik afgestudeerd, maar het is ook niet langer alleen ik die webtoapp.design runt. We zijn uitgegroeid tot een wereldwijd, volledig remote team en hebben veel ervaring opgedaan rondom app-ontwikkeling en app-publicatie. We hebben honderden apps gemaakt en gepubliceerd in de app stores, waar ze honderdduizenden keren zijn gedownload.