معرفی عنصر <موقعیت جغرافیایی> در HTML

Mari Viana

Minh Le

Thomas Steiner

منتشر شده: ۱۳ ژانویه ۲۰۲۶

از کروم ۱۴۴ می‌توانید از عنصر جدید <geolocation> در HTML استفاده کنید. این عنصر نشان‌دهنده‌ی یک تغییر عمده در نحوه‌ی درخواست داده‌های موقعیت مکانی کاربر توسط سایت‌ها است - حرکت از درخواست‌های مجوز ایجاد شده توسط اسکریپت به سمت یک تجربه‌ی اعلانی و مبتنی بر عمل کاربر. این عنصر، کد تکراری مورد نیاز برای مدیریت حالت‌های مجوز و خطاها را کاهش می‌دهد و سیگنال قوی‌تری از قصد کاربر ارائه می‌دهد که به جلوگیری از مداخلات مرورگر (مانند بلوک‌های بی‌صدا) کمک می‌کند.

این راه‌اندازی نتیجه آزمایش‌های گسترده در دنیای واقعی و بحث‌های دقیق با جامعه استانداردهای وب است. برای درک کاربرد این عنصر، بررسی تاریخچه توسعه آن و داده‌هایی که طراحی آن را هدایت کرده‌اند، مهم است.

از <permission> عمومی تا <geolocation> خاص

عنصر <geolocation> آخرین تکامل ابتکار کنترل مجوز جاسازی‌شده در صفحه است، که در ابتدا به عنوان یک عنصر <permission> عمومی با یک ویژگی type پیشنهاد شد (به توضیح اصلی مراجعه کنید). مقدار ویژگی نوع (به عنوان مثال، "geolocation" ) نوع مجوز درخواستی را تعیین می‌کند. به عنوان مثال، پیشنهاد اولیه شامل مقادیری مانند دوربین، میکروفون و موقعیت جغرافیایی است.

اعتبارسنجی مفهوم

ما یک آزمایش مبدأ برای عنصر عمومی <permission> از کروم ۱۲۶ تا ۱۴۳ اجرا کردیم. هدف از این آزمایش، آزمایش این فرضیه بود که یک دکمه اختصاصی و مرتبط با متن، اعتماد و تصمیم‌گیری کاربر را بهبود می‌بخشد.

نتایج حاصل از این آزمایش مبدا، اعتبار این مفهوم اصلی را تأیید کرد:

• زوم با استفاده از این عنصر برای راهنمایی کاربران در طول بازیابی، کاهش ۴۶.۹ درصدی در خطاهای ضبط دوربین یا میکروفون (مانند مسدودکننده‌های سطح سیستم) را گزارش کرد.
• Immobiliare.it شاهد افزایش ۲۰ درصدی در جریان‌های موفق موقعیت‌یابی جغرافیایی بود.
• ZapImóveis نرخ موفقیت ۵۴.۴ درصدی را در بازیابی کاربران از حالت «قبلاً مسدود شده» پس از ارائه این عنصر مشاهده کرد.

تعریف مجدد طرح

اگرچه این مفهوم موفقیت‌آمیز بود، اما پیاده‌سازی آن نیاز به اصلاح داشت. بازخورد فروشندگان مرورگر - از جمله اپل (Safari/WebKit) و موزیلا (Firefox) - نشان داد که یک عنصر «یک‌سان برای همه» پیچیدگی قابل‌توجهی را در مورد رفتارهای منحصر به فرد قابلیت‌ها ایجاد می‌کند.

در نتیجه، ما از یک کنترل مجوز عمومی به عناصر هدفمند و با قابلیت خاص منتقل شدیم ( به بحث WICG مراجعه کنید). عنصر <geolocation> اولین مورد از این کنترل‌های تخصصی است که راه‌اندازی می‌شود. پس از این، ما همچنین در حال توسعه یک عنصر اختصاصی <usermedia> (برای دسترسی به دوربین و میکروفون) هستیم که origin trial جداگانه خود را دارد.

