L'API Geolocation ti consente di scoprire la posizione dell'utente, con il suo consenso.
L'API Geolocation ti consente di scoprire, con il consenso dell'utente, la sua posizione. Puoi usare questa funzionalità, ad esempio, per aiutare un utente a destinazione e per applicare tag geografici ai contenuti creati dagli utenti, ad esempio per contrassegnare il luogo in cui è stata scattata una foto.
L'API Geolocation consente inoltre di vedere dove si trova l'utente e di tenerlo sotto controllo mentre si sposta, sempre con il consenso dell'utente (e solo quando la pagina è aperta). Ciò crea molti casi d'uso interessanti, come l'integrazione con i sistemi di backend per preparare un ordine per la raccolta quando l'utente si trova nelle vicinanze.
Quando utilizzi l'API Geolocation, devi tenere presenti molte cose. Questa guida illustra i casi d'uso più comuni e le relative soluzioni.
Riepilogo
- Utilizza la geolocalizzazione quando è utile per l'utente.
- Chiedi l'autorizzazione come risposta chiara a un gesto dell'utente.
- Utilizza il rilevamento delle funzionalità se il browser di un utente non supporta la geolocalizzazione.
- Non limitarti a imparare come implementare la geolocalizzazione; scopri il modo migliore per utilizzarla.
- Testa la geolocalizzazione con il tuo sito.
Quando utilizzare la geolocalizzazione
- Scopri dove l'utente si trova più vicino a una località fisica specifica per personalizzare l'esperienza utente.
- Personalizza le informazioni (come le notizie) in base alla località dell'utente.
- Mostra la posizione di un utente su una mappa.
- Applica il tagging ai dati creati all'interno dell'applicazione con la posizione dell'utente (ovvero, applica il tagging geografico a un'immagine).
Chiedi il permesso in modo responsabile
Recenti studi sugli utenti hanno dimostrato che gli utenti sono diffidenti nei confronti dei siti che si limitano a chiedere all'utente di cedere la propria posizione al caricamento della pagina. Quali sono le best practice?
Supponiamo che gli utenti non ti forniranno la loro posizione
Molti utenti non vorranno assegnarti la loro posizione, quindi dovrai adottare uno stile di sviluppo difensivo.
- Gestisci tutti gli errori all'esterno dell'API di geolocalizzazione in modo da poter adattare il tuo sito a questa condizione.
- Spiega in modo chiaro ed esplicito l'esigenza della località.
- Se necessario, utilizza una soluzione di riserva.
Utilizza una riserva se è richiesta la geolocalizzazione
Consigliamo che il tuo sito o la tua applicazione non richiedano l'accesso alla posizione attuale dell'utente. Tuttavia, se il tuo sito o la tua applicazione richiede la posizione attuale dell'utente, esistono soluzioni di terze parti che ti consentono di avere un'idea migliore della posizione attuale dell'utente.
Spesso queste soluzioni funzionano esaminando l'indirizzo IP dell'utente e mappandolo agli indirizzi fisici registrati nel database RIPE. Queste posizioni spesso non sono molto precise, in quanto di solito indicano la posizione dell'hub di telecomunicazioni o del ripetitore di telefonia mobile più vicino all'utente. In molti casi, potrebbero non essere nemmeno così precisi, soprattutto se l'utente utilizza una VPN o un altro servizio proxy.
Richiedi sempre l'accesso alla posizione durante un gesto dell'utente
Assicurati che gli utenti capiscano perché viene richiesta la loro posizione e quali vantaggi comportano. Richiedirlo immediatamente sulla home page durante il caricamento del sito comporta un'esperienza utente scadente.
Fornisci invece all'utente un invito all'azione chiaro o un'indicazione che un'operazione richiederà l'accesso alla sua posizione. L'utente può quindi associare più facilmente la richiesta di accesso di sistema all'azione appena avviata.
Fornisci una chiara indicazione che un'azione richiederà la sua posizione
In uno studio del team di Google Ads, quando a un utente veniva chiesto di prenotare una camera d'albergo a Boston per un'imminente conferenza sul sito di un determinato hotel, gli veniva 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 sente frustrato perché non comprendeva il motivo per cui gli venivano mostrati gli hotel a San Francisco quando voleva prenotare una camera a Boston.
Un'esperienza migliore consiste nell'assicurarti che gli utenti capiscano perché viene loro chiesto la posizione. Aggiungi un indicatore noto comune a tutti i dispositivi, come un telemetro o un invito all'azione esplicito come "Trova nelle vicinanze".
Sollecita gentilmente gli utenti a concedere l'autorizzazione alla loro posizione
Non hai accesso alle attività svolte dagli utenti. Sai esattamente quando gli utenti non consentono l'accesso alle loro posizioni, ma non sai quando ti permettono di accedere; sai di aver ottenuto l'accesso solo quando vengono visualizzati i risultati.
È buona norma "spronare " gli utenti ad agire se hai bisogno che completino l'azione.
Ti consigliamo di:
- Imposta un timer che si attiva dopo un breve periodo di tempo. 5 secondi è un buon valore.
- Se ricevi un messaggio di errore, mostralo all'utente.
- Se ottieni una risposta positiva, disabilita 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 del browser
La maggior parte dei browser ora supporta l'API Geolocation, ma è buona norma verificare sempre l'assistenza prima di fare qualsiasi cosa.
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.');
}
Determinare la posizione attuale dell'utente
L'API Geolocation offre un semplice metodo "one-shot" per ottenere la posizione dell'utente: getCurrentPosition(). Una chiamata a questo metodo registra
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 del dominio richiede autorizzazioni, il browser in genere verifica il consenso degli utenti. A seconda del browser, potrebbero anche essere presenti preferenze per consentire sempre o non consentire le ricerche di autorizzazioni, nel qual caso la procedura di conferma viene bypassata.
A seconda del dispositivo di geolocalizzazione utilizzato dal browser, l'oggetto Posizione potrebbe contenere molto di più oltre a latitudine e longitudine; ad esempio, potrebbe includere un'altitudine o una direzione. Non puoi distinguere le informazioni aggiuntive utilizzate dal sistema di geolocalizzazione finché non restituisce effettivamente i dati.
Controllo della posizione dell'utente
L'API Geolocation ti consente di ottenere la posizione dell'utente (con il consenso dell'utente) con una singola chiamata a getCurrentPosition().
Se vuoi monitorare continuamente la località dell'utente, utilizza il metodo
dell'API Geolocation, watchPosition(). Funziona in modo simile a getCurrentPosition(), ma si attiva più volte come software di posizionamento:
- Consente di ottenere 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 controllare la posizione dell'utente
- Vuoi ottenere un blocco più preciso sulla posizione dell'utente.
- L'applicazione deve aggiornare l'interfaccia utente in base alle nuove informazioni sulla posizione.
- L'applicazione deve aggiornare la logica di business quando l'utente entra in una determinata zona definita.
Best practice per l'utilizzo della geolocalizzazione
Libera sempre la batteria e risparmia batteria
Il controllo delle modifiche a una geolocalizzazione non è un'operazione senza costi. Anche se i sistemi operativi potrebbero introdurre funzionalità della piattaforma per consentire alle applicazioni di collegarsi al sottosistema geografico, in qualità di sviluppatore web non hai idea del supporto che il dispositivo dell'utente può offrire per il monitoraggio della posizione dell'utente e, mentre guardi un punto, lo stai elaborando in modo eccessivo.
Quando non è più necessario monitorare la posizione dell'utente, chiama clearWatch per disattivare i sistemi di geolocalizzazione.
Gestisci gli errori senza problemi
Purtroppo non tutte le ricerche di località hanno esito positivo. Potrebbe non essere possibile localizzare un GPS o l'utente ha improvvisamente disattivato la ricerca della posizione. In caso di errore, viene chiamato un secondo argomento facoltativo per getCurrentPosition(), che ti consentirà di inviare una notifica all'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 hardware di geolocalizzazione
Per molti casi d'uso, non è necessaria la posizione più aggiornata dell'utente, è sufficiente una stima approssimativa.
Utilizza la proprietà facoltativa maximumAge per indicare al browser di utilizzare un risultato di geolocalizzazione ottenuto di recente. Questo non solo restituisce più rapidamente se l'utente ha richiesto i dati in precedenza, ma impedisce anche al browser di avviare le sue interfacce hardware di geolocalizzazione come la triangolazione del 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
Se non imposti un timeout, la richiesta per la posizione corrente potrebbe non essere mai restituita.
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 più granulare
Se vuoi trovare il negozio più vicino a un utente, è improbabile che tu abbia bisogno di un metro di precisione. L'API è progettata per fornire una posizione approssimativa che venga restituita il più rapidamente possibile.
Se hai bisogno di un livello di precisione elevato, puoi sostituire l'impostazione predefinita con l'opzione enableHighAccuracy. Usala con parsimonia: è più lenta da risolvere 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
Dopo aver impostato la geolocalizzazione, dovrai:
- Testa il funzionamento dell'app in diverse geolocalizzazioni.
- Verifica che la qualità dell'app venga ridotta correttamente quando la geolocalizzazione non è disponibile.
Puoi eseguire entrambe le operazioni da Chrome DevTools.
- Apri Chrome DevTools.
- Premi Esc per aprire il riquadro a scomparsa della console.
- Apri il menu a scomparsa della console
- Fai clic sull'opzione Sensori per visualizzare la scheda Sensori.
Da qui puoi sostituire la località con una città principale preimpostata, inserire una località personalizzata o disattivare la geolocalizzazione impostando l'override su Posizione non disponibile.