Giới thiệu phần tử HTML <geolocation>

Mari Viana

Minh Le

Thomas Steiner

Ngày xuất bản: 13 tháng 1 năm 2026

Kể từ Chrome 144, bạn có thể dùng phần tử HTML <geolocation> mới. Phần tử này thể hiện một sự thay đổi lớn trong cách các trang web yêu cầu dữ liệu vị trí của người dùng – chuyển từ lời nhắc cấp quyền do tập lệnh kích hoạt sang trải nghiệm khai báo, hướng đến hành động của người dùng. Điều này giúp giảm mã nguyên mẫu cần thiết để xử lý trạng thái và lỗi về quyền, đồng thời cung cấp tín hiệu mạnh hơn về ý định của người dùng, giúp tránh các biện pháp can thiệp của trình duyệt (chẳng hạn như chặn thầm lặng).

Việc ra mắt này là kết quả của quá trình thử nghiệm rộng rãi trong thế giới thực và thảo luận kỹ lưỡng với cộng đồng tiêu chuẩn web. Để hiểu được tính hữu ích của phần tử này, điều quan trọng là bạn phải xem xét lịch sử phát triển của phần tử và dữ liệu thúc đẩy thiết kế của phần tử.

Từ `<permission>` chung chung đến `<geolocation>` cụ thể

Phần tử <geolocation> là sự phát triển mới nhất của sáng kiến Kiểm soát quyền được nhúng trên trang, trong đó ban đầu phần tử này được đề xuất dưới dạng phần tử <permission> chung có thuộc tính type (xem giải thích ban đầu). Giá trị của thuộc tính loại (ví dụ: "geolocation") sẽ xác định loại quyền được yêu cầu. Ví dụ: đề xuất ban đầu bao gồm các giá trị như camera, micrô và vị trí địa lý.

Xác thực khái niệm

Chúng tôi đã chạy một thử nghiệm theo nguyên gốc cho phần tử <permission> chung từ Chrome 126 đến 143. Mục đích của thử nghiệm này là kiểm tra giả thuyết rằng một nút chuyên dụng, trong bối cảnh sẽ cải thiện niềm tin của người dùng và khả năng đưa ra quyết định.

Kết quả của bản dùng thử theo nguyên gốc này đã hỗ trợ việc xác thực khái niệm cốt lõi này:

Zoom cho biết số lỗi chụp bằng camera hoặc micrô (chẳng hạn như các trình chặn ở cấp hệ thống) đã giảm 46,9% khi sử dụng phần tử này để hướng dẫn người dùng cách khắc phục.
Immobiliare.it nhận thấy số lượng quy trình định vị địa lý thành công tăng 20%.
ZapImóveis nhận thấy tỷ lệ thành công là 54,4% ở những người dùng khôi phục từ trạng thái "bị chặn trước đó" khi thấy phần tử này.

Định nghĩa lại thiết kế

Mặc dù ý tưởng này đã thành công, nhưng việc triển khai cần được tinh chỉnh. Ý kiến phản hồi của các nhà cung cấp trình duyệt (bao gồm cả Apple (Safari/WebKit) và Mozilla (Firefox)) cho thấy rằng một phần tử "phù hợp với mọi kích thước" đã gây ra sự phức tạp đáng kể liên quan đến các hành vi có khả năng duy nhất.

Do đó, chúng tôi đã chuyển từ một chế độ kiểm soát quyền chung sang các phần tử cụ thể theo chức năng (xem thảo luận của WICG). Phần tử <geolocation> là phần tử đầu tiên trong số các chế độ kiểm soát chuyên biệt này được ra mắt. Sau đó, chúng tôi cũng đang phát triển một phần tử <usermedia> chuyên dụng (để truy cập vào camera và micrô), có thử nghiệm nguồn gốc riêng.

Không giống như đề xuất ban đầu tập trung vào việc quản lý trạng thái quyền (tức là cho phép hoặc từ chối), những phần tử mới này hoạt động như các thành phần trung gian dữ liệu, thay thế hiệu quả nhu cầu gọi trực tiếp các API JavaScript cho hầu hết các trường hợp sử dụng.

Bảng này mô tả sự khác biệt giữa API JavaScript vị trí địa lý, phần tử `<permission>` và phần tử `<geolocation>` mới.
Tính năng	Geolocation JS API	Phần tử HTML	Phần tử HTML
Sự kiện kích hoạt cho lời nhắc về quyền	Thực thi tập lệnh mệnh lệnh (`getCurrentPosition`)	Người dùng nhấp vào phần tử do trình duyệt kiểm soát	Người dùng nhấp vào phần tử do trình duyệt kiểm soát
Vai trò của trình duyệt	Quyết định câu lệnh dựa trên trạng thái	Đóng vai trò là một trung gian cấp quyền	Đóng vai trò là một trung gian dữ liệu
Trách nhiệm của trang web	Gọi API JavaScript theo cách thủ công, xử lý lệnh gọi lại và quản lý lỗi về quyền	Triển khai API `geolocation` sau khi được cấp quyền	Nghe sự kiện `location`
Mục tiêu cốt lõi	Quyền truy cập cơ bản vào thông tin vị trí	Yêu cầu quyền	Yêu cầu cấp quyền và quyền truy cập thông tin vị trí

