Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

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

Mari Viana

Minh Le

Thomas Steiner

เผยแพร่เมื่อวันที่ 13 มกราคม 2026

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

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

จาก `<permission>` ทั่วไปเป็น `<geolocation>` ที่เฉพาะเจาะจง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

การใช้งาน

การผสานรวมองค์ประกอบนี้ต้องใช้โค้ด Boilerplate น้อยกว่า 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 หากคำขอไม่สำเร็จ

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

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

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

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

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

องค์ประกอบนี้ได้รับการออกแบบมาให้ลดระดับอย่างมีชั้นเชิง เบราว์เซอร์ที่ไม่รองรับองค์ประกอบ <geolocation> จะถือว่าเป็น HTMLUnknownElement ที่สำคัญคือ หากเบราว์เซอร์รองรับองค์ประกอบนี้ เบราว์เซอร์จะไม่แสดงผลองค์ประกอบย่อย ซึ่งช่วยให้เขียน HTML ได้อย่างชัดเจนสำหรับทั้งเบราว์เซอร์ที่รองรับและไม่รองรับ

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

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

<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> ทั้งหมดด้วย องค์ประกอบที่กำหนดเอง <geo-location> (โปรดสังเกตขีดกลาง) ที่ทำงานโดย Geolocation API ของ JavaScript ปกติอย่างโปร่งใสและอัตโนมัติก็ได้ หากเบราว์เซอร์รองรับองค์ประกอบ <geolocation> Polyfill จะไม่ทำอะไรเลย ลองดูการสาธิต 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 เป็นต้นไป คุณสามารถเข้าร่วม การทดลองใช้จากต้นทางขององค์ประกอบ HTML <usermedia> ซึ่งจะนำประโยชน์ด้านการยศาสตร์แบบเดียวกันนี้มาสู่กล้องและไมโครโฟน

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

คำขอบคุณ

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