یک آزمایش اولیه برای <مجوز> HTML جدید عنصر

Thomas Steiner

تعدادی روش ضروری برای درخواست مجوز برای استفاده از ویژگی های قدرتمند مانند دسترسی به موقعیت مکانی در برنامه های وب وجود دارد. این روش‌ها با چالش‌های متعددی همراه هستند، به همین دلیل است که تیم مجوزهای Chrome در حال آزمایش یک روش اعلامی جدید است: یک عنصر اختصاصی <permission> HTML. این عنصر در نسخه آزمایشی اولیه کروم 126 است و در نهایت امیدواریم بتوانیم آن را استاندارد کنیم.

روش های ضروری برای درخواست مجوز

وقتی برنامه‌های وب نیاز به دسترسی به ویژگی‌های قدرتمند دارند، باید اجازه بگیرند. به عنوان مثال، زمانی که Google Maps با استفاده از API موقعیت مکانی کاربر، موقعیت مکانی کاربر را می‌خواهد، مرورگرها از کاربر درخواست می‌کنند، اغلب با گزینه ذخیره آن تصمیم. این یک مفهوم به خوبی در مشخصات مجوزها تعریف شده است.

درخواست ضمنی در اولین استفاده در مقابل درخواست صریح از قبل

Geolocation API یک API قدرتمند است و متکی به رویکرد تلویحی در اولین استفاده است. برای مثال، هنگامی که یک برنامه متد navigator.geolocation.getCurrentPosition() را فرا می‌خواند، درخواست مجوزها به‌طور خودکار در اولین تماس ظاهر می‌شود. مثال دیگر navigator.mediaDevices.getUserMedia() است.

سایر APIها، مانند Notification API یا Device Orientation and Motion API ، معمولاً یک روش صریح برای درخواست مجوز از طریق یک روش ثابت مانند Notification.requestPermission() یا DeviceMotionEvent.requestPermission() دارند.

چالش با روش های ضروری برای درخواست اجازه

هرزنامه مجوز

در گذشته، وب‌سایت‌ها می‌توانستند متدهایی مانند navigator.mediaDevices.getUserMedia() یا Notification.requestPermission() و همچنین navigator.geolocation.getCurrentPosition() بلافاصله پس از بارگیری وب‌سایت فراخوانی کنند. یک درخواست مجوز قبل از اینکه کاربر با وب سایت تعامل داشته باشد ظاهر می شود. این گاهی اوقات به عنوان هرزنامه مجوز توصیف می شود و بر هر دو رویکرد تأثیر می گذارد، به طور ضمنی درخواست در اولین استفاده و همچنین درخواست صریح از قبل.

کاهش‌های مرورگر و نیاز به ژست کاربر

هرزنامه‌های مجوز منجر به این شد که فروشندگان مرورگر قبل از نشان دادن درخواست مجوز، به یک حرکت کاربر مانند کلیک کردن روی دکمه یا یک رویداد کلیدی نیاز داشته باشند. مشکل این رویکرد این است که تشخیص اینکه آیا یک حرکت کاربر مشخص باید به یک درخواست مجوز برای نمایش داده شود یا نه، بسیار دشوار است، اگر نگوییم غیرممکن. ممکن است کاربر با ناامیدی روی صفحه کلیک کرده باشد، زیرا بارگذاری صفحه بسیار طول کشیده است، یا شاید واقعاً روی دکمه «محل من» کلیک کرده است. برخی از وب‌سایت‌ها نیز در فریب دادن کاربران به کلیک بر روی محتوا برای فعال کردن درخواست بسیار خوب عمل کردند.

یکی دیگر از اقدامات کاهشی، افزودن موارد کاهش سریع سوء استفاده است، مانند مسدود کردن کامل ویژگی‌ها برای شروع، یا نشان دادن درخواست مجوز به شیوه‌ای غیر معقول و کمتر مزاحم.

زمینه سازی مجوز

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

خنثی سازی آسان نیست

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

