Przedstawiamy element HTML <geolocation>

Mari Viana

Minh Le

Thomas Steiner

Data publikacji: 13 stycznia 2026 r.

Od Chrome 144 możesz używać nowego elementu HTML <geolocation>. Ten element oznacza znaczącą zmianę w sposobie, w jaki witryny proszą o dane o lokalizacji użytkownika – odchodzimy od wywoływanych przez skrypt próśb o uprawnienia na rzecz deklaratywnego sposobu działania, który jest zorientowany na działania użytkownika. Ogranicza to ilość kodu standardowego wymaganego do obsługi stanów uprawnień i błędów oraz zapewnia silniejszy sygnał intencji użytkownika, co pomaga uniknąć interwencji przeglądarki (np. cichego blokowania).

Wprowadzenie tej funkcji jest wynikiem szeroko zakrojonych testów w rzeczywistych warunkach i intensywnych dyskusji ze społecznością zajmującą się standardami internetowymi. Aby zrozumieć przydatność tego elementu, warto poznać historię jego rozwoju i dane, które wpłynęły na jego projekt.

Od ogólnego <permission> do konkretnego <geolocation>

Element <geolocation> to najnowsza wersja inicjatywy Page-Embedded Permission Control, która początkowo była proponowana jako ogólny element <permission> z atrybutem type (patrz oryginalny opis). Wartość atrybutu type (np. "geolocation") określa typ żądanego uprawnienia. Na przykład początkowa propozycja zawiera wartości takie jak kamera, mikrofon i geolokalizacja.

Weryfikacja koncepcji

Od Chrome 126 do Chrome 143 przeprowadziliśmy wersję próbną origin ogólnego elementu <permission>. Celem tego testu było sprawdzenie hipotezy, że specjalny przycisk kontekstowy zwiększy zaufanie użytkowników i ułatwi im podejmowanie decyzji.

Wyniki tego testowania origin potwierdziły to podstawowe założenie:

• Firma Zoom odnotowała spadek o 46,9% liczby błędów związanych z przechwytywaniem obrazu z kamery lub dźwięku z mikrofonu (takich jak blokady na poziomie systemu) dzięki wykorzystaniu tego elementu do prowadzenia użytkowników przez proces przywracania.
• Firma Immobiliare.it odnotowała wzrost liczby udanych przepływów geolokalizacji o 20%.
• Firma ZapImóveis odnotowała 54,4% skuteczność w przypadku użytkowników, którzy po wyświetleniu elementu wrócili do stanu „wcześniej zablokowany”.

Redefinicja projektu

Koncepcja okazała się skuteczna, ale jej wdrożenie wymagało dopracowania. Opinie dostawców przeglądarek, w tym Apple (Safari/WebKit) i Mozilla (Firefox), wskazywały, że element „uniwersalny” wprowadza znaczną złożoność w zakresie unikalnych zachowań funkcji.

W związku z tym przeszliśmy od ogólnej kontroli uprawnień do elementów ukierunkowanych na konkretne możliwości (patrz dyskusja w WICG). Element <geolocation> jest pierwszym z tych specjalistycznych elementów sterujących, który został wprowadzony. Oprócz tego opracowujemy też specjalny element <usermedia> (do dostępu do aparatu i mikrofonu), który ma własny, oddzielny eksperyment z pochodzeniem.

W przeciwieństwie do pierwotnej propozycji, która koncentrowała się na zarządzaniu stanem uprawnień (czyli zezwalaniem lub odrzucaniem), te nowe elementy działają jako pośrednicy danych, skutecznie zastępując w większości przypadków konieczność bezpośredniego wywoływania interfejsów JavaScript API.

Dlaczego warto używać elementu <geolocation>?

Obecnie procesy geolokalizacji korzystają z interfejsu Geolocation API, który wywołuje prośby o uprawnienia, które mogą przeszkadzać użytkownikom, jeśli są wyświetlane w nieodpowiednim kontekście lub nawet podczas wczytywania strony. Co ważne, poleganie na tych poleceniach staje się coraz mniej opłacalne ze względu na interwencje przeglądarek. Na przykład Chrome aktywnie blokuje prośby o uprawnienia, jeśli użytkownik 3 razy odrzuci powiadomienie. Wymusza to tymczasowe blokowanie ciche, które początkowo trwa tydzień. Oznacza to, że starszy kod próbujący wywołać prośbę może nie działać, co spowoduje, że użytkownik nie będzie mógł korzystać z funkcji i nie będzie miał możliwości jej włączenia. Ponadto standardowym promptom często brakuje kontekstu. Jeśli prośba pojawi się niespodziewanie, użytkownicy mogą ją odruchowo lub przypadkowo zablokować, nie wiedząc, że ta decyzja spowoduje trwałe zablokowanie, które trudno cofnąć. To luka w kontekście, a nie sama funkcja, jest główną przyczyną wysokiego odsetka odrzuceń.

Element <geolocation> rozwiązuje problem z luką kontekstową, ponieważ zapewnia, że żądania są inicjowane wyłącznie przez użytkownika. Ten model ma 3 zalety:

• Jasny zamiar i odpowiedni moment: klikając przycisk użyj lokalizacji, użytkownik wyraźnie sygnalizuje zamiar użycia swojej lokalizacji w danym momencie. Sygnalizuje to, że rozumieją wartość lokalizacji i chcą z niej aktywnie korzystać, co przekształca potencjalne zablokowanie w skuteczną interakcję.
• Uproszczone przywracanie: jeśli użytkownik wcześniej zablokował dostęp do lokalizacji podczas przeglądania witryny (być może przez przypadek lub z powodu braku kontekstu), kliknięcie elementu spowoduje uruchomienie specjalnego procesu przywracania. Ułatwia to ponowne włączenie lokalizacji w momencie, gdy użytkownik chce z niej skorzystać, bez konieczności przechodzenia do ustawień witryny w przeglądarce.
• Automatyczne odświeżanie: jeśli uprawnienia zostały już przyznane, kliknięcie elementu działa jak przycisk odświeżania, który natychmiast pobiera nowe dane bez ponownego wyświetlania prośby.

