Introduzione dell'elemento HTML <geolocation>

Mari Viana

Minh Le

Thomas Steiner

Pubblicato il 13 gennaio 2026

A partire da Chrome 144, puoi utilizzare il nuovo elemento HTML <geolocation>. Questo elemento rappresenta un cambiamento importante nel modo in cui i siti richiedono i dati sulla posizione dell'utente, passando dai prompt di autorizzazione attivati da script a un'esperienza dichiarativa e orientata all'azione dell'utente. Riduce il codice boilerplate necessario per gestire gli stati e gli errori delle autorizzazioni e fornisce un segnale più forte dell'intento dell'utente, il che aiuta a evitare interventi del browser (come i blocchi silenziosi).

Questo lancio è il risultato di test approfonditi nel mondo reale e di discussioni rigorose con la community degli standard web. Per comprendere l'utilità di questo elemento, è importante esaminare la cronologia del suo sviluppo e i dati che ne hanno guidato la progettazione.

Da <permission> generico a <geolocation> specifico

L'elemento <geolocation> è l'ultima evoluzione dell'iniziativa di controllo delle autorizzazioni incorporate nella pagina, in cui inizialmente era stato proposto come elemento generico <permission> con un attributo type (vedi la spiegazione originale). Il valore di l'attributo type (ad esempio, "geolocation") determinerebbe il tipo di autorizzazione richiesta. Ad esempio, la proposta iniziale include valori come videocamera, microfono e geolocalizzazione.

Convalida del concetto

Abbiamo eseguito un origin trial per l'elemento generico <permission> da Chrome 126 a 143. Lo scopo di questa prova era verificare l'ipotesi che un pulsante dedicato, contestuale migliorasse la fiducia e il processo decisionale degli utenti.

I risultati di questo origin trial hanno supportato la convalida di questo concetto di base:

• Zoom ha registrato una riduzione del 46,9% degli errori di acquisizione della videocamera o del microfono (ad esempio, i blocchi a livello di sistema) utilizzando l'elemento per guidare gli utenti durante il ripristino.
• Immobiliare.it ha registrato un aumento del 20% dei flussi di geolocalizzazione riusciti.
• ZapImóveis ha osservato un tasso di successo del 54,4% nel recupero degli utenti da uno stato "bloccato in precedenza" quando viene visualizzato l'elemento.

Ridefinizione del design

Sebbene il concetto si sia dimostrato efficace, l'implementazione ha richiesto un perfezionamento. I feedback dei fornitori di browser, tra cui Apple (Safari/WebKit) e Mozilla (Firefox), hanno indicato che un elemento "universale" introduceva una complessità significativa per quanto riguarda i comportamenti delle funzionalità uniche.

Di conseguenza, siamo passati da un controllo delle autorizzazioni generico a elementi mirati, specifici per le funzionalità (vedi WICG discussione). L'<geolocation> elemento è il primo di questi controlli specializzati a essere lanciato. In seguito, stiamo anche sviluppando un elemento <usermedia> dedicato (per l'accesso alla videocamera e al microfono), che ha una propria prova dell'origine separata origine prova.

A differenza della proposta originale, che si concentrava sulla gestione dello stato delle autorizzazioni (ovvero consentire o negare), questi nuovi elementi fungono da mediatori di dati, sostituendo di fatto la necessità di chiamare direttamente le API JavaScript per la maggior parte dei casi d'uso.

Perché utilizzare l'elemento <geolocation>?

Attualmente, i flussi di geolocalizzazione si basano sull'API Geolocation, che attiva i prompt di autorizzazione che possono interrompere gli utenti se attivati fuori contesto o anche al caricamento della pagina. È fondamentale sottolineare che l'affidamento a questi prompt imperativi sta diventando meno praticabile a causa degli interventi del browser. Ad esempio, Chrome blocca attivamente le richieste di autorizzazione se un utente ha ignorato il prompt tre volte, applicando un blocco silenzioso temporaneo che inizialmente dura una settimana. Ciò significa che il codice legacy che tenta di attivare un prompt potrebbe non riuscire in modo silenzioso, lasciando l'utente con un'esperienza non funzionante e senza un modo chiaro per attivare la funzionalità. Inoltre, i prompt standard spesso non hanno contesto. Se viene visualizzato un prompt in modo imprevisto, gli utenti potrebbero bloccarlo in modo riflessivo o accidentale, senza sapere che questa decisione crea un blocco permanente difficile da annullare. Questa lacuna di contesto, anziché la funzionalità stessa, è un fattore determinante dei tassi di rifiuto elevati.

L'elemento <geolocation> risolve il problema della lacuna di contesto assicurandosi che le richieste siano avviate rigorosamente dall'utente. Questo modello offre tre vantaggi distinti:

• Intento e tempistica chiari: facendo clic su un pulsante Usa posizione, l'utente segnala esplicitamente il proprio intento di utilizzare la propria posizione in quel momento specifico. Ciò indica che l'utente comprende il valore e vuole utilizzare attivamente la posizione, trasformando un potenziale blocco in un'interazione riuscita.
• Ripristino semplificato: se un utente ha bloccato in precedenza l'accesso alla posizione durante la navigazione in un sito (magari per errore o per mancanza di contesto), facendo clic sull'elemento viene attivato un flusso di ripristino specializzato. In questo modo, l'utente può riattivare la posizione nel momento in cui vuole effettivamente utilizzarla, senza la difficoltà di navigare in profondità nelle impostazioni del sito del browser.
• Aggiornamento automatico: se l'autorizzazione è già stata concessa, facendo clic sull'elemento si attiva un pulsante di aggiornamento, recuperando immediatamente i nuovi dati senza richiedere nuovamente l'autorizzazione.

