L'API Geolocation ti consente di scoprire la posizione dell'utente, previo suo consenso.
L'API Geolocation ti consente di scoprire, con il consenso dell'utente, la sua posizione. Puoi utilizzare questa funzionalità per attività come guidare un utente verso la sua destinazione e applicare il geotag ai contenuti creati dagli utenti, ad esempio per contrassegnare il luogo in cui è stata scattata una foto.
L'API Geolocation ti consente anche di vedere dove si trova l'utente e di tenerlo d'occhio mentre si sposta, sempre con il suo consenso (e solo mentre la pagina è aperta). In questo modo, si creano molti casi d'uso interessanti, come l'integrazione con i sistemi di backend per preparare un ordine per il ritiro se l'utente si trova nelle vicinanze.
Quando utilizzi l'API Geolocation, devi tenere presente diversi aspetti. Questa guida illustra i casi d'uso e le soluzioni più comuni.
Riepilogo
- Utilizza la geolocalizzazione quando è utile per l'utente.
- Chiedi l'autorizzazione come risposta chiara a un'attivazione dall'utente.
- Utilizza il rilevamento delle funzionalità nel caso in cui il browser di un utente non supporti la geolocalizzazione.
- Non limitarti a imparare come implementare la geolocalizzazione, ma scopri il modo migliore per utilizzarla.
- Testa la geolocalizzazione con il tuo sito.
Quando utilizzare la geolocalizzazione
- Trova il punto in cui l'utente è più vicino a una posizione fisica specifica per personalizzare l'esperienza utente.
- Personalizzare le informazioni (ad esempio le notizie) in base alla posizione dell'utente.
- Mostra la posizione di un utente su una mappa.
- Tagga i dati creati all'interno della tua applicazione con la posizione dell'utente (ad esempio, aggiungi un tag geografico a un'immagine).
Chiedi l'autorizzazione in modo responsabile
Recenti studi sugli utenti hanno dimostrato che gli utenti non si fidano dei siti che chiedono semplicemente di fornire la loro posizione al caricamento pagina. Quali sono le best practice?
Presumi che gli utenti non ti forniranno la loro posizione
Molti utenti non vorranno darti la loro posizione, quindi devi adottare uno stile di sviluppo difensivo.
- Gestisci tutti gli errori dell'API Geolocation in modo da poter adattare il tuo sito a questa condizione.
- Spiega in modo chiaro ed esplicito perché hai bisogno della posizione.
- Se necessario, utilizza una soluzione di riserva.
Utilizza un'opzione di riserva se la geolocalizzazione è obbligatoria
Ti consigliamo di non richiedere l'accesso alla posizione attuale dell'utente nel tuo sito o nella tua applicazione. Tuttavia, se il tuo sito o la tua applicazione richiede la posizione attuale dell'utente, esistono soluzioni di terze parti che ti consentono di ottenere una stima della posizione attuale della persona.
Queste soluzioni spesso funzionano esaminando l'indirizzo IP dell'utente e mappandolo agli indirizzi fisici registrati nel database RIPE. Queste posizioni spesso non sono molto precise e in genere indicano la posizione dell'hub di telecomunicazioni o della torre di telefonia mobile più vicina all'utente. In molti casi, potrebbero non essere nemmeno così precisi, soprattutto se l'utente utilizza una VPN o un altro servizio di proxy.
Richiedi sempre l'accesso alla posizione in seguito a un'attivazione dall'utente
Assicurati che gli utenti capiscano perché stai chiedendo la loro posizione e quale sarà il vantaggio per loro. Richiederla immediatamente sulla home page durante il caricamento del sito comporta un'esperienza utente negativa.
Invece, fornisci all'utente un invito all'azione chiaro o un'indicazione che un'operazione richiederà l'accesso alla sua posizione. In questo modo, l'utente può associare più facilmente la richiesta di accesso del sistema all'azione appena avviata.
Fornisci un'indicazione chiara del fatto che un'azione richiederà la posizione dell'utente
In uno studio del team di Google Ads, quando a un utente è stato chiesto di prenotare una camera d'albergo a Boston per una conferenza imminente su un sito di hotel specifico, gli è stato chiesto di condividere la sua posizione GPS subito dopo aver toccato l'invito all'azione "Trova e prenota" nella home page.
In alcuni casi, l'utente si è sentito frustrato perché non capiva perché gli venivano mostrati hotel a San Francisco quando voleva prenotare una camera a Boston.
Un'esperienza migliore consiste nell'assicurarsi che gli utenti capiscano perché stai chiedendo loro la posizione. Aggiungi un indicatore ben noto e comune a tutti i dispositivi, come un telemetro, o un invito all'azione esplicito come "Trova nelle vicinanze".
Incoraggia delicatamente gli utenti a concedere l'autorizzazione di accesso alla loro posizione
Non hai accesso alle attività degli utenti. Sai esattamente quando gli utenti non consentono l'accesso alle loro posizioni, ma non sai quando ti concedono l'accesso; sai solo di aver ottenuto l'accesso quando vengono visualizzati i risultati.
È buona norma "sollecitare " gli utenti a compiere un'azione se è necessario che la completino.
Ti consigliamo di:
- Imposta un timer che si attiva dopo un breve periodo; 5 secondi è un buon valore.
- Se ricevi un messaggio di errore, mostralo all'utente.
- Se ricevi una risposta positiva, disattiva il timer ed elabora i risultati.
- Se, dopo il timeout, non hai ricevuto una risposta positiva, mostra una notifica all'utente.
- Se la risposta arriva in un secondo momento e la notifica è ancora presente, rimuovila dallo schermo.
button.onclick = function () {
var startPos;
var nudge = document.getElementById('nudge');
var showNudgeBanner = function () {
nudge.style.display = 'block';
};
var hideNudgeBanner = function () {
nudge.style.display = 'none';
};
var nudgeTimeoutId = setTimeout(showNudgeBanner, 5000);
var geoSuccess = function (position) {
hideNudgeBanner();
// We have the location, don't display banner
clearTimeout(nudgeTimeoutId);
// Do magic with location
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
switch (error.code) {
case error.TIMEOUT:
// The user didn't accept the callout
showNudgeBanner();
break;
}
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
Supporto browser
La maggior parte dei browser ora supporta l'API Geolocation, ma è buona norma verificare sempre il supporto prima di eseguire qualsiasi operazione.
Puoi verificare facilmente la compatibilità testando la presenza dell'oggetto di geolocalizzazione:
// check for Geolocation support
if (navigator.geolocation) {
console.log('Geolocation is supported!');
} else {
console.log('Geolocation is not supported for this Browser/OS.');
}
Determinazione della posizione attuale dell'utente
L'API Geolocation offre un metodo semplice e "one-shot" per ottenere la posizione dell'utente: getCurrentPosition(). Una chiamata a questo metodo segnala in modo asincrono la posizione attuale dell'utente.
window.onload = function () {
var startPos;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
navigator.geolocation.getCurrentPosition(geoSuccess);
};
Se è la prima volta che un'applicazione su questo dominio richiede le autorizzazioni, il browser in genere verifica il consenso dell'utente. A seconda del browser, potrebbero essere presenti anche preferenze per consentire o non consentire sempre le ricerche delle autorizzazioni, nel qual caso la procedura di conferma viene ignorata.
A seconda del dispositivo di localizzazione utilizzato dal browser, l'oggetto posizione potrebbe contenere molto di più della semplice latitudine e longitudine; ad esempio, potrebbe includere un'altitudine o una direzione. Non puoi sapere quali informazioni aggiuntive utilizza il sistema di localizzazione finché non restituisce effettivamente i dati.
Monitoraggio della posizione dell'utente
L'API Geolocation ti consente di ottenere la posizione dell'utente (con il suo consenso) con una singola chiamata a getCurrentPosition().
Se vuoi monitorare continuamente la posizione dell'utente, utilizza il metodo dell'API Geolocation watchPosition(). Funziona in modo simile a
getCurrentPosition(), ma si attiva più volte quando il software di posizionamento:
- Ottiene un blocco più preciso sull'utente.
- Determina che la posizione dell'utente sta cambiando.
var watchId = navigator.geolocation.watchPosition(function (position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});
Quando utilizzare la geolocalizzazione per monitorare la posizione dell'utente
- Vuoi ottenere un rilevamento più preciso della posizione dell'utente.
- L'applicazione deve aggiornare l'interfaccia utente in base ai nuovi dati sulla posizione.
- La tua applicazione deve aggiornare la logica di business quando l'utente entra in una determinata zona definita.
Best practice per l'utilizzo della geolocalizzazione
Sempre pulito e con batteria risparmiata
Il monitoraggio delle modifiche a una geolocalizzazione non è un'operazione senza costi. Sebbene i sistemi operativi possano introdurre funzionalità della piattaforma per consentire alle applicazioni di collegarsi al sottosistema geografico, tu, in qualità di sviluppatore web, non hai idea del supporto offerto dal dispositivo dell'utente per il monitoraggio della sua posizione e, mentre osservi una posizione, stai impegnando il dispositivo in un'elaborazione aggiuntiva.
Quando non hai più bisogno di monitorare la posizione dell'utente, chiama clearWatch per disattivare i sistemi di geolocalizzazione.
Gestisci gli errori in modo efficace
Purtroppo, non tutte le ricerche di località vanno a buon fine. Ad esempio, potrebbe non essere stato possibile individuare un GPS o l'utente potrebbe aver disattivato improvvisamente le ricerche della posizione. In caso di errore, viene chiamato un secondo argomento facoltativo di getCurrentPosition() per consentirti di informare l'utente all'interno del callback:
window.onload = function () {
var startPos;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
Riduci la necessità di avviare l'hardware di geolocalizzazione
Per molti casi d'uso, non è necessaria la posizione più aggiornata dell'utente, ma è sufficiente una stima approssimativa.
Utilizza la proprietà facoltativa maximumAge per indicare al browser di utilizzare un risultato di geolocalizzazione ottenuto di recente. In questo modo, non solo la risposta è più rapida se l'utente ha già richiesto i dati in precedenza, ma si impedisce anche al browser di avviare le interfacce hardware di geolocalizzazione, come la triangolazione Wi-Fi o il GPS.
window.onload = function () {
var startPos;
var geoOptions = {
maximumAge: 5 * 60 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Non far aspettare l'utente, imposta un timeout
A meno che non imposti un timeout, la richiesta della posizione attuale potrebbe non restituire mai un risultato.
window.onload = function () {
var startPos;
var geoOptions = {
timeout: 10 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Preferisci una posizione approssimativa a una posizione precisa
Se vuoi trovare il negozio più vicino a un utente, è improbabile che tu abbia bisogno di una precisione di 1 metro. L'API è progettata per fornire una posizione approssimativa che viene restituita il più rapidamente possibile.
Se hai bisogno di un livello di precisione elevato, puoi eseguire l'override dell'impostazione predefinita con l'opzione enableHighAccuracy. Utilizza questa opzione con parsimonia: la risoluzione è più lenta e consuma più batteria.
window.onload = function () {
var startPos;
var geoOptions = {
enableHighAccuracy: true,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Emula la geolocalizzazione con Chrome DevTools
Una volta configurata la geolocalizzazione, ti consigliamo di:
- Testa il funzionamento della tua app in diverse posizioni geografiche.
- Verifica che l'app si degradi correttamente quando la geolocalizzazione non è disponibile.
Puoi eseguire entrambe le operazioni da Chrome DevTools.
- Apri Chrome DevTools.
- Premi Esc per aprire il riquadro Console.
- Apri il menu del riquadro a scomparsa della console
- Fai clic sull'opzione Sensori per visualizzare la scheda Sensori.
Da qui puoi eseguire l'override della posizione impostandola su una città principale preimpostata, inserire una posizione personalizzata o disattivare la geolocalizzazione impostando l'override su Posizione non disponibile.