ขอแนะนำองค์ประกอบ HTML <geolocation>

Mari Viana

Minh Le

Thomas Steiner

เผยแพร่: 13 มกราคม 2026

ตั้งแต่ Chrome 144 คุณจะใช้<geolocation>องค์ประกอบ HTML ใหม่ได้ องค์ประกอบนี้ แสดงถึงการเปลี่ยนแปลงครั้งสำคัญในวิธีที่เว็บไซต์ขอข้อมูลตำแหน่งของผู้ใช้ โดยเปลี่ยนจาก ข้อความแจ้งขอสิทธิ์ที่ทริกเกอร์โดยสคริปต์ไปสู่ประสบการณ์การใช้งานแบบประกาศ ที่เน้นการดำเนินการของผู้ใช้ ซึ่งจะช่วยลดโค้ดมาตรฐานที่จำเป็นในการจัดการสถานะสิทธิ์และข้อผิดพลาด รวมถึงให้สัญญาณที่ชัดเจนยิ่งขึ้นเกี่ยวกับความตั้งใจของผู้ใช้ ซึ่งจะช่วยหลีกเลี่ยงการแทรกแซงของเบราว์เซอร์ (เช่น การบล็อกแบบเงียบ)

การเปิดตัวนี้เป็นผลมาจากการทดสอบในสภาพแวดล้อมจริงอย่างกว้างขวางและการพูดคุยอย่างเข้มงวดกับชุมชนมาตรฐานเว็บ หากต้องการทำความเข้าใจประโยชน์ขององค์ประกอบนี้ คุณต้องพิจารณาประวัติการพัฒนาและข้อมูล ที่ขับเคลื่อนการออกแบบ

จากคำทั่วไป `<permission>` ไปจนถึงคำเฉพาะ `<geolocation>`

องค์ประกอบ <geolocation> เป็นวิวัฒนาการล่าสุดของโครงการควบคุมสิทธิ์ที่ฝังในหน้าเว็บ ซึ่งเดิมเสนอเป็นองค์ประกอบ <permission> ทั่วไปที่มีแอตทริบิวต์ type (ดูคำอธิบายต้นฉบับ) ค่าของแอตทริบิวต์ประเภท (เช่น "geolocation") จะกำหนดประเภทของ สิทธิ์ที่ขอ เช่น ข้อเสนอเริ่มต้นมีค่าต่างๆ เช่น กล้อง ไมโครโฟน และตำแหน่งทางภูมิศาสตร์

การตรวจสอบแนวคิด

เราได้ทำการทดลองใช้จากต้นทางสำหรับองค์ประกอบ <permission> ทั่วไปตั้งแต่ Chrome 126 ถึง 143 จุดประสงค์ของการทดลองนี้คือเพื่อทดสอบสมมติฐานที่ว่าปุ่มเฉพาะในบริบทจะช่วยเพิ่มความไว้วางใจของผู้ใช้และการตัดสินใจ

ผลลัพธ์จากช่วงทดลองใช้จากต้นทางนี้สนับสนุน การตรวจสอบแนวคิดหลักนี้

Zoom รายงานว่าข้อผิดพลาดในการจับภาพกล้องหรือไมโครโฟนลดลง 46.9% (เช่น ตัวบล็อกระดับระบบ) โดยใช้คอมโพเนนต์เพื่อแนะนำผู้ใช้ตลอดการกู้คืน
Immobiliare.it ได้รับโฟลว์การระบุตำแหน่งทางภูมิศาสตร์ที่สำเร็จเพิ่มขึ้น 20%
ZapImóveis พบว่าผู้ใช้ที่กู้คืนจากสถานะ "ถูกบล็อกก่อนหน้านี้" มีอัตราความสำเร็จ 54.4% เมื่อแสดงองค์ประกอบนี้

การกำหนดการออกแบบใหม่

แม้ว่าแนวคิดนี้จะประสบความสำเร็จ แต่การนำไปใช้ยังต้องได้รับการปรับปรุง ความคิดเห็นจากผู้ให้บริการเบราว์เซอร์ ซึ่งรวมถึง Apple (Safari/WebKit) และ Mozilla (Firefox) ระบุว่าองค์ประกอบ "แบบเดียวใช้ได้ทั้งหมด" ทำให้เกิดความซับซ้อนอย่างมากเกี่ยวกับลักษณะการทำงานของความสามารถที่ไม่ซ้ำกัน

ด้วยเหตุนี้ เราจึงเปลี่ยนจากการควบคุมสิทธิ์ทั่วไปเป็นองค์ประกอบที่เจาะจงความสามารถ (ดูการสนทนาของ WICG) องค์ประกอบ <geolocation> เป็นตัวควบคุมเฉพาะทางตัวแรกที่เปิดตัว หลังจากนี้ เราจะพัฒนาองค์ประกอบ <usermedia> เฉพาะ (สำหรับการเข้าถึงกล้องและ ไมโครโฟน) ซึ่งมีการทดลองใช้ต้นทางแยกต่างหาก

