ตำแหน่งของผู้ใช้

Geolocation API ช่วยให้คุณค้นหาตำแหน่งของผู้ใช้ได้เมื่อได้รับความยินยอมจากผู้ใช้

Paul Kinlan

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

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

คุณต้องคำนึงถึงหลายสิ่งหลายอย่างเมื่อใช้ Geolocation API คู่มือนี้จะอธิบายกรณีการใช้งานและโซลูชันที่พบบ่อย

หมายเหตุ: ตั้งแต่ Chrome 50 เป็นต้นไป Geolocation API จะทำงานในบริบทที่ปลอดภัย (HTTPS) เท่านั้น หากเว็บไซต์โฮสต์อยู่ในต้นทางที่ไม่ปลอดภัย (เช่น HTTP) คำขอตำแหน่งของผู้ใช้จะไม่ทำงานอีกต่อไป

สรุป

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

กรณีที่ควรใช้ตำแหน่งทางภูมิศาสตร์

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

ขออนุญาตอย่างมีความรับผิดชอบ

การศึกษาผู้ใช้เมื่อเร็วๆ นี้แสดงให้เห็นว่าผู้ใช้ไม่ไว้วางใจเว็บไซต์ที่แจ้งให้ผู้ใช้ระบุตำแหน่งของตนเมื่อโหลดหน้าเว็บ แล้วแนวทางปฏิบัติแนะนำมีอะไรบ้าง

สมมติว่าผู้ใช้จะไม่ให้ข้อมูลตำแหน่งแก่คุณ

ผู้ใช้หลายคนอาจไม่ต้องการให้ข้อมูลตำแหน่งแก่คุณ ดังนั้นคุณจึงต้องใช้รูปแบบการพัฒนาเชิงป้องกัน

1. จัดการข้อผิดพลาดทั้งหมดจาก Geolocation API เพื่อให้คุณปรับเว็บไซต์ให้เข้ากับเงื่อนไขนี้ได้
2. อธิบายความจำเป็นในการใช้ตำแหน่งอย่างชัดเจนและตรงไปตรงมา
3. ใช้โซลูชันสำรองหากจำเป็น

ใช้การสำรองหากจำเป็นต้องใช้ตำแหน่งทางภูมิศาสตร์

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

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

ขอสิทธิ์เข้าถึงตำแหน่งเสมอเมื่อมีท่าทางผู้ใช้

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

ควรทำ: ขอสิทธิ์เข้าถึงตำแหน่งจากท่าทางผู้ใช้เสมอ

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

แต่ให้แสดงคำกระตุ้นให้ดำเนินการ (Call-To-Action) ที่ชัดเจนหรือข้อความที่ระบุว่าการดำเนินการนั้นต้องเข้าถึงตำแหน่งของผู้ใช้ จากนั้นผู้ใช้จะเชื่อมโยงข้อความแจ้งของระบบสำหรับการเข้าถึงกับการดำเนินการที่เพิ่งเริ่มต้นได้ง่ายขึ้น

ระบุอย่างชัดเจนว่าการดำเนินการจะขอตำแหน่งของผู้ใช้

ในการศึกษาโดยทีม Google Ads เมื่อผู้ใช้ถูกขอให้จองห้องพักโรงแรมในบอสตันสำหรับการประชุมที่กำลังจะมาถึง ในเว็บไซต์โรงแรมแห่งหนึ่ง ผู้ใช้ได้รับข้อความแจ้งให้แชร์ตำแหน่ง GPS ทันทีหลังจากแตะคำกระตุ้นให้ดำเนินการ (Call-To-Action) "ค้นหาและจอง" ในหน้าแรก

ในบางกรณี ผู้ใช้รู้สึกหงุดหงิดเพราะไม่เข้าใจว่าทำไมระบบจึงแสดงโรงแรมในซานฟรานซิสโกเมื่อต้องการจองห้องพักในบอสตัน

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

ใช้เครื่องวัดระยะ

คำกระตุ้นให้ดำเนินการที่เฉพาะเจาะจงเพื่อค้นหาสิ่งที่อยู่ใกล้ฉัน

แจ้งเตือนผู้ใช้เบาๆ เพื่อให้สิทธิ์เข้าถึงตำแหน่ง

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

แนวทางปฏิบัติแนะนำคือการ "กระตุ้น" ให้ผู้ใช้ดำเนินการหากคุณต้องการให้ผู้ใช้ดำเนินการให้เสร็จสมบูรณ์

เราขอแนะนำให้คุณดำเนินการดังต่อไปนี้

1. ตั้งค่าตัวจับเวลาที่ทริกเกอร์หลังจากผ่านไปช่วงสั้นๆ โดย 5 วินาทีเป็นค่าที่เหมาะสม
2. หากได้รับข้อความแสดงข้อผิดพลาด ให้แสดงข้อความต่อผู้ใช้
3. หากได้รับการตอบกลับเป็นบวก ให้ปิดใช้ตัวจับเวลาและประมวลผลผลลัพธ์
4. หากไม่ได้รับการตอบกลับในเชิงบวกหลังจากหมดเวลา ให้แสดงการแจ้งเตือนแก่ผู้ใช้
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() เพียงครั้งเดียว

หากต้องการตรวจสอบตำแหน่งของผู้ใช้อย่างต่อเนื่อง ให้ใช้วิธี Geolocation API watchPosition() ซึ่งทำงานคล้ายกับ getCurrentPosition() แต่จะเริ่มทำงานหลายครั้งในฐานะซอฟต์แวร์ระบุตำแหน่ง ดังนี้

1. ล็อกผู้ใช้ได้แม่นยำยิ่งขึ้น
2. ระบุว่าตำแหน่งของผู้ใช้มีการเปลี่ยนแปลง

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() เพื่อให้คุณแจ้งผู้ใช้ภายใน Callback ได้ ดังนี้

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

เมื่อตั้งค่าตำแหน่งทางภูมิศาสตร์แล้ว คุณจะต้องทำดังนี้

• ทดสอบวิธีการทำงานของแอปในตำแหน่งทางภูมิศาสตร์ต่างๆ
• ตรวจสอบว่าแอปของคุณลดระดับลงอย่างเหมาะสมเมื่อไม่มีตำแหน่งทางภูมิศาสตร์

คุณทำทั้ง 2 อย่างได้จากเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
2. กด Esc เพื่อเปิดลิ้นชักคอนโซล
3. เปิดเมนูลิ้นชักคอนโซล
4. คลิกตัวเลือกเซ็นเซอร์เพื่อแสดงแท็บเซ็นเซอร์

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

ความคิดเห็น