{"id":164050,"date":"2025-05-14T09:00:00","date_gmt":"2025-05-14T07:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/geolocation-api-localizzare-utenti-html5\/"},"modified":"2025-05-14T09:00:00","modified_gmt":"2025-05-14T07:00:00","slug":"geolocation-api-localizzare-utenti-html5","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/geolocation-api-localizzare-utenti-html5\/","title":{"rendered":"Geolocation API: Come Localizzare gli Utenti con HTML5"},"content":{"rendered":"

La Geolocation API<\/strong> \u00e8 una delle API web pi\u00f9 potenti introdotte con HTML5, permettendo alle applicazioni web di accedere alla posizione geografica dell’utente tramite il browser. Questa funzionalit\u00e0 apre scenari applicativi straordinari: dallo store locator che mostra i negozi pi\u00f9 vicini, alle app di consegna che tracciano la posizione in tempo reale, fino alle mappe interattive personalizzate. In questa guida analizzeremo come implementare la geolocalizzazione in modo corretto, rispettando la privacy degli utenti e gestendo tutti i casi limite.<\/p>\n

Come Funziona la Geolocation API<\/h2>\n

La Geolocation API \u00e8 accessibile attraverso l’oggetto navigator.geolocation<\/strong>, disponibile nel browser. Il browser determina la posizione dell’utente combinando diverse fonti di dati, la cui disponibilit\u00e0 varia in base al dispositivo: GPS<\/strong> (la fonte pi\u00f9 precisa, disponibile su smartphone e tablet), Wi-Fi<\/strong> (triangolazione basata sulle reti wireless circostanti), celle telefoniche<\/strong> (per i dispositivi mobili) e indirizzo IP<\/strong> (la fonte meno precisa, usata come fallback).<\/p>\n

La precisione della posizione dipende dalla fonte utilizzata. Il GPS pu\u00f2 raggiungere una precisione di pochi metri, il Wi-Fi di circa 20-50 metri, le celle telefoniche di alcune centinaia di metri, mentre la geolocalizzazione basata su IP pu\u00f2 essere imprecisa di diversi chilometri. Il browser sceglie automaticamente la fonte pi\u00f9 accurata disponibile, ma \u00e8 possibile influenzare questa scelta tramite le opzioni della richiesta.<\/p>\n

Un requisito fondamentale \u00e8 che la Geolocation API funziona esclusivamente su connessioni HTTPS<\/strong>. Questa restrizione, introdotta progressivamente dai browser a partire dal 2016, garantisce che i dati di posizione dell’utente viaggino in modo crittografato. Su HTTP, la chiamata a navigator.geolocation restituisce undefined o genera un errore. L’unica eccezione \u00e8 localhost per lo sviluppo locale.<\/p>\n

getCurrentPosition: Ottenere la Posizione Corrente<\/h2>\n

Il metodo principale della Geolocation API \u00e8 getCurrentPosition()<\/strong>, che richiede la posizione dell’utente una sola volta. Accetta tre parametri: una callback di successo (obbligatoria), una callback di errore (opzionale ma fortemente consigliata) e un oggetto di opzioni (opzionale).<\/p>\n

La callback di successo<\/strong> riceve un oggetto Position che contiene un oggetto coords con le informazioni sulla posizione. Le propriet\u00e0 principali di coords sono: latitude<\/strong> e longitude<\/strong> (sempre disponibili, espresse in gradi decimali), accuracy<\/strong> (precisione in metri), altitude<\/strong> (altitudine in metri, pu\u00f2 essere null), altitudeAccuracy<\/strong> (precisione dell’altitudine), heading<\/strong> (direzione di spostamento in gradi) e speed<\/strong> (velocit\u00e0 in metri al secondo). L’oggetto Position contiene anche una propriet\u00e0 timestamp<\/strong> con il momento della rilevazione.<\/p>\n

La callback di errore<\/strong> riceve un oggetto PositionError con una propriet\u00e0 code che indica il tipo di errore: 1 (PERMISSION_DENIED)<\/strong> se l’utente ha negato il permesso, 2 (POSITION_UNAVAILABLE)<\/strong> se la posizione non \u00e8 determinabile, e 3 (TIMEOUT)<\/strong> se la richiesta ha superato il tempo massimo. \u00c8 essenziale gestire tutti e tre i casi per offrire un’esperienza utente robusta.<\/p>\n

L’oggetto opzioni<\/strong> permette di configurare tre parametri: enableHighAccuracy<\/strong> (booleano, richiede la massima precisione possibile, utilizzando il GPS se disponibile; aumenta il consumo di batteria), timeout<\/strong> (tempo massimo in millisecondi per ottenere la posizione) e maximumAge<\/strong> (et\u00e0 massima in millisecondi di una posizione memorizzata nella cache che \u00e8 accettabile restituire; 0 forza una nuova rilevazione).<\/p>\n

watchPosition: Monitoraggio Continuo della Posizione<\/h2>\n

Il metodo watchPosition()<\/strong> funziona in modo simile a getCurrentPosition() ma, anzich\u00e9 restituire la posizione una sola volta, continua a monitorarla e chiama la callback di successo ogni volta che la posizione cambia significativamente. Questo metodo \u00e8 essenziale per applicazioni di navigazione, tracking in tempo reale e qualsiasi scenario che richieda aggiornamenti continui.<\/p>\n

watchPosition() restituisce un identificatore numerico<\/strong> (watch ID) che pu\u00f2 essere utilizzato successivamente per interrompere il monitoraggio tramite il metodo clearWatch(watchId)<\/strong>. \u00c8 fondamentale chiamare clearWatch quando il monitoraggio non \u00e8 pi\u00f9 necessario, per evitare un consumo eccessivo di batteria e risorse del dispositivo.<\/p>\n

La frequenza degli aggiornamenti dipende dal dispositivo e dalla fonte di dati utilizzata. Con il GPS attivo e enableHighAccuracy impostato su true, gli aggiornamenti possono essere molto frequenti (ogni secondo o meno). Con fonti meno precise come il Wi-Fi, gli aggiornamenti sono meno frequenti. L’applicazione deve essere progettata per gestire sia aggiornamenti rapidi che intervalli prolungati senza aggiornamenti.<\/p>\n

Un pattern comune prevede di mostrare un indicatore di caricamento durante la prima rilevazione e di aggiornare progressivamente la posizione sulla mappa. Per le applicazioni di navigazione, \u00e8 utile combinare watchPosition con la bussola del dispositivo (disponibile tramite la DeviceOrientation API) per mostrare la direzione in cui l’utente sta guardando.<\/p>\n

Il Modello di Permessi e la Privacy<\/h2>\n

La Geolocation API \u00e8 una delle API web pi\u00f9 sensibili dal punto di vista della privacy<\/strong>, e i browser implementano un rigoroso modello di permessi per proteggere gli utenti. Quando un sito web richiede la posizione, il browser mostra un prompt all’utente chiedendo esplicitamente il consenso. L’utente pu\u00f2 concedere il permesso, negarlo o semplicemente ignorare la richiesta (che viene trattata come un rifiuto dopo il timeout).<\/p>\n

Il permesso \u00e8 vincolato all’origine (dominio) e viene memorizzato dal browser. L’utente pu\u00f2 revocare il permesso in qualsiasi momento attraverso le impostazioni del browser o cliccando sull’icona del lucchetto nella barra degli indirizzi. \u00c8 importante progettare l’applicazione in modo che funzioni anche senza geolocalizzazione, offrendo alternative come l’inserimento manuale dell’indirizzo.<\/p>\n

Dal punto di vista del GDPR<\/strong> e della normativa europea sulla privacy, i dati di geolocalizzazione sono considerati dati personali. Questo significa che, oltre al consenso del browser, potrebbe essere necessario un consenso esplicito nell’ambito dell’informativa sulla privacy del sito. \u00c8 consigliabile spiegare chiaramente all’utente perch\u00e9 la posizione viene richiesta e come verr\u00e0 utilizzata, prima di invocare getCurrentPosition().<\/p>\n

La Permissions API<\/strong> (navigator.permissions.query) permette di verificare lo stato del permesso di geolocalizzazione prima di effettuare la richiesta, consentendo di personalizzare l’interfaccia in base allo stato corrente (“granted”, “denied” o “prompt”). Questo approccio migliora l’esperienza utente evitando richieste di permesso inattese.<\/p>\n

Casi d’Uso Pratici e Strategie di Fallback<\/h2>\n

Le applicazioni pratiche della Geolocation API sono molteplici e coprono settori diversi dello sviluppo web:<\/p>\n