Geolocation API ช่วยให้คุณค้นพบตำแหน่งของผู้ใช้เมื่อได้รับความยินยอมจากผู้ใช้
Geolocation API ช่วยให้คุณค้นพบตําแหน่งของผู้ใช้โดยได้รับความยินยอมจากผู้ใช้ คุณสามารถใช้ฟังก์ชันนี้ในการทำงานต่างๆ เช่น การนำผู้ใช้ไปยังจุดหมายของตนและการติดป้ายสถานที่ในเนื้อหาที่ผู้ใช้สร้าง เช่น การทำเครื่องหมายสถานที่ถ่ายภาพ
นอกจากนี้ Geolocation API ยังช่วยให้คุณเห็นว่าผู้ใช้อยู่ที่ไหนและคอยสังเกตผู้ใช้ในขณะที่เคลื่อนที่ไปมา โดยต้องได้รับความยินยอมจากผู้ใช้เสมอ (และเมื่อหน้าเปิดอยู่เท่านั้น) การทำเช่นนี้ทำให้เกิดกรณีการใช้งานที่น่าสนใจจำนวนมาก เช่น การผสานรวมกับระบบแบ็กเอนด์เพื่อเตรียมคำสั่งซื้อสำหรับการรวบรวมข้อมูลหากผู้ใช้อยู่ใกล้ๆ
คุณจำเป็นต้องตระหนักถึงสิ่งต่างๆ มากมายเมื่อใช้ Geolocation API คู่มือนี้จะอธิบายถึง Use Case และวิธีแก้ปัญหาที่พบบ่อย
สรุป
- ใช้ตำแหน่งทางภูมิศาสตร์เมื่อมีประโยชน์ต่อผู้ใช้
- ขออนุญาตเป็นคำตอบที่ชัดเจนต่อท่าทางสัมผัสของผู้ใช้
- ใช้การตรวจหาฟีเจอร์ในกรณีที่เบราว์เซอร์ของผู้ใช้ไม่รองรับตำแหน่งทางภูมิศาสตร์
- อย่าเรียนรู้วิธีใช้งานตำแหน่งทางภูมิศาสตร์เพียงอย่างเดียว แต่ให้เรียนรู้วิธีที่ดีที่สุดในการใช้ตำแหน่งทางภูมิศาสตร์ด้วย
- ทดสอบตำแหน่งทางภูมิศาสตร์กับเว็บไซต์ของคุณ
ควรใช้ตำแหน่งทางภูมิศาสตร์เมื่อใด
- ค้นหาว่าผู้ใช้อยู่ใกล้กับสถานที่ตั้งทางกายภาพที่เฉพาะเจาะจงมากที่สุดที่ใดเพื่อปรับแต่งประสบการณ์ของผู้ใช้
- ปรับแต่งข้อมูล (เช่น ข่าวสาร) ตามสถานที่ตั้งของผู้ใช้
- แสดงตำแหน่งของผู้ใช้บนแผนที่
- แท็กข้อมูลที่สร้างขึ้นในแอปพลิเคชันของคุณด้วยตำแหน่งของผู้ใช้ (หรือติดแท็กภาพให้กับภาพ)
ขออนุญาตอย่างมีความรับผิดชอบ
การศึกษาผู้ใช้ล่าสุดได้แสดงให้เห็นว่าผู้ใช้ไม่ไว้วางใจเว็บไซต์เพียงแค่แจ้งให้ผู้ใช้ยื่นเรื่องโต้แย้งเมื่อโหลดหน้าเว็บ แล้วแนวทางปฏิบัติแนะนำมีอะไรบ้าง
สมมติว่าผู้ใช้ไม่ได้ให้ตำแหน่งของตนแก่คุณ
ผู้ใช้จำนวนมากไม่อยากให้ตำแหน่งกับคุณ คุณจึงต้องใช้รูปแบบการพัฒนาเชิงป้องกัน
- จัดการข้อผิดพลาดทั้งหมดจาก API ตำแหน่งทางภูมิศาสตร์เพื่อให้คุณปรับเว็บไซต์ให้สอดคล้องกับเงื่อนไขนี้ได้
- ระบุให้ชัดเจนและชัดเจนเกี่ยวกับความจำเป็นในการระบุสถานที่ตั้ง
- ใช้โซลูชันสำรองหากจำเป็น
ใช้ตัวเลือกสำรองหากต้องใช้ตำแหน่งทางภูมิศาสตร์
เราขอแนะนำว่าไซต์หรือแอปพลิเคชันของคุณไม่จำเป็นต้องมี การเข้าถึงตำแหน่งปัจจุบันของผู้ใช้ อย่างไรก็ตาม หากเว็บไซต์หรือแอปพลิเคชันต้องใช้ตำแหน่งปัจจุบันของผู้ใช้ เรามีโซลูชันของบุคคลที่สามที่จะช่วยให้คุณคาดเดาตำแหน่งของบุคคลดังกล่าวได้อย่างดีที่สุด
โซลูชันเหล่านี้มักจะทำงานได้โดยการดูที่อยู่ IP ของผู้ใช้ และจับคู่กับที่อยู่จริงที่ลงทะเบียนไว้กับฐานข้อมูล RIPE ตำแหน่งเหล่านี้มักไม่แม่นยำมากนัก โดยปกติแล้วจะระบุตำแหน่งฮับโทรคมนาคมหรือเสาสัญญาณโทรศัพท์มือถือที่ใกล้กับผู้ใช้มากที่สุด ในหลายๆ กรณี สัญญาณอาจไม่แม่นยำขนาดนั้นเลย โดยเฉพาะอย่างยิ่งเมื่อผู้ใช้ใช้ VPN หรือบริการพร็อกซีอื่นๆ บางบริการ
ขอสิทธิ์เข้าถึงตำแหน่งจากท่าทางสัมผัสของผู้ใช้เสมอ
อย่าลืมให้ผู้ใช้ทราบเหตุผลที่คุณสอบถามตำแหน่งของผู้ใช้ และประโยชน์ที่ผู้ใช้จะได้รับ ขอให้แสดงในหน้าแรกทันทีที่เว็บไซต์โหลดขึ้นส่งผลให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี
![เว็บไซต์ที่ขอสิทธิ์ในหน้าเครื่องมือค้นหาร้านค้า](https://web.dev/static/articles/user-location/image/a-site-requesting-permiss-7da80ad474ecf.png?authuser=6&hl=th)
![เว็บไซต์ที่ขอสิทธิ์ในหน้าแรก](https://web.dev/static/articles/user-location/image/a-site-requesting-permiss-de9fb69ac4117.png?authuser=6&hl=th)
แต่ให้ใช้คำกระตุ้นให้ดำเนินการ (Call-To-Action) ที่ชัดเจนหรือบ่งชี้ว่าการดําเนินการจะต้องเข้าถึงตำแหน่งของผู้ใช้แทน จากนั้น ผู้ใช้จะสามารถเชื่อมโยงข้อความแจ้งของระบบสำหรับการเข้าถึงกับการดำเนินการที่เพิ่งเริ่มต้นได้ง่ายขึ้น
ระบุตัวบ่งชี้ที่ชัดเจนว่าการดำเนินการจะขอตำแหน่ง
ผลการศึกษาของทีม Google Ads เมื่อมีการขอให้ผู้ใช้จองห้องพักโรงแรมในบอสตันสำหรับการประชุมที่กำลังจะเกิดขึ้นในเว็บไซต์ของโรงแรมแห่งหนึ่ง ผู้ใช้ได้รับแจ้งให้แชร์ตำแหน่ง GPS ทันทีหลังจากแตะคำกระตุ้นให้ดำเนินการ "ค้นหาและจอง" ในหน้าแรก
ในบางกรณี ผู้ใช้อาจหงุดหงิดเพราะไม่เข้าใจว่าทำไมถึงแสดงโรงแรมในซานฟรานซิสโกเมื่อต้องการจองห้องพักในบอสตัน
ประสบการณ์ที่ดีขึ้นคือทำให้ผู้ใช้เข้าใจว่าทำไมคุณถึงขอตำแหน่งของพวกเขา เพิ่มเครื่องหมายซึ่งเป็นที่รู้จักกันดีซึ่งใช้กันโดยทั่วไปในหลายๆ อุปกรณ์ เช่น ตัวค้นหาช่วง หรือคำกระตุ้นการตัดสินใจที่ชัดเจน เช่น "ค้นหาใกล้ฉัน"
![เครื่องค้นหาช่วง](https://web.dev/static/articles/user-location/image/a-range-finder-318d55f8a5009.png?authuser=6&hl=th)
![แบบฟอร์มที่มีปุ่มค้นหาใกล้ฉัน](https://web.dev/static/articles/user-location/image/a-form-a-find-near-butt-9d544025fb506.png?authuser=6&hl=th)
ค่อยๆ กระตุ้นผู้ใช้เพื่อให้สิทธิ์เข้าถึงตำแหน่งของตน
คุณไม่มีสิทธิ์เข้าถึงสิ่งที่ผู้ใช้กำลังทำอยู่ คุณจะทราบได้ว่าผู้ใช้ไม่อนุญาตให้เข้าถึงตำแหน่งของตน แต่คุณไม่รู้ว่าบุคคลเหล่านั้นให้สิทธิ์คุณเข้าถึงเมื่อใด คุณรู้แค่ว่าได้รับสิทธิ์เข้าถึงเมื่อผลการค้นหาปรากฏขึ้น
แนวทางปฏิบัติที่ดีคือ "กระตุ้น" ผู้ใช้ให้ดำเนินการหากต้องการให้ผู้ใช้ดำเนินการจนเสร็จสมบูรณ์
เราขอแนะนำให้คุณดำเนินการดังต่อไปนี้
- ตั้งตัวจับเวลาที่ทริกเกอร์หลังจากช่วงเวลาสั้นๆ 5 วินาทีถือว่าเหมาะสม
- หากได้รับข้อความแสดงข้อผิดพลาด ให้แสดงข้อความต่อผู้ใช้
- หากได้รับการตอบกลับในเชิงบวก ให้ปิดตัวจับเวลาและประมวลผลผลลัพธ์
- หากยังไม่ได้รับการตอบกลับในเชิงบวกหลังจากหมดเวลา ให้แสดงการแจ้งเตือนแก่ผู้ใช้
- หากมีการตอบกลับในภายหลังแต่การแจ้งเตือนยังคงอยู่ ให้นำออกจากหน้าจอ
button.onclick = function () {
var startPos;
var nudge = document.getElementById('nudge');
var showNudgeBanner = function () {
nudge.style.display = 'block';
};
var hideNudgeBanner = function () {
nudge.style.display = 'none';
};
var nudgeTimeoutId = setTimeout(showNudgeBanner, 5000);
var geoSuccess = function (position) {
hideNudgeBanner();
// We have the location, don't display banner
clearTimeout(nudgeTimeoutId);
// Do magic with location
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
switch (error.code) {
case error.TIMEOUT:
// The user didn't accept the callout
showNudgeBanner();
break;
}
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
การสนับสนุนเบราว์เซอร์
เบราว์เซอร์ส่วนใหญ่สนับสนุน Geolocation API แต่แนวทางปฏิบัติที่ดีคือการตรวจสอบการสนับสนุนก่อนที่จะดำเนินการใดๆ
คุณสามารถตรวจสอบความเข้ากันได้ได้ง่ายๆ โดยการทดสอบการมีอยู่ของออบเจ็กต์ตำแหน่งทางภูมิศาสตร์ ดังนี้
// check for Geolocation support
if (navigator.geolocation) {
console.log('Geolocation is supported!');
} else {
console.log('Geolocation is not supported for this Browser/OS.');
}
การกำหนดตำแหน่งปัจจุบันของผู้ใช้
Geolocation API เป็นวิธีที่ง่ายแบบ "ครั้งเดียว" ในการรับตำแหน่งของผู้ใช้ นั่นคือ getCurrentPosition()
การเรียกวิธีนี้จะรายงานตำแหน่งปัจจุบันของผู้ใช้ไม่พร้อมกัน
window.onload = function () {
var startPos;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
navigator.geolocation.getCurrentPosition(geoSuccess);
};
หากแอปพลิเคชันในโดเมนนี้ส่งคำขอสิทธิ์เป็นครั้งแรก เบราว์เซอร์มักจะตรวจสอบสิทธิ์ของผู้ใช้ นอกจากนี้ อาจมีค่ากำหนดที่จะอนุญาตหรือไม่อนุญาตการค้นหาสิทธิ์เสมอ ซึ่งในกรณีนี้กระบวนการยืนยันจะถูกข้าม ทั้งนี้ขึ้นอยู่กับเบราว์เซอร์
อ็อบเจ็กต์ตำแหน่งอาจมีข้อมูลมากกว่าแค่ละติจูดและลองจิจูด เช่น ระดับความสูงหรือทิศทาง ทั้งนี้ขึ้นอยู่กับอุปกรณ์ตำแหน่งที่เบราว์เซอร์ของคุณใช้อยู่ คุณไม่สามารถบอกได้ว่าระบบตำแหน่งใช้ข้อมูลเพิ่มเติมใดจนกว่าระบบจะส่งคืนข้อมูลมาจริงๆ
การดูตำแหน่งของผู้ใช้
Geolocation API ช่วยให้คุณรับตําแหน่งของผู้ใช้ (เมื่อได้รับความยินยอมจากผู้ใช้) ด้วยการเรียกไปที่ getCurrentPosition()
แบบครั้งเดียว
หากคุณต้องการตรวจสอบตำแหน่งของผู้ใช้อย่างต่อเนื่อง ให้ใช้เมธอด API ตำแหน่งทางภูมิศาสตร์ watchPosition()
โดยทำงานในลักษณะเดียวกับ getCurrentPosition()
แต่เริ่มทำงานหลายครั้งเมื่อซอฟต์แวร์ระบุตำแหน่ง:
- ล็อกผู้ใช้ได้แม่นยำมากขึ้น
- กำหนดว่าตำแหน่งของผู้ใช้กำลังเปลี่ยนแปลง
var watchId = navigator.geolocation.watchPosition(function (position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});
กรณีที่ควรใช้ตำแหน่งทางภูมิศาสตร์เพื่อดูตำแหน่งของผู้ใช้
- คุณต้องการข้อมูลล็อกที่แม่นยำยิ่งขึ้นในตำแหน่งของผู้ใช้
- แอปพลิเคชันของคุณต้องอัปเดตอินเทอร์เฟซผู้ใช้ตามข้อมูลตำแหน่งใหม่
- แอปพลิเคชันของคุณต้องอัปเดตตรรกะทางธุรกิจเมื่อผู้ใช้เข้าสู่โซนที่กําหนด
แนวทางปฏิบัติแนะนำเมื่อใช้ตำแหน่งทางภูมิศาสตร์
ล้างข้อมูลและประหยัดแบตเตอรี่เสมอ
การเฝ้าติดตามการเปลี่ยนแปลงตำแหน่งทางภูมิศาสตร์ไม่ใช่การดำเนินการที่เสรี ขณะที่ระบบปฏิบัติการอาจเริ่มใช้คุณลักษณะของแพลตฟอร์มเพื่อให้แอปพลิเคชันสามารถเชื่อมต่อกับระบบย่อยทางภูมิศาสตร์ คุณซึ่งเป็นนักพัฒนาเว็บไม่รู้ว่าอุปกรณ์ของผู้ใช้มีการสนับสนุนอะไรบ้างในการตรวจสอบตำแหน่งของผู้ใช้ และในขณะที่คุณกำลังดูตำแหน่งหนึ่งๆ นั่นหมายถึงคุณกำลังมีส่วนร่วมกับอุปกรณ์โดยใช้การประมวลผลเพิ่มเติมมาก
หลังจากที่ไม่จำเป็นต้องติดตามตำแหน่งของผู้ใช้อีกต่อไปแล้ว ให้โทรหา clearWatch
เพื่อปิดระบบตำแหน่งทางภูมิศาสตร์
แก้ไขข้อผิดพลาดอย่างมีชั้นเชิง
แต่น่าเสียดายที่การค้นหาตำแหน่งบางรายการอาจไม่สำเร็จ อาจระบุตำแหน่ง GPS ไม่ได้ หรือผู้ใช้ปิดการค้นหาตำแหน่งไปโดยกะทันหัน ในกรณีที่เกิดข้อผิดพลาด ระบบจะเรียกใช้อาร์กิวเมนต์ที่ 2 ที่ไม่บังคับของ getCurrentPosition()
เพื่อให้คุณแจ้งให้ผู้ใช้ทราบในโค้ดเรียกกลับได้
window.onload = function () {
var startPos;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
ลดความจำเป็นในการเริ่มใช้ฮาร์ดแวร์ระบุตำแหน่งทางภูมิศาสตร์
สำหรับการใช้งานหลายๆ กรณี คุณไม่จำเป็นต้องใช้ตำแหน่งอัปเดตล่าสุดของผู้ใช้ เพียงแค่ใช้ค่าประมาณคร่าวๆ เท่านั้น
ใช้พร็อพเพอร์ตี้ที่ไม่บังคับ maximumAge
เพื่อบอกให้เบราว์เซอร์ใช้ผลการค้นหาตำแหน่งทางภูมิศาสตร์ที่ได้รับล่าสุด วิธีนี้ไม่เพียงส่งคืนข้อมูลอย่างรวดเร็วขึ้นเมื่อผู้ใช้เคยขอข้อมูลก่อนหน้านี้เท่านั้น แต่ยังป้องกันไม่ให้เบราว์เซอร์เริ่มอินเทอร์เฟซฮาร์ดแวร์ตำแหน่งทางภูมิศาสตร์ เช่น การสามเหลี่ยม Wi-Fi หรือ GPS
window.onload = function () {
var startPos;
var geoOptions = {
maximumAge: 5 * 60 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
อย่าปล่อยให้ผู้ใช้รอ ตั้งค่าระยะหมดเวลา
หากคุณไม่ได้กำหนดระยะหมดเวลา คำขอตำแหน่งปัจจุบันของคุณอาจไม่แสดงผลอีก
window.onload = function () {
var startPos;
var geoOptions = {
timeout: 10 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
ต้องการตำแหน่งคร่าวๆ แทนตำแหน่งแบบละเอียด
หากต้องการค้นหาร้านค้าที่ใกล้ที่สุดสำหรับผู้ใช้ คุณก็ไม่จำเป็นต้องใช้ความแม่นยำแค่ 1 เมตร API นี้ออกแบบมาเพื่อมอบตำแหน่งคร่าวๆ ที่จะแสดงผลได้เร็วที่สุด
หากต้องการความแม่นยำสูง คุณลบล้างการตั้งค่าเริ่มต้นได้ด้วยตัวเลือก enableHighAccuracy
ให้จำกัดเวลาใช้ วิธีนี้แก้ไขได้ช้ากว่า
และใช้แบตเตอรี่มากกว่า
window.onload = function () {
var startPos;
var geoOptions = {
enableHighAccuracy: true,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
จำลองตำแหน่งทางภูมิศาสตร์ด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
![แท็บเซ็นเซอร์ในเครื่องมือสำหรับนักพัฒนาเว็บ](https://web.dev/static/articles/user-location/image/the-sensor-tab-devtools-99f58f9bf1aac.png?authuser=6&hl=th)
เมื่อตั้งค่าตำแหน่งทางภูมิศาสตร์แล้ว คุณต้องทำดังนี้
- ทดสอบวิธีการทำงานของแอปในตำแหน่งทางภูมิศาสตร์ต่างๆ
- ยืนยันว่าแอปของคุณมีประสิทธิภาพลดลงอย่างค่อยเป็นค่อยไปเมื่อตำแหน่งทางภูมิศาสตร์ไม่พร้อมใช้งาน
ซึ่งทำได้จากเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
- กด Esc เพื่อเปิดลิ้นชักคอนโซล
- เปิดเมนูลิ้นชักคอนโซล
- คลิกตัวเลือกเซ็นเซอร์เพื่อแสดงแท็บเซ็นเซอร์
จากที่นี่คุณสามารถลบล้างตำแหน่งเป็นเมืองหลักที่กำหนดไว้ล่วงหน้า ป้อนตำแหน่งที่กำหนดเอง หรือปิดใช้ตำแหน่งทางภูมิศาสตร์โดยการตั้งค่าการลบล้างเป็นไม่พร้อมใช้งาน