Introduzione dell'elemento HTML <geolocation>

Mari Viana

Minh Le

Thomas Steiner

Data di pubblicazione: 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 degli utenti, 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 una discussione rigorosa con la community degli standard web. Per comprendere l'utilità di questo elemento, è importante esaminare la storia del suo sviluppo e i dati che ne hanno determinato 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 <permission> generico con un attributo type (vedi la spiegazione originale). Il valore dell'attributo tipo (ad esempio, "geolocation") determina il tipo di autorizzazione richiesta. Ad esempio, la proposta iniziale include valori come fotocamera, microfono e geolocalizzazione.

Convalida del concetto

Abbiamo eseguito una prova dell'origine per l'elemento generico <permission> da Chrome 126 a 143. Lo scopo di questa prova era testare l'ipotesi secondo cui un pulsante contestuale dedicato avrebbe migliorato la fiducia e il processo decisionale degli utenti.

I risultati di questa prova dell'origine hanno supportato la convalida di questo concetto fondamentale:

• 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 nel recupero.
• 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 "precedentemente bloccato" quando viene presentato l'elemento.

Ridefinizione del design

Sebbene il concetto si sia rivelato efficace, l'implementazione ha richiesto un perfezionamento. Il feedback dei fornitori di browser, tra cui Apple (Safari/WebKit) e Mozilla (Firefox), ha indicato che un elemento "taglia unica" ha introdotto una complessità significativa in termini di comportamenti unici delle funzionalità.

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

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 richieste di autorizzazione che possono interrompere gli utenti se attivate fuori contesto o anche durante il caricamento della pagina. Fondamentalmente, 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 chiuso il prompt tre volte, applicando un blocco silenzioso temporaneo che inizialmente dura una settimana. Ciò significa che il codice legacy che tenta di attivare una richiesta potrebbe non riuscire in modo invisibile, lasciando l'utente con un'esperienza interrotta e senza un modo chiaro per attivare la funzionalità. Inoltre, i prompt standard spesso mancano di contesto. Se viene visualizzato un prompt inaspettato, gli utenti potrebbero bloccarlo d'impulso o per errore, senza sapere che questa decisione crea un blocco permanente difficile da annullare. Questo divario di contesto, piuttosto che la funzionalità in sé, è uno dei principali fattori che determinano tassi di rifiuto elevati.

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

• Intento e tempistiche chiari:facendo clic su un pulsante Usa posizione, l'utente segnala esplicitamente la sua intenzione di utilizzare la sua 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.
• Recupero semplificato:se un utente ha bloccato l'accesso alla posizione durante la navigazione di un sito (magari per errore o per mancanza di contesto), il clic sull'elemento attiva un flusso di recupero specializzato. In questo modo, gli utenti possono riattivare la posizione nel momento in cui vogliono 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 funge da pulsante di aggiornamento, recuperando immediatamente i nuovi dati senza richiedere nuovamente l'autorizzazione.

Implementazione

L'integrazione dell'elemento richiede molte meno boilerplate 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 automaticamente di recuperare la posizione quando l'elemento viene caricato, ma solo se lo stato attuale dell'autorizzazione lo consente già (evitando prompt imprevisti).
• accuracymode: accetta il valore "precise" o "approximate", corrispondente all'opzione standard enableHighAccuracy.
• watch: il comportamento passa a watchPosition(), attivando eventi ininterrottamente 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 e prevenire pattern di progettazione ingannevoli, l'elemento <geolocation> applica restrizioni di stile specifiche simili all'esperimento precedente con l'elemento <permission>. Anche se puoi personalizzare il pulsante in modo che corrisponda al tema del sito, il browser applica diverse misure di protezione:

• Leggibilità:i colori del testo e dello sfondo vengono controllati per verificare che il contrasto sia 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 trasparente in modo ingannevole.
• Dimensioni e spaziatura:l'elemento impone limiti minimi e massimi per larghezza, altezza e dimensione del carattere. I margini negativi o gli offset del contorno sono disattivati per impedire 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 traslazioni 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 miglioramento progressivo

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

L'elemento è progettato per eseguire la riduzione controllata. I browser che non supportano l'elemento <geolocation> lo tratteranno come un [HTMLUnknownElement](https://developer.mozilla.org/docs/Web/API/HTMLUnknownElement). È importante sottolineare che, se il browser supporta l'elemento, non ne esegue il rendering degli elementi secondari. In questo modo è possibile scrivere l'HTML in modo pulito sia per i browser supportati che per quelli non supportati.

Pattern di riserva personalizzato

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

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

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 Geolocation di JavaScript. Se il browser supporta l'elemento <geolocation>, il polyfill non fa nulla. Guarda questa demo che mostra il polyfill in azione. Il codice sorgente è 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 il supporto a livello di programmazione utilizzando l'interfaccia:

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

Conclusione

Siamo entusiasti di vedere come gli sviluppatori implementeranno scenari di ripetizione della posizione più performanti utilizzando il nuovo elemento HTML <geolocation>. Rappresenta un passaggio verso elementi specifici delle funzionalità, personalizzati in base 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 alla prova dell'origine dell'elemento HTML <usermedia>, che offre gli stessi vantaggi ergonomici per la videocamera e il microfono.

Link correlati

• L'elemento <geolocation> in Stato della piattaforma Chrome
• Spiegazione dell'elemento HTML di geolocalizzazione
• Pagina demo
• Mozilla Standards Position
• WebKit Standards Position

Ringraziamenti

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