اگر مجوز کلید تجربه است، برای مثال، دسترسی به میکروفون برای یک برنامه کنفرانس ویدیویی، برنامه‌هایی مانند Google Meet گفتگوهای مزاحم را نشان می‌دهند که به کاربر نحوه رفع انسداد مجوز را آموزش می‌دهند.

یک عنصر <permission> اعلامی

برای رسیدگی به چالش‌هایی که در این پست توضیح داده شده است، تیم مجوزهای Chrome یک آزمایش اولیه برای عنصر HTML جدید، <permission> راه‌اندازی کرده است. این عنصر به توسعه‌دهندگان اجازه می‌دهد تا فعلاً اجازه استفاده از زیرمجموعه‌ای از ویژگی‌های قدرتمند موجود در وب‌سایت‌ها را به صورت اعلامی بخواهند. در ساده ترین شکل آن، مانند مثال زیر از آن استفاده می کنید:

<permission type="camera" />

هنوز به طور فعال در حال بحث است که آیا <permission> باید یک عنصر خالی باشد یا خیر. عنصر void یک عنصر خود بسته در HTML است که نمی تواند هیچ گره فرزندی داشته باشد، که در HTML به این معنی است که ممکن است تگ پایانی نداشته باشد.

ویژگی type

ویژگی type حاوی لیستی از مجوزهایی است که شما درخواست می‌کنید با فاصله جدا شده است. در زمان نوشتن این مقاله، مقادیر مجاز عبارتند از 'camera' ، 'microphone' ، و camera microphone (با فاصله از هم جدا شده اند). این عنصر به طور پیش‌فرض شبیه به دکمه‌هایی با استایل عامل کاربر barebones ارائه می‌شود.

ویژگی type-ext

برای برخی از مجوزهایی که امکان پارامترهای اضافی را فراهم می‌کنند، ویژگی type-ext جفت‌های کلید-مقدار جدا شده با فاصله را می‌پذیرد، مانند، برای مثال، precise:true برای مجوز مکان جغرافیایی.

ویژگی lang

متن دکمه توسط مرورگر ارائه شده است و به معنای سازگاری است، بنابراین نمی توان آن را مستقیماً سفارشی کرد. مرورگر زبان متن را بر اساس زبان ارثی سند یا زنجیره عنصر والد یا یک ویژگی lang اختیاری تغییر می‌دهد. این بدان معناست که توسعه دهندگان نیازی به بومی سازی عنصر <permission> خود ندارند. اگر عنصر <permission> فراتر از مرحله آزمایشی مبدا باشد، ممکن است چندین رشته یا نماد برای هر نوع مجوز پشتیبانی شود تا انعطاف پذیری افزایش یابد. اگر علاقه مند به استفاده از عنصر <permission> هستید و به یک رشته یا نماد خاص نیاز دارید، با ما تماس بگیرید !

رفتار

هنگامی که کاربر با عنصر <permission> تعامل می کند، می تواند مراحل مختلفی را طی کند:

• اگر قبلاً به یک ویژگی اجازه نداده بودند، می‌توانند آن را در هر بازدیدی مجاز کنند یا برای بازدید فعلی اجازه دهند.

  

• اگر قبلاً به این ویژگی اجازه داده بودند، می توانند به اجازه دادن به آن ادامه دهند یا اجازه دادن به آن را متوقف کنند.

  

• اگر قبلاً یک ویژگی را غیرمجاز کرده بودند، می توانند به عدم اجازه دادن به آن ادامه دهند یا این بار آن را مجاز کنند.

  

متن عنصر <permission> به طور خودکار بر اساس وضعیت به روز می شود. به عنوان مثال، اگر اجازه استفاده از یک ویژگی داده شده باشد، متن تغییر می کند و می گوید ویژگی مجاز است. اگر ابتدا نیاز به اعطای مجوز باشد، متن تغییر می کند تا کاربر را به استفاده از این ویژگی دعوت کند. اسکرین شات قبلی را با اسکرین شات زیر مقایسه کنید تا دو حالت را ببینید.

طراحی CSS