برخلاف طرح اولیه که بر مدیریت وضعیت مجوز (یعنی اجازه دادن یا ندادن) تمرکز داشت، این عناصر جدید به عنوان واسطه‌های داده عمل می‌کنند و عملاً جایگزین نیاز به فراخوانی مستقیم APIهای جاوا اسکریپت برای اکثر موارد استفاده می‌شوند.

چرا از عنصر <geolocation> استفاده کنیم؟

در حال حاضر، جریان‌های موقعیت‌یابی جغرافیایی به API موقعیت‌یابی جغرافیایی متکی هستند که درخواست‌های مجوزی را فعال می‌کند که در صورت خارج شدن از چارچوب یا حتی در هنگام بارگذاری صفحه، می‌توانند کاربران را مختل کنند. نکته مهم این است که اتکا به این درخواست‌های ضروری به دلیل مداخلات مرورگر، کمتر قابل استفاده است. به عنوان مثال، کروم اگر کاربر سه بار درخواست مجوز را رد کرده باشد، درخواست‌های مجوز را به طور فعال مسدود می‌کند و یک بلوک موقت بی‌صدا را اعمال می‌کند که در ابتدا یک هفته طول می‌کشد. این بدان معناست که کد قدیمی که سعی در فعال کردن یک درخواست دارد، ممکن است به طور خاموش شکست بخورد و کاربر را با یک تجربه خراب و بدون هیچ راه روشنی برای فعال کردن این ویژگی رها کند. علاوه بر این، درخواست‌های استاندارد اغلب فاقد زمینه هستند. اگر یک درخواست به طور غیرمنتظره ظاهر شود، کاربران ممکن است آن را به صورت واکنشی یا تصادفی مسدود کنند، غافل از اینکه این تصمیم یک بلوک دائمی ایجاد می‌کند که برگشت آن دشوار است. این شکاف زمینه - به جای خود ویژگی - عامل اصلی نرخ بالای رد درخواست است.

عنصر <geolocation> با اطمینان از اینکه درخواست‌ها صرفاً توسط کاربر آغاز می‌شوند، مشکل شکاف زمینه را حل می‌کند. این مدل سه مزیت متمایز ارائه می‌دهد:

• هدف و زمان‌بندی واضح: با کلیک بر روی دکمه‌ی «استفاده از موقعیت مکانی» ، کاربر صریحاً قصد خود را برای استفاده از موقعیت مکانی خود در آن لحظه‌ی خاص نشان می‌دهد. این نشان می‌دهد که آنها ارزش را درک کرده‌اند و به طور فعال می‌خواهند از موقعیت مکانی استفاده کنند و یک بلوک بالقوه را به یک تعامل موفق تبدیل کنند.
• بازیابی ساده: اگر کاربری قبلاً هنگام مرور یک سایت (شاید به طور تصادفی یا به دلیل کمبود اطلاعات) دسترسی به موقعیت مکانی را مسدود کرده باشد، کلیک روی عنصر، یک جریان بازیابی تخصصی را فعال می‌کند. این به آنها کمک می‌کند تا در لحظه‌ای که واقعاً می‌خواهند از موقعیت مکانی استفاده کنند، بدون دردسر پیمایش عمیق در تنظیمات سایت مرورگر، موقعیت مکانی را دوباره فعال کنند.
• به‌روزرسانی خودکار: اگر مجوز از قبل اعطا شده باشد، کلیک روی عنصر به عنوان دکمه به‌روزرسانی عمل می‌کند و داده‌های جدید را بلافاصله و بدون نیاز به درخواست مجدد، واکشی می‌کند.

پیاده‌سازی

ادغام این عنصر به طور قابل توجهی به کدهای تکراری کمتری نسبت به 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> محدودیت‌های سبکی خاصی مشابه آزمایش قبلی عنصر <permission> اعمال می‌کند. در حالی که می‌توانید دکمه را برای مطابقت با قالب سایت خود سفارشی کنید، مرورگر چندین محافظ را اعمال می‌کند:

• خوانایی: رنگ‌های متن و پس‌زمینه برای کنتراست کافی (معمولاً نسبت حداقل ۳:۱) بررسی می‌شوند تا اطمینان حاصل شود که درخواست مجوز همیشه قابل خواندن است. علاوه بر این، کانال آلفا (میزان شفافیت) باید روی ۱ تنظیم شود تا از شفافیت فریبنده عنصر جلوگیری شود.
• اندازه و فاصله‌گذاری: این عنصر حداقل و حداکثر محدودیت‌ها را برای عرض، ارتفاع و اندازه فونت اعمال می‌کند. حاشیه‌های منفی یا فاصله‌های بیرونی غیرفعال هستند تا از مبهم شدن بصری عنصر یا همپوشانی فریبنده با سایر محتوا جلوگیری شود.
• یکپارچگی بصری: اثرات تحریف محدود هستند - برای مثال، تبدیل فقط از انتقال‌های دوبعدی و مقیاس‌بندی متناسب پشتیبانی می‌کند.
• شبه کلاس‌های CSS: این عنصر از استایل‌دهی مبتنی بر حالت، مانند :granted (زمانی که مجوز فعال است) پشتیبانی می‌کند.

استراتژی بهبود تدریجی

ما می‌دانیم که استانداردسازی عناصر جدید HTML یک فرآیند تدریجی است. با این حال، توسعه‌دهندگان می‌توانند عنصر <geolocation> را همین امروز و بدون ایجاد اختلال در سازگاری برای کاربران در مرورگرهای دیگر، به کار گیرند.

این عنصر طوری طراحی شده است که به راحتی تجزیه شود. مرورگرهایی که از عنصر <geolocation> پشتیبانی نمی‌کنند، آن را به عنوان یک [HTMLUnknownElement](https://developer.mozilla.org/docs/Web/API/HTMLUnknownElement) در نظر می‌گیرند. نکته مهم این است که اگر مرورگر از این عنصر پشتیبانی کند، عناصر فرزند را رندر نمی‌کند. این امر امکان نوشتن HTML به صورت تمیز را برای مرورگرهای پشتیبانی شده و پشتیبانی نشده فراهم می‌کند.

الگوی جایگزین سفارشی

اگر می‌خواهید خودتان تجربه‌ی fallback را به طور کامل کنترل کنید، می‌توانید از عناصر فرزند مانند دکمه‌ای که با API موقعیت جغرافیایی جاوا اسکریپت معمولی متصل می‌کنید، استفاده کنید.

<geolocation onlocation="updateMap()">
  <!-- Fallback contents if the element is not supported -->
  <button onclick="navigator.geolocation.getCurrentPosition(updateMap)">
    Use my location
  </button>
</geolocation>

پلی‌فیل

شما می‌توانید به طور جایگزین یک polyfill از npm نصب کنید که به طور شفاف و خودکار تمام موارد <geolocation> را با یک عنصر سفارشی <geo-location> (به خط تیره توجه کنید) که توسط API معمولی Geolocation جاوا اسکریپت پشتیبانی می‌شود، جایگزین می‌کند. اگر مرورگر از عنصر <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
}

جمع بندی

ما مشتاقیم ببینیم که توسعه‌دهندگان چگونه با استفاده از عنصر جدید <geolocation> در HTML، سناریوهای آزمایش مجدد موقعیت مکانی کارآمدتری را پیاده‌سازی خواهند کرد. این نشان‌دهنده‌ی تغییر به سمت عناصر خاص قابلیت است که متناسب با نحوه‌ی استفاده‌ی واقعی کاربران از وب امروزی طراحی شده‌اند.

برای سایر موارد استفاده از مجوز، از کروم ۱۴۴ می‌توانید به آزمایش <usermedia> HTML element origin بپیوندید و همین مزایای ارگونومیک را برای دوربین و میکروفون به ارمغان بیاورید.

لینک‌های مرتبط

• عنصر <geolocation> در وضعیت پلتفرم کروم
• توضیح عنصر موقعیت جغرافیایی در HTML
• صفحه نسخه آزمایشی
• جایگاه استانداردهای موزیلا
• جایگاه استانداردهای WebKit

تقدیرنامه‌ها

این سند توسط اندی پایکو، گیلبرتو کوچی و ریچل اندرو بررسی شده است.