องค์ประกอบใหม่เหล่านี้ทำหน้าที่เป็นตัวกลางข้อมูล ซึ่งต่างจากข้อเสนอเดิมที่มุ่งเน้นการจัดการสถานะสิทธิ์ (กล่าวคือ อนุญาตหรือปฏิเสธ) ซึ่งจะช่วยลดความจำเป็นในการเรียกใช้ JavaScript API โดยตรงสำหรับกรณีการใช้งานส่วนใหญ่

ตารางนี้อธิบายความแตกต่างระหว่าง Geolocation JavaScript API, `<permission>` องค์ประกอบ และองค์ประกอบ `<geolocation>` ใหม่
ฟีเจอร์	Geolocation JS API	องค์ประกอบ HTML	องค์ประกอบ HTML
เหตุการณ์ที่ทริกเกอร์ข้อความแจ้งขอสิทธิ์	การดำเนินการสคริปต์แบบคำสั่ง (`getCurrentPosition`)	ผู้ใช้คลิกองค์ประกอบ ที่เบราว์เซอร์ควบคุม	ผู้ใช้คลิกองค์ประกอบ ที่เบราว์เซอร์ควบคุม
บทบาทของเบราว์เซอร์	ตัดสินใจพรอมต์ตามสถานะ	ทำหน้าที่เป็นตัวกลางในการให้สิทธิ์	ทำหน้าที่เป็นตัวกลางข้อมูล
ความรับผิดชอบของเว็บไซต์	เรียกใช้ JavaScript API ด้วยตนเอง จัดการการเรียกกลับ และจัดการข้อผิดพลาดเกี่ยวกับสิทธิ์	ใช้ `geolocation` API เมื่อได้รับสิทธิ์แล้ว	ฟังกิจกรรม `location`
เป้าหมายหลัก	สิทธิ์เข้าถึงตำแหน่งขั้นพื้นฐาน	คำขอสิทธิ์	คำขอสิทธิ์และการเข้าถึงตำแหน่ง

เหตุผลที่ควรใช้องค์ประกอบ `<geolocation>`

ปัจจุบันโฟลว์ตำแหน่งทางภูมิศาสตร์ใช้ Geolocation API ซึ่ง ทริกเกอร์ข้อความแจ้งขอสิทธิ์ที่อาจขัดจังหวะผู้ใช้หากแสดงนอกบริบทหรือ แม้แต่ในหน้าเว็บที่โหลด ที่สำคัญ การพึ่งพาพรอมต์ที่จำเป็นเหล่านี้เริ่ม ใช้ไม่ได้ผลเนื่องจากการแทรกแซงของเบราว์เซอร์ เช่น Chrome จะบล็อก คำขอสิทธิ์อย่างแข็งขันหากผู้ใช้ ปิดข้อความแจ้ง 3 ครั้ง โดยจะบังคับใช้การบล็อกแบบเงียบชั่วคราว ซึ่งมีระยะเวลา 1 สัปดาห์ในตอนแรก ซึ่งหมายความว่าโค้ดเดิมที่พยายามทริกเกอร์ พรอมต์อาจล้มเหลวโดยไม่มีการแจ้งเตือน ทำให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ขัดข้องและไม่มี วิธีที่ชัดเจนในการเปิดใช้ฟีเจอร์ นอกจากนี้ พรอมต์มาตรฐานมักไม่มีบริบท หากข้อความแจ้งปรากฏขึ้นโดยไม่คาดคิด ผู้ใช้อาจบล็อกข้อความแจ้งโดยไม่ตั้งใจหรือ โดยไม่รู้ตัว ซึ่งการตัดสินใจนี้จะสร้างการบล็อกถาวรที่ ยกเลิกได้ยาก ช่องว่างของบริบทนี้ (ไม่ใช่ตัวฟีเจอร์เอง) เป็นปัจจัยหลักที่ทำให้มีอัตราการปฏิเสธสูง

องค์ประกอบ <geolocation> ช่วยแก้ปัญหาช่องว่างของบริบทโดยการตรวจสอบว่าคำขอเริ่มต้นโดยผู้ใช้เท่านั้น โมเดลนี้มีข้อดีที่แตกต่างกัน 3 ประการ ดังนี้