برای اطمینان از اینکه کاربران می توانند به راحتی دکمه را به عنوان سطحی برای دسترسی به قابلیت های قدرتمند تشخیص دهند، سبک عنصر <permission> محدود شده است. اگر محدودیت های یک ظاهر طراحی شده برای مورد استفاده شما کار نمی کند، ما دوست داریم در مورد چگونگی و چرایی آن بشنویم ! در حالی که نمی توان همه نیازهای یک ظاهر طراحی شده را برآورده کرد، امیدواریم راه های مطمئنی را کشف کنیم تا پس از آزمایش اولیه، امکان استایل بیشتر عنصر <permission> را فراهم کنیم. جدول زیر به جزئیات برخی از ویژگی هایی که دارای محدودیت یا قوانین خاصی هستند، می پردازد. در صورت نقض هر یک از قوانین، عنصر <permission> غیرفعال می شود و نمی توان با آن تعامل کرد. هر گونه تلاش برای تعامل با آن منجر به استثناهایی می شود که می توان با جاوا اسکریپت گرفت. پیام خطا حاوی جزئیات بیشتری در مورد تخلف شناسایی شده خواهد بود.

ویژگی های CSS زیر را می توان به طور معمول استفاده کرد:

• font-kerning
• font-optical-sizing
• font-stretch
• font-synthesis-weight
• font-synthesis-style
• font-synthesis-small-caps
• font-feature-settings
• forced-color-adjust
• text-rendering
• align-self
• anchor-name aspect-ratio
• border (و همه ویژگی های border-* )
• clear
• color-scheme
• contain
• contain-intrinsic-width
• contain-intrinsic-height
• container-name
• container-type
• counter-*
• flex-*
• float
• height
• isolation
• justify-self
• left
• order
• orphans
• outline-* (با استثنایی که قبلاً برای outline-offset ذکر شد)
• overflow-anchor
• overscroll-behavior-*
• page
• position
• position-anchor
• content-visibility
• right
• scroll-margin-*
• scroll-padding-*
• text-spacing-trim
• top
• visibility
• x
• y
• ruby-position
• user-select
• width
• will-change
• z-index

به‌علاوه، همه ویژگی‌های منطقی معادل را می‌توان استفاده کرد (به عنوان مثال، inline-size معادل width است)، با پیروی از قوانین مشابه معادل آنها.

شبه طبقات

دو شبه کلاس خاص وجود دارد که امکان استایل دادن به عنصر <permission> را بر اساس حالت فراهم می کند:

• :granted : کلاس شبه :granted در صورت اعطای مجوز، استایل خاصی را می دهد.
• :invalid : شبه کلاس :invalid زمانی که عنصر در حالت نامعتبر قرار دارد، برای مثال، هنگامی که در یک iframe با مبدا متقاطع ارائه می شود، امکان استایل خاصی را می دهد.

permission {
  background-color: green;
}

permission:granted {
  background-color: light-green;
}

/* Not supported during the origin trial. */
permission:invalid {
  background-color: gray;
}

رویدادهای جاوا اسکریپت

عنصر <permission> قرار است همراه با Permissions API استفاده شود. تعدادی رویداد وجود دارد که می توان به آنها گوش داد:

• onpromptdismiss : این رویداد زمانی اجرا می شود که درخواست مجوز ایجاد شده توسط عنصر توسط کاربر رد شود (به عنوان مثال با کلیک کردن روی دکمه بستن یا کلیک کردن در خارج از دستور).

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

• onvalidationstatuschange : این رویداد زمانی فعال می شود که عنصر از حالت "valid" به "invalid" تغییر کند. این عنصر زمانی "valid" در نظر گرفته می شود که مرورگر به یکپارچگی سیگنال اعتماد کند اگر کاربر روی آن کلیک کند، و در غیر این صورت "invalid" در نظر گرفته می شود، برای مثال، زمانی که عنصر تا حدی توسط محتوای HTML دیگر مسدود شده باشد.

می‌توانید شنوندگان رویداد را برای این رویدادها به‌طور مستقیم در کد HTML ثبت کنید ( <permission type="…" onpromptdismiss="alert('The prompt was dismissed');" /> )، یا با استفاده از addEventListener() در <permission> عنصر، همانطور که در مثال زیر نشان داده شده است.

