Geolocation API nei componenti React

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) richiede una volta la posizione del dispositivo. Il callback di successo riceve un oggetto GeolocationPosition. È appropriato quando serve conoscere la posizione una sola volta, ad esempio per trovare il negozio più vicino dopo un clic su un pulsante, anziché monitorare gli spostamenti continui.

navigator.geolocation.watchPosition(successCallback, errorCallback, options) esegue continuamente il callback ogni volta che cambia la posizione del dispositivo. Restituisce un valore numerico watchId. È adatto a casi d'uso in tempo reale, come il monitoraggio delle consegne o la navigazione turn-by-turn, in cui la posizione deve rimanere aggiornata.

L'oggetto GeolocationPosition contiene una proprietà coords con latitude, longitude e accuracy (in metri). Tra i campi opzionali aggiuntivi vi sono altitude, altitudeAccuracy, heading e speed. Il campo timestamp indica quando è stata acquisita la posizione.

Il callback di errore riceve un oggetto GeolocationPositionError con una proprietà numerica code. Il codice 1 è PERMISSION_DENIED (l'utente ha rifiutato), il codice 2 è POSITION_UNAVAILABLE (errore hardware o di rete) e il codice 3 è TIMEOUT (la richiesta ha impiegato troppo tempo). Gestisca sempre tutti e tre i casi.

Un listener di watchPosition rimane attivo indefinitamente finché non viene arrestato. In useEffect, restituisca una funzione di pulizia che chiami navigator.geolocation.clearWatch(watchId). Se dimentica la pulizia, il monitoraggio continua anche dopo lo smontaggio del componente, consumando la batteria e potenzialmente aggiornando uno stato non più montato.

Un hook useGeolocation gestisce uno stato con quattro possibili valori: idle (richiesta non ancora effettuata), loading (richiesta in corso), success (posizione ricevuta) ed error (operazione non riuscita). Mantiene inoltre nello stato position e errorMessage. I componenti ricevono così un'interfaccia chiara e coerente.

Quando l'utente nega l'accesso alla geolocalizzazione, mostri un messaggio utile che spieghi perché la funzionalità richiede l'accesso alla posizione e come riattivarlo nelle impostazioni del browser. Non mostri mai agli utenti un codice di errore grezzo. Offra un'alternativa per inserire manualmente l'indirizzo, così la funzionalità rimane utilizzabile anche senza l'autorizzazione alla posizione.

Come la maggior parte delle API browser avanzate, la geolocalizzazione è limitata ai contesti sicuri. navigator.geolocation è undefined nelle pagine HTTP non sicure. Durante lo sviluppo su localhost funziona anche senza HTTPS. In produzione, si assicuri sempre che l'applicazione venga servita tramite HTTPS, altrimenti agli utenti non verrà mai mostrata la richiesta di autorizzazione.

Il terzo argomento opzionale di getCurrentPosition e watchPosition accetta un oggetto di opzioni. enableHighAccuracy: true richiede una precisione pari a quella del GPS, consumando però più energia. timeout imposta il numero massimo di millisecondi di attesa. maximumAge consente di usare una posizione memorizzata nella cache se è stata acquisita entro il numero di millisecondi specificato.

La geolocalizzazione consente funzionalità come "trovare un negozio vicino a me", il monitoraggio su una mappa dei corrieri incaricati delle consegne, le previsioni del tempo basate sulla città corrente, i post associati a una posizione e il calcolo della distanza tra l'utente e una destinazione. Comunichi sempre con chiarezza agli utenti perché l'applicazione richiede la loro posizione prima di chiedere l'autorizzazione.

Chrome DevTools consente di impostare una posizione del dispositivo simulata. Apra DevTools, vada al menu con i tre puntini, selezioni More tools, quindi Sensors. Può inserire le coordinate di latitudine e longitudine per simulare qualsiasi posizione. È molto più rapido che spostarsi fisicamente per testare funzionalità dipendenti dalla posizione.

Che cosa significa un codice 1 di GeolocationPositionError?

Utilizzi getCurrentPosition per una lettura singola e watchPosition per il monitoraggio continuo. Chiami sempre clearWatch nella funzione di pulizia di useEffect. Crei un hook useGeolocation con gli stati idle, loading, success ed error. Gestisca con chiarezza il rifiuto dell'autorizzazione e ricordi che in produzione la geolocalizzazione richiede HTTPS.