Update Chrome 144: HTML Punya Tag <Geolocation> Baru, Lebih Aman Dan Simpel!

Chrome 144 kita sudah dapat menggunakan elemen HTML baru yaitu <geolocation>. Elemen ini merupakan cara baru sebuah situs meminta izin atau data lokasi dari pengguna. Biasanya untuk meminta izin lokasi dari pengguna harus dipicu dengan skrip beralih ke pengalaman berorientasi dengan tindakan pengguna. Elemen <geolocation> ini merupakan evolusi dari inisiatif kontrol izin yang awalnya diusulkan sebagai elemen <permission> dengan attribute "type" yaitu "geolocation".

Hasil Uji Coba

Elemen <geolocation> mengambil uji coba dari <permission> Chrome 126 hingga 143 pada beberapa situs seperti Zoom, Immobiliare dan ZapImóveis. Dari hasil pengujian tersebut terjadi penurunan dalam error pemblokiran lokasi dan mengalami peningkatan dalam alur geolokasi yang berhasil.

Kenapa menggunakan elemen <geolocation>?

Dengan elemen <geolocation> ini dapat mengurangi kode boilerplate atau penggunaan lib yang berlebihan dan membantu pengguna secara sadar memberikan izin kepada sebuah situs serta menghindari dari pemblokiran senyap yang diakibatkan misal pengguna menolak izin memberikan lokasi lebih dari 3 kali.

Penerapan

Dengan menggunakan <geolocation> sekarang mengurangi kode yang komplek untuk mendapatkan izin dan mengambil data geolokasi. Sekarang hanya menggunakan elemen <geolocation> dan menangani error dan pengambilan data melalui callback event yaitu onlocation seperti pada gambar berikut.

<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);
  }
}

Sumber: https://developer.chrome.com/blog/geolocation-html-element