الموقع الجغرافي للمستخدم

تتيح لك Geolocation API معرفة الموقع الجغرافي للمستخدم، بعد الحصول على موافقته.

Paul Kinlan

تتيح لك Geolocation API معرفة الموقع الجغرافي للمستخدم بعد الحصول على موافقته. يمكنك استخدام هذه الوظيفة لأغراض مثل توجيه المستخدم إلى وجهته ووضع علامات جغرافية على المحتوى الذي أنشأه المستخدم، على سبيل المثال، وضع علامة على مكان التقاط الصورة.

تتيح لك واجهة برمجة التطبيقات Geolocation API أيضًا معرفة مكان المستخدم ومتابعة تحركاته، وذلك بعد الحصول على موافقته (وفقط عندما تكون الصفحة مفتوحة). يؤدي ذلك إلى إنشاء الكثير من حالات الاستخدام المثيرة للاهتمام، مثل التكامل مع أنظمة الواجهة الخلفية لإعداد طلب للتحصيل إذا كان المستخدم قريبًا.

يجب أن تكون على دراية بالعديد من الأمور عند استخدام Geolocation API. يستعرض هذا الدليل حالات الاستخدام والحلول الشائعة.

ملاحظة: اعتبارًا من الإصدار 50 من Chrome، لا تعمل واجهة برمجة التطبيقات Geolocation API إلا في السياقات الآمنة (HTTPS). إذا كان موقعك الإلكتروني مستضافًا على مصدر غير آمن (مثل HTTP)، لن تعمل أي طلبات للحصول على الموقع الجغرافي للمستخدم.

ملخّص

• استخدِم ميزة تحديد الموقع الجغرافي عندما تكون مفيدة للمستخدم.
• اطلب الإذن كردّ واضح على إجراء تفاعلي من المستخدم.
• استخدِم ميزة "رصد الميزات" في حال كان متصفّح المستخدم لا يتيح تحديد الموقع الجغرافي.
• لا تكتفِ بتعلُّم كيفية تنفيذ ميزة تحديد الموقع الجغرافي، بل تعرَّف على أفضل طريقة لاستخدامها.
• اختبِر ميزة تحديد الموقع الجغرافي على موقعك الإلكتروني.

حالات استخدام ميزة تحديد الموقع الجغرافي

• يمكنك العثور على أقرب موقع جغرافي فعلي للمستخدم لتخصيص تجربة المستخدم.
• تخصيص المعلومات (مثل الأخبار) حسب الموقع الجغرافي للمستخدم
• عرض موضع مستخدم على خريطة
• وضع علامة على البيانات التي تم إنشاؤها داخل تطبيقك باستخدام الموقع الجغرافي للمستخدم (أي وضع علامة جغرافية على صورة)

طلب الإذن بمسؤولية

أظهرت دراسات المستخدمين الأخيرة أنّ المستخدمين لا يثقون في المواقع الإلكترونية التي تطلب منهم ببساطة مشاركة موقعهم الجغرافي عند تحميل الصفحة. إذًا، ما هي أفضل الممارسات؟

افترض أنّ المستخدمين لن يمنحوك إذن الوصول إلى موقعهم الجغرافي

لن يرغب العديد من المستخدمين في إعطائك موقعهم، لذلك تحتاج إلى اعتماد أسلوب تطوير دفاعي.

1. تعامَل مع جميع الأخطاء خارج واجهة برمجة التطبيقات لتحديد الموقع الجغرافي حتى تتمكّن من تكييف موقعك الإلكتروني مع هذه الحالة.
2. يجب أن تكون واضحًا وصريحًا بشأن حاجتك إلى الموقع الجغرافي.
3. استخدِم حلاً احتياطيًا إذا لزم الأمر.

استخدام خيار احتياطي إذا كان الموقع الجغرافي مطلوبًا

ننصحك بألا يتطلب موقعك الإلكتروني أو تطبيقك الوصول إلى الموقع الجغرافي الحالي للمستخدم. ومع ذلك، إذا كان موقعك الإلكتروني أو تطبيقك يتطلّب الموقع الجغرافي الحالي للمستخدم، تتوفّر حلول تابعة لجهات خارجية تتيح لك الحصول على أفضل تخمين لمكان المستخدم الحالي.

تعمل هذه الحلول غالبًا من خلال الاطّلاع على عنوان IP الخاص بالمستخدم وربطه بالعناوين الجغرافية المسجّلة في قاعدة بيانات RIPE. غالبًا ما تكون هذه المواقع الجغرافية غير دقيقة للغاية، وعادةً ما تمنحك موضع مركز الاتصالات أو برج الهاتف الخلوي الأقرب إلى المستخدم. وفي كثير من الحالات، قد لا تكون دقيقة، خاصةً إذا كان المستخدم يستخدم شبكة VPN أو خدمة وكيل أخرى.

