So integrieren Sie Geolokalisierung in Ihre PWA

Angenommen, der Benutzer verwendet einen unterstützten Browser, können Sie Ihre PWA dazu bringen, den Standort des Benutzers einfach zu erkennen, indem Sie die Geolocation-API verwenden, oder genauer gesagt, indem Sie das darin navigator.geolocation -Objekt verwenden. So machen Sie es in Ihrer PWA richtig:

Voraussetzungen

• Solide JavaScript- und HTML-Kenntnisse.
• Eine funktionierende PWA , die über HTTPS bereitgestellt wird (folgen Sie unserem PWA-Tutorial, um eine zu erstellen).

Geolokalisierung in Aktion

Die Geolokalisierung ist Ihnen wahrscheinlich inzwischen nicht mehr fremd. Mit Ihrer Erlaubnis kann eine Website mit integrierter Geolokalisierung auf Ihren Standort zugreifen und relevante Informationen in Ihrer Umgebung anzeigen oder Ihren Standort einfach auf der Karte anzeigen.

So integrieren Sie Geolokalisierung in Ihre PWA

Die Grundlagen

Zunächst müssen wir den zugrunde liegenden Mechanismus hinter dem navigator.geolocation Objekt verstehen. Das navigator -Objekt ist ein Container-Objekt, mit dem uns viele Web-APIs zur Verfügung gestellt werden. Im navigator Container befindet sich das geolocation Objekt, das von diesen drei Methoden bereitgestellt wird:

• getCurrentPosition()
• watchPosition()
• clearWatch()

Verwenden getCurrentPosition() , um die Position des Benutzers abzurufen

Der Zweck der ersten Methode, getCurrentPosition() , sollte für Sie selbsterklärend sein – sie ruft eine Position des Geräts des Benutzers ab.

 navigator.geolocation.getCurrentPosition(() => {})

Die abgerufenen Positionen sind in coords und timestamp verfügbar, wobei coords ein Coordinates ist. Standardmäßig wird das Coordinates durch diese Eigenschaften definiert:

• accuracy die Genauigkeit der Position in Metern
• altitude die Höhe der Position
• accuracy die Genauigkeit der Positionshöhe in Metern
• heading Richtung, in die sich das Gerät bewegt, ausgedrückt in Grad. (0 = Norden, Osten = 90, Süden = 180, Westen = 270)
• latitude Der Breitengrad der Position
• longitude Der Längengrad der Position
• speed die Geschwindigkeit, mit der sich das Gerät bewegt, ausgedrückt in Metern/Sekunde

Wie Sie vielleicht erraten haben, erhalten Geräte, denen die richtige Tracking-Hardware fehlt, einfach nicht alle Vorteile dieser API, sodass nur einige Werte zurückgegeben und andere Werte null . Auf einem Desktop-Computer können wir beispielsweise nur die Werte für longitude , latitude und accuracy erhalten, während die anderen angeforderten Werte ( heading , speed ) null zurückgeben.

watchPosition() — periodisches Abrufen der Position des Benutzers

Während die oben genannte Methode hauptsächlich zum Abrufen der Position des Benutzers verwendet wird, ist sie für Apps, die auf den genauen Standort des Benutzers angewiesen sind, nicht so nützlich, da Ihre Benutzer bekanntermaßen häufig unterwegs sind. In diesem Fall benötigen wir die Methode watchPosition() von navigator.geolocation , die eine Callback-Funktion für regelmäßige Aktualisierungen der Position des Benutzers registriert.

 navigator.geolocation.watchPosition(position => {
    Konsole.log (Position)
})

Die watchPosition Methode gibt eine eindeutige Transaktions- id zurück, die verwendet werden kann, um den Empfang von Standortaktualisierungen zu stoppen. Mit der eindeutigen id und der Methode navigator.geolocation.clearWatch() können wir die Suche nach einer Position beenden:

 const id = navigator.geolocation.watchPosition(position => {
    Konsole.log (Position)
})

// Nach 10 Sekunden aufhören zu schauen
setTimeout(() => {
  navigator.geolocation.clearWatch(id)
}, 10 * 1000)

Fehlerbehandlung