Tại sao nên sử dụng phần tử `<geolocation>`?

Hiện tại, các luồng vị trí địa lý dựa vào Geolocation API. API này sẽ kích hoạt lời nhắc cấp quyền có thể làm gián đoạn người dùng nếu được kích hoạt ngoài ngữ cảnh hoặc ngay cả khi tải trang. Điều quan trọng là việc dựa vào những lời nhắc bắt buộc này đang trở nên ít khả thi hơn do các biện pháp can thiệp của trình duyệt. Ví dụ: Chrome chủ động chặn các yêu cầu cấp quyền nếu người dùng đã đóng lời nhắc 3 lần, thực thi chặn tạm thời ở chế độ im lặng. Ban đầu, chế độ này sẽ kéo dài trong một tuần. Điều này có nghĩa là mã cũ cố gắng kích hoạt một lời nhắc có thể âm thầm thất bại, khiến người dùng có trải nghiệm không tốt và không có cách nào rõ ràng để bật tính năng này. Hơn nữa, các câu lệnh tiêu chuẩn thường thiếu ngữ cảnh. Nếu lời nhắc xuất hiện đột ngột, người dùng có thể vô tình hoặc theo phản xạ chặn lời nhắc đó mà không biết rằng quyết định này sẽ tạo ra một lệnh chặn vĩnh viễn và khó đảo ngược. Khoảng trống về bối cảnh này (chứ không phải bản thân tính năng) là yếu tố chính dẫn đến tỷ lệ từ chối cao.

Phần tử <geolocation> giải quyết vấn đề về khoảng trống ngữ cảnh bằng cách đảm bảo các yêu cầu hoàn toàn do người dùng bắt đầu. Mô hình này mang lại 3 lợi thế riêng biệt:

Ý định và thời gian rõ ràng: Bằng cách nhấp vào nút sử dụng vị trí, người dùng sẽ cho biết rõ ràng ý định sử dụng vị trí của họ tại thời điểm cụ thể đó. Điều này cho thấy họ hiểu rõ giá trị và chủ động muốn sử dụng vị trí, biến một lượt chặn tiềm ẩn thành một lượt tương tác thành công.
Quy trình khôi phục đơn giản: Nếu trước đây người dùng chặn quyền truy cập vào vị trí khi duyệt một trang web (có thể là do vô tình hoặc thiếu thông tin), thì việc nhấp vào phần tử sẽ kích hoạt một quy trình khôi phục chuyên biệt. Điều này giúp họ bật lại dịch vụ vị trí tại thời điểm họ thực sự muốn sử dụng dịch vụ vị trí mà không gặp phải sự phiền toái khi phải chuyển đến phần cài đặt trang web của trình duyệt.
Tự động làm mới: Nếu bạn đã cấp quyền, việc nhấp vào phần tử này sẽ hoạt động như một nút làm mới, ngay lập tức tìm nạp dữ liệu mới mà không cần nhắc lại.

Triển khai

Việc tích hợp phần tử này đòi hỏi ít mã lặp lại hơn đáng kể so với JavaScript API. Thay vì quản lý các lệnh gọi lại và trạng thái lỗi theo cách thủ công, nhà phát triển có thể thêm thẻ vào trang và theo dõi sự kiện 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);
  }
}

Thuộc tính và đặc điểm chính

autolocate: Tự động cố gắng truy xuất vị trí khi phần tử tải, nhưng chỉ khi trạng thái hiện tại của quyền đã cho phép (ngăn chặn các lời nhắc không mong muốn).
accuracymode: Chấp nhận giá trị "precise" hoặc "approximate", tương ứng với lựa chọn enableHighAccuracy tiêu chuẩn.
watch: Chuyển đổi hành vi để khớp với watchPosition(), liên tục kích hoạt các sự kiện khi người dùng di chuyển.
position: Một thuộc tính chỉ đọc trên phần tử DOM, trả về đối tượng GeolocationPosition sau khi có sẵn.
error: Một thuộc tính chỉ đọc trả về GeolocationPositionError nếu yêu cầu không thành công.