طلب الوصول إلى الموقع الجغرافي دائمًا عند إجراء تفاعلي من المستخدم

تأكَّد من أنّ المستخدمين يفهمون سبب طلبك معرفة موقعهم الجغرافي، وما هي الفائدة التي ستعود عليهم من ذلك. يؤدي طلب ذلك على الصفحة الرئيسية فور تحميل الموقع الإلكتروني إلى تجربة مستخدم سيئة.

ما يجب فعله: يجب دائمًا طلب الوصول إلى الموقع الجغرافي من خلال إجراء تفاعلي من المستخدم.

لا يُنصح بما يلي: طلب الإذن على الصفحة الرئيسية أثناء تحميل الموقع الإلكتروني، لأنّ ذلك يؤدي إلى تجربة سيئة للمستخدم.

بدلاً من ذلك، قدِّم للمستخدم عبارة واضحة تحثّه على اتخاذ إجراء أو إشارة إلى أنّ العملية ستتطلّب الوصول إلى موقعه الجغرافي. يمكن للمستخدم بعد ذلك ربط مطالبة النظام بالوصول بسهولة أكبر بالإجراء الذي تم بدؤه للتو.

يجب الإشارة بوضوح إلى أنّ الإجراء سيطلب الموقع الجغرافي

في دراسة أجراها فريق "إعلانات Google"، عندما طُلب من مستخدم حجز غرفة في فندق في بوسطن لحضور مؤتمر قادم على موقع فنادق معيّن، طُلب منه مشاركة موقعه الجغرافي عبر نظام تحديد المواقع العالمي (GPS) مباشرةً بعد النقر على عبارة الحث على اتخاذ إجراء "البحث والحجز" في الصفحة الرئيسية.

في بعض الحالات، شعر المستخدم بالإحباط لأنه لم يفهم سبب عرض فنادق في سان فرانسيسكو عندما أراد حجز غرفة في بوسطن.

من الأفضل التأكّد من أنّ المستخدمين يفهمون سبب طلبك الوصول إلى موقعهم الجغرافي. أضف دلالة معروفة وشائعة عبر الأجهزة، مثل محدد النطاق، أو عبارة صريحة تحث المستخدم على اتخاذ إجراء مثل "البحث بالقرب مني".

استخدام أداة البحث عن النطاق

عبارة محدّدة تحث المستخدم على اتخاذ إجراء للعثور على أماكن قريبة مني

حث المستخدمين بلطف على منح الإذن بالوصول إلى موقعهم الجغرافي

ليس لديك إذن بالوصول إلى أي إجراء يتّخذه المستخدمون. أنت تعرف بالضبط متى يرفض المستخدمون الوصول إلى مواقعهم ولكنك لا تعرف متى يمنحونك حق الوصول؛ أنت تعرف فقط أنك حصلت على حق الوصول عندما تظهر النتائج.

من الممارسات الجيدة "حث" المستخدمين على اتخاذ إجراء إذا كنت بحاجة إلى إكمال الإجراء.

ننصحك بما يلي:

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 أو أوقف المستخدم عمليات البحث عن الموقع الجغرافي فجأة. في حال حدوث خطأ، يتم استدعاء وسيطة ثانية اختيارية لـ 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);
};

تفضيل الموقع الجغرافي التقريبي على الموقع الجغرافي الدقيق

إذا أردت العثور على أقرب متجر لمستخدم، من غير المحتمل أن تحتاج إلى دقة تبلغ مترًا واحدًا. تم تصميم واجهة برمجة التطبيقات لتوفير موقع جغرافي تقريبي يتم عرضه في أسرع وقت ممكن.

إذا كنت بحاجة إلى مستوى عالٍ من الدقة، يمكنك إلغاء الإعداد التلقائي باستخدام الخيار 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"

بعد إعداد الموقع الجغرافي، عليك إجراء ما يلي:

• اختبِر طريقة عمل تطبيقك في مواقع جغرافية مختلفة.
• تأكَّد من أنّ تطبيقك يعمل بشكل جيد عندما لا يكون الموقع الجغرافي متاحًا.

ويمكنك تنفيذ كلا الإجراءَين من "أدوات مطوّري البرامج في Chrome".

1. افتح "أدوات مطوّري البرامج في Chrome".
2. اضغط على Esc من أجل فتح لوحة وحدة التحكّم.
3. فتح قائمة درج وحدة التحكّم
4. انقر على خيار أدوات الاستشعار لعرض علامة التبويب "أدوات الاستشعار".

من هنا، يمكنك إلغاء الموقع الجغرافي إلى مدينة رئيسية محدّدة مسبقًا، أو إدخال موقع جغرافي مخصّص، أو إيقاف تحديد الموقع الجغرافي من خلال ضبط الإلغاء على الموقع الجغرافي غير متاح.

الملاحظات