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

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

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

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

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

التنفيذ

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

قيود التنسيق

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

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

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

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

تم تصميم العنصر ليتدهور بشكل سلس. ستتعامل المتصفّحات التي لا تسمح بعنصر <geolocation> معه على أنّه [HTMLUnknownElement](https://developer.mozilla.org/docs/Web/API/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>، لن يتم تنفيذ أي إجراء. يمكنك الاطّلاع على هذا العرض التوضيحي الذي يوضّح كيفية عمل 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>، ما يوفّر مزايا بيئة العمل المريحة نفسها للكاميرا والميكروفون.

روابط ذات صلة

الإقرارات

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