Implementacja

Integracja elementu wymaga znacznie mniej kodu niż interfejs JavaScript API. Zamiast ręcznie zarządzać wywołaniami zwrotnymi i stanami błędów, deweloperzy mogą dodać tag do strony i nasłuchiwać zdarzenia 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);
  }
}

Kluczowe atrybuty i właściwości

• autolocate: automatycznie próbuje pobrać lokalizację, gdy element się wczytuje, ale tylko wtedy, gdy bieżący stan uprawnień na to pozwala (zapobiega nieoczekiwanym prośbom).
• accuracymode: akceptuje wartość "precise" lub "approximate", co odpowiada standardowej opcji enableHighAccuracy.
• watch: zmienia zachowanie, aby pasowało do watchPosition(), i ciągle wywołuje zdarzenia, gdy użytkownik się porusza.
• position: Właściwość tylko do odczytu w elemencie DOM, która zwraca obiekt GeolocationPosition, gdy jest dostępny.
• error: właściwość tylko do odczytu, która zwraca wartość GeolocationPositionError, jeśli żądanie się nie powiedzie.

Ograniczenia dotyczące stylu

Aby zapewnić zaufanie użytkowników i zapobiegać wzorcom projektowania wprowadzającym w błąd, element <geolocation> ma określone ograniczenia dotyczące stylu, podobne do wcześniejszego eksperymentu z elementem <permission>. Przycisk można dostosować do motywu witryny, ale przeglądarka wymusza kilka ograniczeń:

• Czytelność: sprawdzamy, czy kolory tekstu i tła mają wystarczający kontrast (zwykle co najmniej 3:1), aby prośba o uprawnienia była zawsze czytelna. Dodatkowo kanał alfa (przezroczystość) musi być ustawiony na 1, aby zapobiec wprowadzającej w błąd przezroczystości elementu.
• Rozmiar i odstępy: element wymusza minimalne i maksymalne granice szerokości, wysokości i rozmiaru czcionki. Ujemne marginesy i przesunięcia konturów są wyłączone, aby zapobiec wizualnemu zasłanianiu elementu lub jego zwodniczemu nakładaniu się na inne treści.
• Integralność wizualna: efekty zniekształcające są ograniczone – na przykład transformacja obsługuje tylko przesunięcia 2D i skalowanie proporcjonalne.
• Pseudoklasy CSS: element obsługuje stylizację opartą na stanie, np. :granted (gdy uprawnienia są aktywne).

Strategia progresywnego ulepszania

Wiemy, że standaryzacja nowych elementów HTML to proces stopniowy. Deweloperzy mogą jednak już dziś zastosować element <geolocation> bez utraty zgodności z innymi przeglądarkami.

Element został zaprojektowany tak, aby w przypadku problemów z działaniem jego funkcjonalność była stopniowo ograniczana. Przeglądarki, które nie obsługują elementu <geolocation>, będą traktować go jako [HTMLUnknownElement](https://developer.mozilla.org/docs/Web/API/HTMLUnknownElement). Ważne: jeśli przeglądarka obsługuje ten element, nie będzie renderować elementów podrzędnych. Umożliwia to pisanie przejrzystego kodu HTML zarówno w przypadku obsługiwanych, jak i nieobsługiwanych przeglądarek.

Niestandardowy wzorzec rezerwowy

Jeśli chcesz w pełni kontrolować działanie w przypadku braku obsługi, możesz użyć elementów podrzędnych, np. przycisku, który połączysz ze zwykłym interfejsem Geolocation API w JavaScript.

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

Wypełnienie

Możesz też zainstalować z npm polyfill, który w sposób przejrzysty i automatyczny zastępuje wszystkie wystąpienia <geolocation> elementem niestandardowym <geo-location> (z myślnikiem) obsługiwanym przez zwykły interfejs Geolocation API w JavaScript. Jeśli przeglądarka obsługuje element <geolocation>, wypełnienie nie robi nic. Zapoznaj się z tym filmem demonstracyjnym, który pokazuje działanie polyfillu. Kod źródłowy jest dostępny na GitHubie.

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

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

Wykrywanie cech

W przypadku bardziej złożonej logiki możesz programowo wykrywać obsługę za pomocą interfejsu:

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

Podsumowanie

Cieszymy się, że deweloperzy będą mogli wdrażać bardziej wydajne scenariusze ponownego pobierania lokalizacji za pomocą nowego elementu HTML <geolocation>. Jest to zmiana w kierunku elementów związanych z określonymi funkcjami, które są dostosowane do tego, jak użytkownicy korzystają obecnie z internetu.

W przypadku innych zastosowań uprawnień od wersji Chrome 144 możesz wziąć udział w testowaniu origin elementu HTML <usermedia>, co zapewni te same korzyści w zakresie ergonomii w przypadku kamery i mikrofonu.

Powiązane artykuły

• Element <geolocation> na stronie Stan platformy Chrome
• Wyjaśnienie elementu HTML Geolocation
• Strona demonstracyjna
• Stanowisko Mozilli w sprawie standardów
• Stan standardów WebKit

Podziękowania

Ten dokument został sprawdzony przez Andy'ego Paicu, Gilberto Cocchi i Rachel Andrew.