Bản minh hoạ được liên kết trong chú thích có các nút để kiểm thử 3 loại cấu hình. — Bản minh hoạ phần tử `<geolocation>` cho thấy 3 cấu hình chính: Yêu cầu thủ công, Yêu cầu tự động (sử dụng tính năng tự động định vị) và Theo dõi vị trí (sử dụng đồng hồ). Bạn có thể kiểm thử những hành vi này trên trang trình diễn trực tiếp.

Các hạn chế về kiểu

Để đảm bảo người dùng tin tưởng và ngăn chặn các mẫu thiết kế lừa đảo, phần tử <geolocation> áp dụng các quy định hạn chế về kiểu dáng cụ thể tương tự như thử nghiệm phần tử <permission> trước đó. Mặc dù bạn có thể tuỳ chỉnh nút cho phù hợp với giao diện của trang web, nhưng trình duyệt sẽ thực thi một số biện pháp bảo vệ:

Khả năng dễ đọc: Màu văn bản và màu nền được kiểm tra để đảm bảo độ tương phản đầy đủ (thường là tỷ lệ tối thiểu 3:1) nhằm đảm bảo luôn đọc được yêu cầu cấp quyền. Ngoài ra, bạn phải đặt kênh alpha (độ mờ) thành 1 để phần tử không bị trong suốt một cách lừa đảo.
Kích thước và khoảng cách: Phần tử này áp dụng các giới hạn tối thiểu và tối đa cho chiều rộng, chiều cao và kích thước phông chữ. Các lề âm hoặc độ lệch đường viền bị vô hiệu hoá để ngăn phần tử bị che khuất về mặt hình ảnh hoặc chồng lên nội dung khác một cách lừa đảo.
Tính toàn vẹn về hình ảnh: Các hiệu ứng làm biến dạng bị giới hạn – ví dụ: transform chỉ hỗ trợ các phép biến đổi 2D và tỷ lệ thu phóng tương ứng.
Các lớp giả CSS: Phần tử này hỗ trợ kiểu dựa trên trạng thái, chẳng hạn như:granted (khi quyền đang hoạt động).

Chiến lược cải tiến tăng dần

Chúng tôi hiểu rằng việc chuẩn hoá các phần tử HTML mới là một quá trình diễn ra từ từ. Tuy nhiên, nhà phát triển có thể áp dụng phần tử <geolocation> ngay hôm nay mà không làm ảnh hưởng đến khả năng tương thích đối với người dùng trên các trình duyệt khác.

Phần tử này được thiết kế để giảm cấp độ từng bước. Trình duyệt không hỗ trợ phần tử <geolocation> sẽ coi phần tử này là [HTMLUnknownElement](https://developer.mozilla.org/docs/Web/API/HTMLUnknownElement). Điều quan trọng là nếu trình duyệt hỗ trợ phần tử này, thì trình duyệt sẽ không kết xuất các phần tử con. Điều này cho phép viết HTML một cách rõ ràng cho cả trình duyệt được hỗ trợ và không được hỗ trợ.

Mẫu dự phòng tuỳ chỉnh

Nếu muốn tự kiểm soát hoàn toàn trải nghiệm dự phòng, bạn có thể sử dụng các phần tử con như một nút mà bạn kết nối với API Vị trí thông thường của JavaScript.

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

Polyfill

Ngoài ra, bạn có thể cài đặt một polyfill từ npm. Polyfill này sẽ thay thế tất cả các trường hợp xuất hiện của <geolocation> bằng một phần tử tuỳ chỉnh <geo-location> (lưu ý dấu gạch ngang) được hỗ trợ bởi API Vị trí địa lý thông thường của JavaScript một cách minh bạch và tự động. Nếu trình duyệt hỗ trợ phần tử <geolocation>, thì polyfill sẽ không làm gì cả. Hãy xem bản minh hoạ này để thấy polyfill đang hoạt động. Mã nguồn có trên GitHub.

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

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

Phát hiện đối tượng

Đối với logic phức tạp hơn, bạn có thể phát hiện hỗ trợ theo phương thức lập trình bằng cách sử dụng giao diện:

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

Tóm tắt

Chúng tôi rất mong được thấy cách các nhà phát triển triển khai nhiều tình huống thử lại vị trí hiệu quả hơn bằng cách sử dụng phần tử HTML <geolocation> mới. Đây là một bước chuyển đổi sang các phần tử dành riêng cho chức năng, được điều chỉnh cho phù hợp với cách người dùng thực sự sử dụng web hiện nay.

Đối với các trường hợp sử dụng quyền khác, từ Chrome 144, bạn có thể tham gia bản dùng thử theo nguyên gốc phần tử HTML <usermedia>, mang lại những lợi ích tương tự về mặt công thái học cho camera và micrô.

Đường liên kết có liên quan

Lời cảm ơn

Tài liệu này được Andy Paicu, Gilberto Cocchi và Rachel Andrew xem xét.