Standort in Webanwendungen anzeigen
Wie man Markierungen des Nutzerstandortes mit einer Kompassanzeige in der eigenen Webanwendung implementiert
Standortbasierte Funktionen sind nicht nur in nativen Anwendungen ein wichtiges Thema. Der Nutzerstandort lässt sich auch mit einer Kompassanzeige in webbasierten Anwendungen implementieren. Martin Schuhfuss, Creative Developer bei Ubilabs beschreibt in diesem Artikel, was man bei der Implementierung beachten muss, woher die Standortdaten kommen und wie man eine zuverlässige Hervorhebung des Nutzerstandortes mit einer Kompassanzeige in der eigenen Webanwendung implementiert.
In vielen kartenbasierten Anwendungen ist es sehr hilfreich für Nutzer:innen, wenn sie ihren eigenen Standort in Relation zu den auf der Karte angezeigten Informationen sehen. Die Nutzung des Standortes ermöglicht eine ganze Reihe an weiteren Funktionen, wie zum Beispiel Wegbeschreibungen.
Funktionen, die auf dem Nutzerstandort basieren, sind nicht nur für native Anwendungen verfügbar. Über spezielle Browser-APIs (Application Programming Interfaces) lassen sich die gleichen Funktionen auch in webbasierten Anwendungen nutzen. Um diese Funktionen richtig zu implementieren, müssen allerdings einige Aspekte zur Sicherheit und Kompatibilität beachtet werden. Wir zeigen anhand unserer Demo, wie es geht.
Wie Nutzerstandorte erfasst werden
Alle modernen Browser implementieren die Geolocation API, die es Websites ermöglicht, den aktuellen Standort des Geräts der Nutzer:innen abzufragen. Bei Smartphones ist dies in der Regel entweder eine Verortung im Mobilfunknetz und WiFi-Signalen für niedrige Genauigkeit oder ein GNSS-Empfänger (Global Navigation Satellite System) für hohe Genauigkeit. Desktop-Browser verwenden entsprechende Standortdienste des Betriebssystems, sofern verfügbar.
Diese Messwerte enthalten die Koordinaten (Breiten- und Längengrad) sowie die aktuelle Genauigkeit in Metern. Das reicht bereits aus, um den Standort der Benutzer:innen auf der Karte anzuzeigen, so wie Sie es von nativen Kartenanwendungen kennen. Die Geolocation API liefert auch einen Wert für die Richtung, und man könnte meinen, dass man damit auch die Richtung anzeigen kann, in die das Telefon gerade schaut.
In vielen Fällen wird dies jedoch nicht funktionieren, da der angegebene Wert die Richtung ist, die zwischen mehreren Standortmessungen erfasst wurde. Das funktioniert gut, wenn Sie sich mit konstanter Geschwindigkeit bewegen, scheitert aber kläglich, wenn Sie stillstehen. In diesem Fall müssen wir uns die Werte ansehen, die von einer anderen API bereitgestellt werden - den DeviceOrientation-Events.
Mit DeviceOrientation-Events können Webanwendungen auf die Messwerte der IMU (Inertial Measurement Unit) zugreifen, die in fast jedem Smartphone eingebaut ist, das heute auf dem Markt ist. Die von dieser API gelieferten Messwerte stellen die Ausrichtung des Geräts relativ zum Magnetfeld der Erde dar und ermöglichen die Berechnung der Kompassrichtung des Geräts.
Einwilligung und Dialoge zum Datenschutz
Ortungsdaten gehören zu den sensibelsten Informationen, die eine Webanwendung über ihre Nutzer:innen erhalten kann. Aus diesem Grund werden sie vor einer möglicherweise missbräuchlichen Verwendung streng geschützt. Deshalb zeigen Browser einen deutlichen Genehmigungsdialog an, bevor eine Webanwendung zum ersten Mal Ortungsdaten erhalten kann. Darüber hinaus kann auch das Betriebssystem einen ähnlichen Dialog anzeigen, um dem Browser den Zugriff auf den Standortdienst des Geräts zu erlauben.
Wenn die Nutzer:innen die Erlaubnis verweigern, wird die Anwendung nicht nur daran gehindert, die Lokalisierungs-Koordinaten zu empfangen, es ist auch nicht mehr möglich, die Berechtigungsabfrage zu starten. Wenn die Nutzer:innen dies nicht aktiv in den Website-Einstellungen des Browsers zulassen (und selten wissen Nutzer:innen, wie das funktioniert), gibt es für die Anwendung keine Möglichkeit, diese Funktion wieder zu aktivieren.
Aus diesem Grund – und aus allgemeiner Höflichkeit – ist es wichtig, nur dann nach einer Erlaubnis zu fragen, wenn die Nutzer:innen sie tatsächlich erwarten. Wir sind der Meinung, dass es immer eine separate Schaltfläche geben sollte, die den Dialog zur Genehmigung auslöst, anstatt automatisch die Eingabeaufforderungen zu starten. Dadurch empfinden Nutzer:innen die Standortabfrage eher als eine eigene Aufforderung an die Website und nicht als Aufforderung der Website an die Nutzer:innen. Idealerweise sollte es nie zu einer Situation kommen, in der Nutzer:innen auf "Verweigern" klicken, weil der Berechtigungsdialog unerwartet war oder Informationen darüber fehlten, was bei der Einwilligung passieren würde.
Für iOS-Geräte (und möglicherweise auch für zukünftige Android-Geräte) gibt es eine weitere Berechtigung, um die wir bitten müssen, damit wir Zugriff auf die DeviceOrientation-Events erhalten, die wir zur Anzeige des Kompasses benötigen. Diese Berechtigung ist jedoch nicht so wichtig wie die Geolokalisierung und kann sogar weggelassen werden, wenn kein Bedarf für die Anzeige eines Kompasses besteht.
Implementierung anhand unserer Demo
Unser Beispiel ist eine einfache Google-Karte, die den Standort der Nutzer:innen anzeigt. Sie besteht nur aus zwei Teilen: Der eigentlichen Karte und einem kleinen Panel mit einigen Informationen sowie den Schaltflächen zur Aktivierung der Standortfunktionen.
Der interessanteste Aspekt ist der Umgang mit den Berechtigungen und das Abrufen von Werten aus den beiden APIs.
Es gibt verschiedene Fälle, die wir im Verhalten unserer Anwendung abdecken müssen, je nach aktuellem Status der Berechtigungen:
1. Wenn Nutzer:innen zuvor die erforderlichen Berechtigungen erteilt haben, können wir sofort mit der Abfrage des Standorts beginnen und müssen die Berechtigungsabfrage nicht auslösen.
2. Wenn die Berechtigung bei einem früheren Besuch verweigert wurde, können wir dies entweder als Entscheidung der Nutzer:innen akzeptieren oder eine Benutzeroberfläche mit Anweisungen für den Zugriff und die Änderung der Website-Einstellungen anzeigen. Die zweite Option empfiehlt sich besonders, wenn der Nutzerstandort wichtig für die Anwendung ist.
3. Die dritte und häufigste Option ist, dass der Berechtigungsstatus 'prompt' ist, was bedeutet, dass der/die Benutzer:in noch keine Entscheidung getroffen hat und gefragt werden muss. Die Benutzeroberfläche sollte in diesem Fall erklären, wofür der Standort verwendet wird und eine Schaltfläche anbieten, um den Genehmigungsprozess zu starten.
Abfrage der Berechtigungen
Um Informationen über den aktuellen Berechtigungs-Status zu erhalten, können Sie die Permissions API abfragen, die in den meisten modernen Browsern verfügbar ist (in Safari ab Version 16):
async queryPermissionsState(): Promise<PermissionState> {
try {
const { state } = await navigator.permissions.query({ name: 'geolocation' });
return state; // can be ‘prompt’, ‘granted’, or ‘denied’
} catch (err) {
// when the permissions-API isn't available (e.g. Safari prior to 16.0),
// we have to assume we have to ask.
return 'prompt';
}
}Wenn der von dieser Funktion zurückgegebene Berechtigungsstatus “granted” ist, kann die Anwendung sofort mit der Abfrage des Standorts beginnen. Lautet der Status “prompt”, sollte die Anwendung darauf warten, dass der/ die Nutzer:in die Funktion aktiviert, z.B. indem eine Taste gedrückt wird. Sobald dies geschieht, können wir zunächst die Erlaubnis zur Verwendung der Geräteorientierung einholen:
try {
permissionState = await DeviceOrientationEvent.requestPermission();
} catch() {
permissionState = ‘granted’;
}Dies muss in einen Exception-Handler verpackt werden, da einige Browser das DeviceOrientationEvent oder den requestPermission-Aufruf nicht implementieren. Wenn sie nicht vorhanden ist, brauchen wir keine Erlaubnis, sie zu verwenden, so dass jede Exception ignoriert werden kann. Damit dies funktioniert, muss der Aufruf von requestPermission im Rahmen eines vertrauenswürdigen Events erfolgen, also eines Events, das durch eine Benutzeraktion erzeugt wurde.
Die Geolocation API bietet keine separaten Funktionen, um um Erlaubnis zu bitten. Stattdessen werden die Erlaubnisaufforderungen ausgelöst, wenn die Anwendung zum ersten Mal auf die Geolocation-API zugreift:
const permissionState = await new Promise<PermissionState>(
(resolve, reject) => {
navigator.geolocation.getCurrentPosition(
() => resolve('granted'),
err => {
if (!(err instanceof GeolocationPositionError)) {
reject(err);
return;
}
if (err.code === err.PERMISSION_DENIED) {
resolve('denied');
} else if (err.code === err.TIMEOUT) {
// when a timeout occurs, we know that the permission had been
// granted, otherwise we would get the 'permission denied' error.
resolve('granted');
}
},
{enableHighAccuracy: true, timeout: 10, maximumAge: Infinity}
);
}
);An diesem Punkt sind wir nur daran interessiert, den Berechtigungsdialog auszulösen und nicht an der zurückgegebenen Position. Deshalb können wir einen sehr kurzen Timeout einstellen, so dass der Aufruf fast sofort zurückkehrt, nachdem die Berechtigung erteilt wurde.
Abrufen der Position
Für die Position auf der Karte möchten wir eine ständig aktualisierte Position erhalten. Hier kommen die beiden anderen Methoden der Geolocation API ins Spiel: watchPosition und clearWatch.
Wie die oben verwendete getCurrentPosition-Methode erhält watchPosition drei Parameter: einen Erfolgs-Callback, einen Fehler-Callback und ein Objekt mit weiteren Parametern. Sie gibt eine Watcher-ID zurück, die benötigt wird, um den Watcher zu beenden, wenn er nicht mehr benötigt wird.
const watcherId = navigator.geolocation.watchPosition(
positionResult => {
const {latitude, longitude, accuracy} = positionResult.coords;
},
err => {},
{enableHighAccuracy: true}
);
// once the location is no longer needed
navigator.geolocation.clearWatch(watcherId);Und das ist im Grunde alles. Mit diesen Informationen können Sie die Standortabfrage und Geräteorientierung in Ihrer eigenen Anwendung implementieren. Den vollständigen Code für die Demo und die tatsächliche Implementierung des Positions-/Kompass-/Genauigkeitsmarkers, den wir verwenden, gibt es in diesem Github-Repository zur freien Verwendung:
https://github.com/ubilabs/geolocation-deviceorientation-demo
