Jak zintegrować geolokalizację z PWA?

Załóżmy, że użytkownik korzysta z obsługiwanej przeglądarki, możesz zmusić PWA do łatwego wykrywania lokalizacji użytkownika za pomocą interfejsu API geolokalizacji lub, mówiąc dokładniej, za pomocą znajdującego się w nim obiektu navigator.geolocation . Oto jak robisz to dobrze w swoim PWA:

Warunki wstępne

• Solidna znajomość JavaScript i HTML.
• Działające PWA obsługiwane przez HTTPS (przejdź do naszego samouczka PWA, aby je utworzyć).

Geolokalizacja w akcji

Prawdopodobnie nie jesteś teraz obcy w geolokalizacji. Za Twoją zgodą strona internetowa ze zintegrowaną geolokalizacją może uzyskać dostęp do Twojej lokalizacji, za pomocą której może wyświetlić odpowiednie informacje w Twojej okolicy lub po prostu pokazać Twoją lokalizację na mapie.

Jak zintegrować geolokalizację z PWA?

Podstawy

Najpierw musimy zrozumieć mechanizm leżący u podstaw obiektu navigator.geolocation . Obiekt navigator to obiekt kontenera, za pomocą którego udostępnianych jest nam wiele interfejsów API sieci Web. Wewnątrz kontenera navigator znajduje się obiekt geolocation , który zapewnia te trzy metody:

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

Użycie getCurrentPosition() do uzyskania pozycji użytkownika

Przeznaczenie pierwszej metody, getCurrentPosition() , powinno być oczywiste — pobiera pozycję urządzenia użytkownika.

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

Pobrane pozycje są dostępne w coords i timestamp , a coords to obiekt Coordinates . Domyślnie obiekt Coordinates jest zdefiniowany przez następujące właściwości:

• accuracy dokładność pozycji w metrach
• altitude wysokość pozycji
• accuracy dokładność wysokości pozycji w metrach
• heading , w którym zmierza urządzenie, wyrażony w stopniach. (0 = Północ, Wschód = 90, Południe = 180, Zachód = 270)
• latitude geograficzna szerokość geograficzna pozycji
• longitude geograficzna długość geograficzna pozycji
• speed prędkość, z jaką porusza się urządzenie, wyrażona w metrach/sekundę

Jak można się domyślić, urządzenia, które nie mają odpowiedniego sprzętu śledzącego, po prostu nie będą w pełni korzystać z tego interfejsu API, dlatego zwracają tylko niektóre wartości, a inne pozostawiają null . Na przykład na komputerze stacjonarnym możemy otrzymać tylko wartości dla longitude geograficznej , latitude i accuracy , podczas gdy inne żądane wartości ( heading , speed ) wracają null .

watchPosition() — okresowe pobieranie pozycji użytkownika

Chociaż wspomniana metoda jest używana głównie do wyszukiwania pozycji użytkownika, nie jest tak przydatna w przypadku aplikacji, które opierają się na dokładnej lokalizacji użytkownika, ponieważ wiadomo, że użytkownicy często się przemieszczają. Wtedy potrzebujemy metody watchPosition() z navigator.geolocation , która zarejestruje funkcję zwrotną do okresowych aktualizacji pozycji użytkownika.

 navigator.geolocation.watchPosition(pozycja => {
    console.log(pozycja)
})

Metoda watchPosition zwraca unikalny id transakcji, którego można użyć do zaprzestania otrzymywania aktualizacji lokalizacji. Korzystając z unikalnego id i metody navigator.geolocation.clearWatch() , możemy przestać obserwować pozycję:

 const id = navigator.geolocation.watchPosition(position => {
    console.log(pozycja)
})

//przestań oglądać po 10 sekundach
setTimeout(() => {
  nawigator.geolokalizacja.clearWatch(id)
}, 10 * 1000)

Obsługa błędów

Może szybko zepsuć się, gdy nie masz skonfigurowanej odpowiedniej funkcji do obsługi wszystkich błędów. Aby wyświetlić błędy w bloku czytelnym dla człowieka, musisz dodać następujący kod do funkcji wyświetlania lokalizacji:

 function locationError(błąd) {
    przełącznik(kod.błędu) {
        błąd wielkości liter.PERMISSION_DENIED:
            return "Użytkownik odrzucił prośbę o geolokalizację.";
        błąd wielkości liter.POSITION_UNAVAILABLE:
            return "Informacje o lokalizacji są obecnie niedostępne.";
        błąd wielkości liter. LIMIT CZASU:
            return "Upłynął limit czasu żądania lokalizacji użytkownika.";
        błąd wielkości liter.UNKNOWN_ERROR:
            return "Wystąpił nieznany błąd.";
    }
}

Dodatkowo możesz to przetestować w konsoli:

 navigator.geolocation.getCurrentPosition(pozycja => {
  console.log(pozycja)
}, błąd => {
	konsola.error(błąd)
})

Spowoduje to zwrócenie właściwości code , gdzie 1 oznacza odmowę uprawnień użytkownika, 2 oznacza, że ​​pozycja użytkownika jest obecnie niedostępna, a 3 oznacza, że ​​upłynął limit czasu żądania.

Poza podstawami

Zrozumienie podstaw to jedno, ale zawsze możesz starać się być lepszym. Oto, jak możesz jeszcze bardziej ulepszyć funkcję geolokalizacji.

Limit czasu podczas wyszukiwania współrzędnych

W przypadku, gdy użytkownicy mają powolny stan sieci, można użyć limitu czasu, aby wskazać, że operacja wygasła. Aby dodać limit czasu, musimy dodać trzeci parametr, w którym znajdują się następujące właściwości:

• timeout liczba milisekund przed wygaśnięciem operacji.
• maxiumAge maksymalny wiek pozycji buforowanej przez przeglądarki, mierzony w milisekundach.
• enableHighAccuracy to oczywista opcja prawda/fałsz, która może pochłaniać więcej czasu i zasobów w celu uzyskania dokładniejszych pozycji.

 navigator.geolocation.getCurrentPosition(pozycja => {
  console.log(pozycja)
}, błąd => {
	konsola.error(błąd)
}, {
  limit czasu: 2000,
  maksymalny wiek: 20000,
  enableHighAccuracy: prawda
})

Wyświetlanie pozycji użytkownika w Google Maps

Korzystając z Google Maps API możemy wyświetlić pozycję użytkownika na mapie Google.

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

W celu demonstracji interfejsu Google Map API w sieci zalecamy ten przewodnik od Google: Wyświetlaj pozycję użytkownika lub urządzenia na mapach. W przewodniku znajdziesz podstawowy kod HTML ze zintegrowanym interfejsem API Map Google.

Alternatywnie, użyj react-geolocated React dla swojego PWA opartego na React

Jeśli nie czujesz się na siłach, react-geolocated React jest również świetnym sposobem na zintegrowanie geolokalizacji z aplikacją opartą na React w szybki i bezproblemowy sposób. Po prostu zainstaluj moduł na istniejącym PWA, używając:

 npm zainstaluj reak-geolocated --save

Następnie postępuj zgodnie z instrukcjami podanymi w oficjalnym linku GitHub i powinieneś mieć dla siebie funkcjonalne PWA z wbudowaną geolokalizacją.

Wniosek

I to wszystko dla procesu integracji geolokalizacji Twojego PWA. Jeśli w którejkolwiek części samouczka okaże się to trudne, nie wahaj się zadać nam pytania poniżej!

Sprzedawcom Magento szukającym niezawodnego rozwiązania oferujemy kompletne i opłacalne rozwiązanie Magento PWA dla Twojej firmy.