ความตั้งใจและเวลาที่ชัดเจน: การคลิกปุ่มใช้ตำแหน่งเป็นการส่งสัญญาณความตั้งใจของผู้ใช้ อย่างชัดเจนที่จะใช้ตำแหน่งของตนเองในขณะนั้น ซึ่งเป็นสัญญาณว่าผู้ใช้เข้าใจคุณค่าและต้องการใช้ตำแหน่งอย่างจริงจัง ซึ่งจะเปลี่ยนการบล็อกที่อาจเกิดขึ้นเป็นการโต้ตอบที่ประสบความสำเร็จ
การกู้คืนที่ง่ายขึ้น: หากผู้ใช้เคยบล็อกการเข้าถึงตำแหน่งขณะ เรียกดูเว็บไซต์ (อาจเกิดจากความไม่ตั้งใจหรือไม่มีบริบท) การคลิกองค์ประกอบ จะทริกเกอร์โฟลว์การกู้คืนเฉพาะ ซึ่งจะช่วยให้ผู้ใช้เปิดใช้ตำแหน่งอีกครั้งได้ในขณะที่ต้องการใช้ตำแหน่งจริงๆ โดยไม่ต้อง เสียเวลาในการไปยังการตั้งค่าเว็บไซต์ของเบราว์เซอร์
รีเฟรชอัตโนมัติ: หากได้รับสิทธิ์แล้ว การคลิก องค์ประกอบจะทำหน้าที่เป็นปุ่มรีเฟรช ซึ่งจะดึงข้อมูลใหม่ทันทีโดยไม่ต้อง แจ้งให้ขอสิทธิ์อีกครั้ง

การใช้งาน

การผสานรวมองค์ประกอบนี้ต้องใช้โค้ดเริ่มต้นน้อยกว่า JavaScript API มาก นักพัฒนาแอปสามารถเพิ่มแท็กลงในหน้าเว็บและรอรับเหตุการณ์ 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);
  }
}

แอตทริบิวต์และพร็อพเพอร์ตี้ที่สำคัญ

autolocate: พยายามดึงข้อมูลตำแหน่งโดยอัตโนมัติเมื่อองค์ประกอบ โหลด แต่จะทำก็ต่อเมื่อสถานะสิทธิ์ปัจจุบันอนุญาตอยู่แล้ว (ป้องกันไม่ให้มีการแจ้งเตือนที่ไม่คาดคิด)
accuracymode: รับค่า "precise" หรือ "approximate" ซึ่งสอดคล้องกับตัวเลือก enableHighAccuracy มาตรฐาน
watch: เปลี่ยนลักษณะการทำงานให้ตรงกับ watchPosition() โดยจะทริกเกอร์เหตุการณ์ อย่างต่อเนื่องเมื่อผู้ใช้เลื่อน
position: พร็อพเพอร์ตี้แบบอ่านอย่างเดียวในองค์ประกอบ DOM ที่แสดงผลออบเจ็กต์ GeolocationPosition เมื่อพร้อมใช้งาน
error: พร็อพเพอร์ตี้แบบอ่านอย่างเดียวที่แสดงผล GeolocationPositionError หากคำขอไม่สำเร็จ

การสาธิตที่ลิงก์ในคำบรรยายพร้อมปุ่มสำหรับทดสอบการกำหนดค่า 3 ประเภท — การสาธิตองค์ประกอบ `<geolocation>` ที่แสดงการกำหนดค่าหลัก 3 แบบ ได้แก่ คำขอที่กำหนดเอง คำขออัตโนมัติ (ใช้ autolocate) และตำแหน่งของนาฬิกา (ใช้นาฬิกา) คุณทดสอบลักษณะการทำงานเหล่านี้ได้ในหน้าการสาธิตแบบเรียลไทม์

ข้อจำกัดด้านการจัดรูปแบบ

<geolocation> องค์ประกอบนี้ใช้ข้อจำกัดด้านการจัดรูปแบบที่เฉพาะเจาะจงคล้ายกับการทดสอบองค์ประกอบ <permission> ก่อนหน้านี้ เพื่อให้มั่นใจในความไว้วางใจของผู้ใช้และป้องกันรูปแบบการออกแบบที่หลอกลวง แม้ว่าคุณจะปรับแต่งปุ่มให้เข้ากับธีมของเว็บไซต์ได้ แต่เบราว์เซอร์จะบังคับใช้แนวทางหลายอย่าง ดังนี้

