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

تتيح لك واجهة برمجة التطبيقات Geolocation API اكتشاف موقع المستخدم الجغرافي بعد منحه موافقته.

Paul Kinlan

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

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

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

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

ملخّص

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

في دراسة أجراها فريق "إعلانات 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().

إذا أردت مراقبة الموقع الجغرافي للمستخدم باستمرار، استخدِم طريقة واجهة برمجة التطبيقات للمواقع الجغرافية، 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 لتوجيه المتصفّح لاستخدام نتيجة رصد الموقع الجغرافي تم الحصول عليها مؤخرًا. ولا يعود ذلك بسرعة أكبر إذا كان المستخدم قد طلب البيانات من قبل فحسب، بل يمنع أيضًا المتصفّح من بدء واجهات أجهزة رصد الموقع الجغرافي مثل نظام Wifi المثلث أو نظام تحديد المواقع العالمي (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 متر. صُممت واجهة برمجة التطبيقات لتوفير موقع جغرافي تقريبي يتم عرضه في أسرع وقت ممكن.

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

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

إضافة ملاحظات