Geolocation API w komponentach React

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) jednokrotnie żąda lokalizacji urządzenia. Procedura obsługi powodzenia otrzymuje obiekt GeolocationPosition. Jest to odpowiednie rozwiązanie, gdy lokalizacja jest potrzebna tylko raz, na przykład do znalezienia najbliższego sklepu po kliknięciu przycisku, a nie do śledzenia ciągłego przemieszczania się.

navigator.geolocation.watchPosition(successCallback, errorCallback, options) wywołuje procedurę obsługi za każdym razem, gdy zmieni się pozycja urządzenia. Zwraca numeryczny identyfikator watchId. Jest to odpowiednie rozwiązanie w zastosowaniach czasu rzeczywistego, takich jak śledzenie dostawy lub nawigacja zakręt po zakręcie, gdy pozycja musi być na bieżąco aktualna.

Obiekt GeolocationPosition zawiera właściwość coords z wartościami latitude, longitude i accuracy (w metrach). Dodatkowe opcjonalne pola to altitude, altitudeAccuracy, heading i speed. Pole timestamp określa moment zarejestrowania pozycji.

Procedura obsługi błędu otrzymuje obiekt GeolocationPositionError z numeryczną właściwością code. Kod 1 oznacza PERMISSION_DENIED (użytkownik odmówił zgody), kod 2 oznacza POSITION_UNAVAILABLE (awaria sprzętu lub sieci), a kod 3 oznacza TIMEOUT (żądanie trwało zbyt długo). Zawsze należy obsłużyć wszystkie trzy przypadki.

Obserwator watchPosition działa bezterminowo, dopóki nie zostanie zatrzymany. W useEffect należy zwrócić funkcję sprzątającą, która wywołuje navigator.geolocation.clearWatch(watchId). Jeśli sprzątanie zostanie pominięte, obserwator będzie działać po odmontowaniu komponentu, zużywając baterię i potencjalnie aktualizując stan odmontowanego komponentu.

Hook useGeolocation zarządza stanem statusu, który może przyjmować cztery wartości: idle (żądanie nie zostało jeszcze wysłane), loading (żądanie jest w toku), success (pozycja została odebrana) oraz error (żądanie zakończyło się niepowodzeniem). Przechowuje także w stanie wartości position i errorMessage. Komponenty otrzymują w ten sposób przejrzysty i spójny interfejs.

Gdy użytkownik odmówi dostępu do geolokalizacji, należy wyświetlić pomocny komunikat wyjaśniający, dlaczego funkcja potrzebuje dostępu do lokalizacji oraz jak ponownie włączyć go w ustawieniach przeglądarki. Użytkownikom nigdy nie należy wyświetlać surowego kodu błędu. Należy zaoferować możliwość ręcznego wpisania adresu, aby funkcja pozostała użyteczna bez zgody na dostęp do lokalizacji.

Podobnie jak większość zaawansowanych API przeglądarki, geolokalizacja jest ograniczona do bezpiecznych kontekstów. navigator.geolocation ma wartość undefined na stronach korzystających ze zwykłego protokołu HTTP. Podczas pracy deweloperskiej na localhost działa bez HTTPS. W środowisku produkcyjnym należy zawsze upewnić się, że aplikacja jest udostępniana przez HTTPS, w przeciwnym razie użytkownicy nigdy nie zobaczą prośby o zgodę.

Opcjonalny trzeci argument metod getCurrentPosition i watchPosition przyjmuje obiekt opcji. enableHighAccuracy: true żąda dokładności na poziomie GPS kosztem większego zużycia energii. timeout określa maksymalną liczbę milisekund oczekiwania. maximumAge pozwala użyć zapisanej w pamięci pozycji, jeśli została zarejestrowana w ciągu podanej liczby milisekund.

Geolokalizacja umożliwia korzystanie z funkcji takich jak „znajdź sklep w pobliżu”, śledzenie kierowcy dostawy na mapie, prognoza pogody dla bieżącego miasta, posty oznaczone lokalizacją oraz obliczanie odległości między użytkownikiem a miejscem docelowym. Przed poproszeniem o zgodę zawsze należy jasno wyjaśnić użytkownikom, dlaczego aplikacja potrzebuje ich lokalizacji.

Narzędzia deweloperskie Chrome pozwalają ustawić fikcyjną lokalizację urządzenia. Należy otworzyć narzędzia deweloperskie, przejść do menu z trzema kropkami, wybrać Więcej narzędzi, a następnie Czujniki. Można wpisać współrzędne szerokości i długości geograficznej, aby symulować dowolną lokalizację. Jest to znacznie szybsze niż fizyczne przemieszczanie się w celu przetestowania funkcji zależnych od lokalizacji.

Co oznacza kod 1 obiektu GeolocationPositionError?

Należy używać getCurrentPosition do jednorazowego odczytu, a watchPosition do ciągłego śledzenia. Zawsze należy wywoływać clearWatch w funkcji sprzątającej useEffect. Należy utworzyć hook useGeolocation ze stanami idle, loading, success i error. Odmowę dostępu należy obsługiwać w przemyślany sposób, pamiętając, że geolokalizacja w środowisku produkcyjnym wymaga HTTPS.