Es kann ziemlich schnell drunter und drüber gehen, wenn Sie keine geeignete Funktion eingerichtet haben, um alle Fehler zu behandeln. Um Fehler in einem für Menschen lesbaren Block anzuzeigen, müssen Sie den folgenden Code zu Ihrer Funktion zum Anzeigen des Standorts hinzufügen:

 Funktion locationError(Fehler) {
    Schalter (Fehlercode) {
        Fallfehler.PERMISSION_DENIED:
            return "Benutzer hat die Anfrage zur Geolokalisierung abgelehnt.";
        case error.POSITION_UNAVAILABLE:
            return "Standortinformationen sind derzeit nicht verfügbar.";
        case error.TIMEOUT:
            return "Zeitüberschreitung bei Anfrage nach Benutzerstandort.";
        case error.UNKNOWN_ERROR:
            return "Ein unbekannter Fehler ist aufgetreten.";
    }
}

Zusätzlich können Sie dies in der Konsole testen:

 navigator.geolocation.getCurrentPosition(position => {
  Konsole.log (Position)
}, Fehler => {
	Konsole.Fehler (Fehler)
})

Dadurch wird eine code zurückgegeben, wobei 1 bedeutet, dass die Benutzerberechtigung verweigert wurde, 2 bedeutet, dass die Benutzerposition derzeit nicht verfügbar ist, und 3 bedeutet, dass die Anforderung abgelaufen ist.

Über die Grundlagen hinausgehend

Die Grundlagen zu verstehen ist eine Sache, aber Sie können immer danach streben, besser zu werden. So können Sie Ihre Geolokalisierungsfunktion weiter verbessern.

Eine Zeitüberschreitung beim Nachschlagen von Koordinaten

Falls Ihre Benutzer einen trägen Netzwerkzustand haben, kann ein Timeout verwendet werden, um anzuzeigen, dass der Vorgang abgelaufen ist. Um ein Timeout hinzuzufügen, müssen wir einen dritten Parameter hinzufügen, der die folgenden Eigenschaften enthält:

• timeout die Anzahl von Millisekunden, bevor die Operation abgelaufen ist.
• maxiumAge das maximale Alter der von den Browsern zwischengespeicherten Position, gemessen in Millisekunden.
• enableHighAccuracy eine selbsterklärende Wahr/Falsch-Option, die möglicherweise mehr Zeit und Ressourcen verbraucht, um genauere Positionen abzurufen.

 navigator.geolocation.getCurrentPosition(position => {
  Konsole.log (Position)
}, Fehler => {
	Konsole.Fehler (Fehler)
}, {
  Zeitüberschreitung: 2000,
  maximalesAlter: 20000,
  enableHighAccuracy: wahr
})

Anzeige der Benutzerposition auf Google Maps

Mithilfe der Google Maps API können wir die Position des Nutzers auf einer Google-Karte anzeigen.

 <script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

Für eine Demonstration der Google Map API im Web empfehlen wir diese Anleitung von Google: Benutzer- oder Geräteposition auf Karten anzeigen. In der Anleitung finden Sie ein einfaches HTML mit integrierter Google Maps-API.

Verwenden Sie alternativ react-geolocated für Ihre React-basierte PWA

Falls Sie sich nicht danach fühlen, ist React- react-geolocated auch eine großartige Möglichkeit, die Geolokalisierung schnell und mühelos in Ihre React-basierte App zu integrieren. Installieren Sie das Modul einfach auf Ihrer vorhandenen PWA mit:

 npm install respond-geolocated --save

Befolgen Sie danach die Schritte, die im offiziellen GitHub-Link angegeben sind, und Sie sollten eine funktionierende PWA mit integrierter Geolokalisierung haben.

Fazit

Und das war's für den Geolocation-Integrationsprozess Ihrer PWA. Wenn Sie sich in irgendeinem Teil des Tutorials schwer tun, zögern Sie nicht, uns unten eine Frage zu stellen!

Für Magento-Händler, die nach einer zuverlässigen Lösung suchen, bieten wir eine vollständige und kostengünstige Magento-PWA-Lösung für Ihr Unternehmen.