ความสามารถในการอ่าน: ระบบจะตรวจสอบสีข้อความและสีพื้นหลังว่ามี คอนทราสต์เพียงพอ (โดยปกติจะมีอัตราส่วนอย่างน้อย 3:1) เพื่อให้มั่นใจว่าคำขอสิทธิ์จะอ่านได้เสมอ นอกจากนี้ ต้องตั้งค่าช่องอัลฟ่า (ความทึบแสง) เป็น 1 เพื่อป้องกันไม่ให้องค์ประกอบโปร่งใสอย่างหลอกลวง
การกำหนดขนาดและการเว้นวรรค: องค์ประกอบจะบังคับขอบเขตต่ำสุดและสูงสุดสำหรับ ความกว้าง ความสูง และขนาดแบบอักษร ระบบจะปิดใช้ระยะขอบเชิงลบหรือการชดเชยเส้นขอบเพื่อป้องกันไม่ให้องค์ประกอบถูกบดบังด้วยภาพหรือซ้อนทับกับเนื้อหาอื่นๆ อย่างหลอกลวง
ความสมบูรณ์ของภาพ: เอฟเฟกต์การบิดเบือนจะถูกจำกัด เช่น การเปลี่ยนรูปแบบ รองรับเฉพาะการแปล 2 มิติและการปรับขนาดตามสัดส่วน
คลาสเสมือนของ CSS: องค์ประกอบรองรับการจัดรูปแบบตามสถานะ เช่น :granted (เมื่อสิทธิ์ใช้งานอยู่)

กลยุทธ์การเพิ่มประสิทธิภาพแบบต่อเนื่อง

เราทราบดีว่าการกำหนดองค์ประกอบ HTML ใหม่ให้เป็นมาตรฐานเป็นกระบวนการที่ต้องใช้เวลา อย่างไรก็ตาม นักพัฒนาแอปสามารถใช้แท็ก <geolocation> ได้ตั้งแต่วันนี้โดยไม่ทำให้ความเข้ากันได้สำหรับผู้ใช้ในเบราว์เซอร์อื่นๆ เสียหาย

องค์ประกอบนี้ได้รับการออกแบบมาให้ลดระดับอย่างมีชั้นเชิง เบราว์เซอร์ที่ไม่รองรับองค์ประกอบ <geolocation> จะถือว่าเป็น [HTMLUnknownElement](https://developer.mozilla.org/docs/Web/API/HTMLUnknownElement) ที่สำคัญคือ หากเบราว์เซอร์รองรับองค์ประกอบดังกล่าว ก็จะไม่แสดงผลองค์ประกอบย่อย ซึ่งจะช่วยให้เขียน HTML ได้อย่างสะอาดตาสำหรับทั้งเบราว์เซอร์ที่รองรับและไม่รองรับ

รูปแบบสำรองที่กำหนดเอง

หากต้องการควบคุมประสบการณ์การทำงานสำรองด้วยตนเองอย่างเต็มที่ คุณสามารถใช้ องค์ประกอบย่อย เช่น ปุ่มที่คุณเชื่อมต่อกับ JavaScript ปกติ Geolocation API

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

Polyfill

หรือคุณจะติดตั้ง Polyfill จาก npm ที่จะ แทนที่อินสแตนซ์ทั้งหมดของ <geolocation> ด้วย Custom Element <geo-location> (โปรดสังเกตเครื่องหมายขีดกลาง) ที่ขับเคลื่อนโดย Geolocation API ของ JavaScript ปกติโดยอัตโนมัติและโปร่งใสก็ได้ หากเบราว์เซอร์รองรับองค์ประกอบ <geolocation> Polyfill จะไม่ดำเนินการใดๆ ดูเดโมนี้ที่แสดง Polyfill ในการทำงาน ซอร์ส โค้ดอยู่บน GitHub

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

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

การตรวจหาฟีเจอร์

สำหรับตรรกะที่ซับซ้อนมากขึ้น คุณสามารถตรวจหาการรองรับโดยอัตโนมัติได้โดยใช้ อินเทอร์เฟซ

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

สรุป

เราตื่นเต้นที่จะได้เห็นว่านักพัฒนาแอปจะนำสถานการณ์การลองใหม่ของตำแหน่งที่มีประสิทธิภาพมากขึ้นไปใช้ได้อย่างไรโดยใช้องค์ประกอบ HTML <geolocation> ใหม่ ซึ่งแสดงถึง การเปลี่ยนไปใช้องค์ประกอบที่เฉพาะเจาะจงความสามารถซึ่งปรับให้เหมาะกับวิธีที่ผู้ใช้ ใช้อินเทอร์เน็ตในปัจจุบันจริงๆ

สำหรับกรณีการใช้งานสิทธิ์อื่นๆ ตั้งแต่ Chrome 144 เป็นต้นไป คุณจะเข้าร่วมช่วงทดลองใช้<usermedia>องค์ประกอบ HTML ได้ ซึ่งจะช่วยให้กล้องและไมโครโฟนได้รับประโยชน์ด้านการยศาสตร์แบบเดียวกันนี้

ลิงก์ที่เกี่ยวข้อง

การรับทราบ

เอกสารนี้ได้รับการตรวจสอบโดย Andy Paicu, Gilberto Cocchi และ Rachel Andrew