<permission type="camera" />
<script>
  const permission = document.querySelector('permission');
  permission.addEventListener('promptdismiss', showCameraWarning);

  function showCameraWarning() {
    // Show warning that the app isn't fully usable
    // unless the camera permission is granted.
  }

  const permissionStatus = await navigator.permissions.query({name: "camera"});
  
  permissionStatus.addEventListener('change', () => {
    // Run the check when the status changes.
    if (permissionStatus.state === "granted") {
      useCamera();
    }
  });

  // Run the initial check.
  if (permissionStatus.state === "granted") {
    useCamera();
  }
</script>

تشخیص ویژگی

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

if ('HTMLPermissionElement' in window) {
  // The `<permission>` element is supported.
}

آزمایش مبدا

برای امتحان عنصر <permission> در سایت خود با کاربران واقعی، برای آزمایش اولیه ثبت نام کنید . برای دستورالعمل‌هایی در مورد نحوه آماده‌سازی سایت خود برای استفاده از آزمایش‌های اولیه، شروع به کار با آزمایش‌های مبدا را بخوانید. نسخه آزمایشی اصلی از Chrome 126 تا 131 (19 فوریه 2025) اجرا خواهد شد.

نسخه ی نمایشی

نسخه ی نمایشی را کاوش کنید و کد منبع را در GitHub بررسی کنید. در اینجا یک اسکرین شات از تجربه یک مرورگر پشتیبانی است.

بازخورد

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

سوالات متداول

• چگونه این بهتر از یک <button> معمولی جفت شده با Permissions API است؟ کلیک بر روی یک <button> یک حرکت کاربر است، اما مرورگرها هیچ راهی برای تأیید اتصال آن به درخواست برای درخواست مجوز ندارند. اگر کاربر روی <permission> کلیک کرده باشد، مرورگر می تواند مطمئن شود که کلیک مربوط به درخواست مجوز است. این به مرورگر اجازه می‌دهد تا جریان‌هایی را تسهیل کند که در غیر این صورت بسیار خطرناک‌تر خواهند بود. به عنوان مثال، به کاربر اجازه می دهد تا به راحتی مسدود شدن یک مجوز را لغو کند.
• اگر سایر مرورگرها از عنصر <permission> پشتیبانی نکنند چه می شود؟ عنصر <permission> را می توان به عنوان یک بهبود پیشرونده استفاده کرد. در مرورگرهایی که پشتیبانی نمی کنند، می توان از یک جریان مجوز کلاسیک استفاده کرد. برای مثال، بر اساس کلیک یک <button> معمولی. تیم مجوزها نیز در حال کار بر روی یک polyfill هستند. مخزن GitHub را ستاره دار کنید تا زمانی که آماده شد مطلع شوید.
• آیا این موضوع با سایر فروشندگان مرورگر مورد بحث قرار گرفته است؟ عنصر <permission> به طور فعال در W3C TPAC در سال 2023 در یک جلسه شکست مورد بحث قرار گرفت. می توانید یادداشت های جلسه عمومی را بخوانید. تیم Chrome همچنین از هر دو فروشنده، موقعیت استانداردهای رسمی را درخواست کرده است، به بخش پیوندهای مرتبط مراجعه کنید. عنصر <permission> موضوعی در حال بحث با سایر مرورگرها است و ما امیدواریم که آن را استاندارد کنیم.
• آیا این در واقع باید یک عنصر خالی باشد؟ هنوز به طور فعال در حال بحث است که آیا <permission> باید یک عنصر خالی باشد یا خیر. اگر بازخوردی دارید، در مورد این موضوع صحبت کنید.

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

• توضیح دهنده
• موقعیت استاندارد WebKit
• موقعیت استاندارد موزیلا

قدردانی

این سند توسط Balázs Egedy ، Thomas Nguyen ، Penelope McLachlan ، Marian Harbach ، David Warren و Rachel Andrew بررسی شده است.