التعريف بعنصر <geolocation> في HTML

Mari Viana

Minh Le

Thomas Steiner

تاريخ النشر: 13 يناير 2026

بدءًا من الإصدار 144 من Chrome، يمكنك استخدام عنصر HTML الجديد <geolocation>. يمثّل هذا العنصر تحوّلاً كبيرًا في طريقة طلب المواقع الإلكترونية لبيانات الموقع الجغرافي للمستخدمين، إذ يبتعد عن طلبات الإذن التي يتم تشغيلها بواسطة البرامج النصية ويتّجه نحو تجربة إعلانية وصفية وموجّهة إلى إجراءات المستخدمين. ويقلّل من رمز النص النموذجي المطلوب للتعامل مع حالات الأذونات والأخطاء، كما يوفّر إشارة أقوى إلى نية المستخدم، ما يساعد في تجنُّب تدخلات المتصفّح (مثل الحظر الصامت).

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

من <permission> عام إلى <geolocation> محدّد

يمثّل العنصر <geolocation> أحدث تطوّر لمبادرة "عناصر التحكّم في الأذونات المضمّنة في الصفحة"، حيث تم اقتراحه في البداية كعنصر <permission> عام يتضمّن السمة type (راجِع الشرح الأصلي). تحدّد قيمة سمة النوع (على سبيل المثال، "geolocation") نوع الإذن المطلوب. على سبيل المثال، يتضمّن الاقتراح الأوّلي قيمًا مثل الكاميرا والميكروفون وتحديد الموقع الجغرافي.

التحقّق من صحة المفهوم

أجرينا مرحلة التجربة والتقييم للعنصر العام <permission> من الإصدار 126 إلى 143 من Chrome. كان الهدف من هذه التجربة هو اختبار الفرضية التي تفيد بأنّ الزر المخصّص الذي يظهر في السياق سيؤدي إلى تحسين ثقة المستخدمين وقدرتهم على اتخاذ القرارات.

أظهرت نتائج مرحلة التجربة والتقييم هذه صحة هذا المفهوم الأساسي:

• أفادت شركة Zoom بانخفاض بنسبة% 46.9 في أخطاء تسجيل الكاميرا أو الميكروفون (مثل أدوات الحظر على مستوى النظام) من خلال استخدام العنصر لتوجيه المستخدمين خلال عملية الاسترداد.
• حقّقت Immobiliare.it زيادة بنسبة ‏20% في عمليات تحديد الموقع الجغرافي الناجحة.
• لاحظت ZapImóveis أنّ معدّل النجاح في استعادة المستخدمين من حالة "محظور سابقًا" بلغ% 54.4 عند عرض العنصر عليهم.

إعادة تعريف التصميم

وعلى الرغم من أنّ الفكرة أثبتت نجاحها، إلا أنّ تنفيذها كان يتطلّب تحسينًا. أشارت الملاحظات الواردة من مورّدي المتصفّحات، بما في ذلك Apple (Safari/WebKit) وMozilla (Firefox)، إلى أنّ عنصر "مقاس واحد يناسب الجميع" قد أدى إلى تعقيد كبير في ما يتعلق بسلوكيات الإمكانات الفريدة.

نتيجةً لذلك، انتقلنا من عنصر تحكّم عام في الأذونات إلى عناصر مستهدَفة ومحدّدة الإمكانات (راجِع مناقشة WICG). إنّ العنصر <geolocation> هو أول عناصر التحكّم المتخصّصة التي سيتم إطلاقها. بعد ذلك، سنطوّر أيضًا عنصر <usermedia> مخصّصًا (للوصول إلى الكاميرا والميكروفون)، والذي سيخضع لتجربة أصل منفصلة.

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

لماذا يجب استخدام عنصر <geolocation>؟

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

يحلّ العنصر <geolocation> مشكلة فجوة السياق من خلال ضمان أنّ الطلبات يتم إطلاقها من قِبل المستخدمين فقط. يوفّر هذا النموذج ثلاث مزايا مختلفة:

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

التنفيذ

يتطلّب دمج العنصر قدرًا أقل بكثير من الرمز النموذجي مقارنةً بواجهة برمجة التطبيقات JavaScript. بدلاً من إدارة عمليات معاودة الاتصال وحالات الخطأ يدويًا، يمكن للمطوّرين إضافة العلامة إلى الصفحة والاستماع إلى الحدث 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 لمنع أن يكون العنصر شفافًا بشكل مخادع.
• تحديد الحجم والمسافة بين العناصر: يفرض العنصر حدودًا دنيا وقصوى للعرض والارتفاع وحجم الخط. يتم إيقاف الهوامش السلبية أو إزاحة المخطط التفصيلي لمنع إخفاء العنصر بصريًا أو تداخله مع محتوى آخر بشكل مخادع.
• سلامة العرض المرئي: يتم الحد من المؤثرات التي تشوّه العرض، مثلاً، لا تتيح ميزة &quot;التحويل&quot; سوى عمليات النقل الثنائي الأبعاد وتغيير الحجم النسبي.
• فئات CSS الصورية: يتيح العنصر تصميمًا مستندًا إلى الحالة، مثل :granted (عندما يكون الإذن نشطًا).

استراتيجية التحسين التدريجي

ندرك أنّ توحيد عناصر HTML الجديدة هو عملية تدريجية. ومع ذلك، يمكن للمطوّرين استخدام عنصر <geolocation> اليوم بدون أن يؤدي ذلك إلى حدوث مشاكل في التوافق مع المتصفحات الأخرى.

تم تصميم العنصر ليتم تقليصه بسلاسة. ستتعامل المتصفّحات التي لا تتوافق مع العنصر <geolocation> معه على أنّه HTMLUnknownElement. من المهم معرفة أنّه إذا كان المتصفّح يتيح العنصر، لن يعرض العناصر الفرعية. يتيح ذلك كتابة رمز HTML بشكل واضح لكل من المتصفحات المتوافقة وغير المتوافقة.

نمط احتياطي مخصّص

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

بالنسبة إلى حالات استخدام الأذونات الأخرى، يمكنك الانضمام من الإصدار 114 من Chrome إلى مرحلة التجربة والأصل لعنصر HTML <usermedia>، ما يوفّر مزايا سهولة الاستخدام نفسها للكاميرا والميكروفون.

روابط ذات صلة

• عنصر <geolocation> في "حالة النظام الأساسي Chrome"
• شرح عنصر HTML الخاص بتحديد الموقع الجغرافي
• صفحة العرض التوضيحي
• موقف Mozilla بشأن المعايير
• موقف WebKit بشأن المعايير

الإقرارات

راجع هذا المستند &quot;آندي بايكو&quot; و&quot;جيلبرتو كوكي&quot; و&quot;راشيل أندرو&quot;.