Implementazione

L'integrazione dell'elemento richiede un boilerplate significativamente inferiore rispetto all'API JavaScript. Anziché gestire manualmente i callback e gli stati di errore, gli sviluppatori possono aggiungere il tag alla pagina e ascoltare l'evento onlocation.

<geolocation
  onlocation="handleLocation(event)"
  autolocate
  accuracymode="precise">
</geolocation>

function handleLocation(event) {
  // Directly access the GeolocationPosition object on the element
  if (event.target.position) {
    const { latitude, longitude } = event.target.position.coords;
    console.log("Location retrieved:", latitude, longitude);
  } else if (event.target.error) {
    console.error("Error:", event.target.error.message);
  }
}

Attributi e proprietà chiave

• autolocate: tenta di recuperare automaticamente la posizione al caricamento dell'elemento, ma solo se lo stato attuale dell'autorizzazione lo consente già (impedendo prompt imprevisti).
• accuracymode: accetta un valore di "precise" o "approximate", corrispondente all'opzione enableHighAccuracy standard.
• watch: cambia il comportamento in modo che corrisponda a watchPosition(), attivando continuamente gli eventi mentre l'utente si sposta.
• position: una proprietà di sola lettura dell'elemento DOM che restituisce l'oggetto GeolocationPosition una volta disponibile.
• error: una proprietà di sola lettura che restituisce un GeolocationPositionError se la richiesta non va a buon fine.

Vincoli di stile

Per garantire la fiducia degli utenti ed evitare pattern di progettazione ingannevoli, l'<geolocation> elemento applica limitazioni di stile specifiche simili all'esperimento precedente con l' <permission> elemento. Sebbene tu possa personalizzare il pulsante in modo che corrisponda al tema del sito, il browser applica diverse misure di sicurezza:

• Leggibilità: i colori del testo e dello sfondo vengono controllati per verificare un contrasto sufficiente (in genere un rapporto di almeno 3:1) per garantire che la richiesta di autorizzazione sia sempre leggibile. Inoltre, il canale alfa (opacità) deve essere impostato su 1 per evitare che l'elemento sia ingannevolmente trasparente.
• Dimensioni e spaziatura: l'elemento applica limiti minimi e massimi per larghezza, altezza e dimensione del carattere. I margini negativi o gli offset dei contorni sono disattivati per evitare che l'elemento venga oscurato visivamente o si sovrapponga in modo ingannevole ad altri contenuti.
• Integrità visiva: gli effetti di distorsione sono limitati, ad esempio la trasformazione supporta solo le traduzioni 2D e il ridimensionamento proporzionale.
• Pseudo-classi CSS: l'elemento supporta lo stile basato sullo stato, ad esempio :granted (quando l'autorizzazione è attiva).

Strategia di potenziamento progressivo

Sappiamo che la standardizzazione di nuovi elementi HTML è un processo graduale. Tuttavia, gli sviluppatori possono adottare l'elemento <geolocation> oggi stesso senza compromettere la compatibilità per gli utenti di altri browser.

L'elemento è progettato per una riduzione controllata. I browser che non supportano l'elemento <geolocation> lo tratteranno come un HTMLUnknownElement. È importante sottolineare che, se il browser supporta l'elemento, non eseguirà il rendering degli elementi secondari. In questo modo, puoi scrivere il codice HTML in modo pulito sia per i browser supportati sia per quelli non supportati.

Pattern di fallback personalizzato

Se vuoi controllare completamente l'esperienza di fallback, puoi utilizzare elementi secondari come un pulsante a cui colleghi la normale API JavaScript Geolocation.

<geolocation onlocation="updateMap()">
  <!-- Fallback contents if the element is not supported -->
  <button onclick="navigator.geolocation.getCurrentPosition(updateMap)">
    Use my location
  </button>
</geolocation>

Prova il comportamento con un esempio di base.

Polyfill

In alternativa, puoi installare un polyfill da npm che sostituisce in modo trasparente e automatico tutte le occorrenze di <geolocation> con un elemento personalizzato <geo-location> (nota il trattino) supportato dalla normale API JavaScript Geolocation. Se il browser supporta l'elemento <geolocation>, il polyfill non esegue alcuna operazione. Dai un'occhiata a questa demo di polyfill che mostra il polyfill in azione. Il codice sorgente è disponibile su GitHub.

if (!('HTMLGeolocationElement' in window)) {
  await import('https://unpkg.com/geolocation-element-polyfill/index.js');
}

<geolocation onlocation="updateMap()"></geolocation>

Rilevamento delle funzionalità

Per una logica più complessa, puoi rilevare programmaticamente il supporto utilizzando l'interfaccia:

if ('HTMLGeolocationElement' in window) {
  // Use modern <geolocation> element logic
} else {
  // Fallback to legacy navigator.geolocation API
}

Conclusione

Non vediamo l'ora di scoprire come gli sviluppatori implementeranno scenari di ripetizione della posizione più efficienti utilizzando il nuovo <geolocation> elemento HTML. Rappresenta un passaggio verso elementi specifici per le funzionalità, adattati al modo in cui gli utenti utilizzano effettivamente il web oggi.

Per altri casi d'uso delle autorizzazioni, a partire da Chrome 144 puoi partecipare a la prova dell'origine dell'elemento HTML <usermedia> che offre gli stessi vantaggi ergonomici per la videocamera e il microfono.

Link correlati

• L'elemento <geolocation> nello stato della piattaforma Chrome
• Spiegazione dell'elemento HTML Geolocation
• Pagina demo
• Posizione degli standard Mozilla
• Posizione degli standard WebKit

Ringraziamenti

Questo documento è stato esaminato da Andy Paicu, Gilberto Cocchi e Rachel Andrew.