بهبودهای پیشنهادی <مجوز> عنصر

منتشر شده: ۱۲ مه ۲۰۲۵

عنصر پیشنهادی <permission> در HTML هنوز در مرحله آزمایشی اولیه است، زیرا تیم کروم آن را اصلاح می‌کند و بر پایه پایه‌ای که در آزمایش اولیه origin ما بنا شده است، بنا می‌کند. این پست پیشرفت‌هایی را به اشتراک می‌گذارد که هدف آنها ارائه انعطاف‌پذیری و کنترل بیشتر هنگام درخواست مجوزها در برنامه‌های وب است. برای مرور جامع مقدمه‌ای بر عنصر <permission> و قابلیت‌های اولیه آن، به مقاله قبلی ما با عنوان «آزمایش origin برای یک عنصر جدید <permission> در HTML» مراجعه کنید.

پشتیبانی محتوا برای تجربه کاربری جایگزین

عنصر <permission> در ابتدا تا کروم ۱۳۶ به عنوان یک عنصر void بدون محتوا تعریف می‌شد. از کروم ۱۳۷ به بعد از محتوا پشتیبانی می‌کند، به این معنی که اکنون لازم است آن را با تگ‌های باز و بسته علامت‌گذاری کند:

<permission>
  <!-- optional content -->
</permission>

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

<!-- Invalid `type` attribute value -->
<permission type="not-supported">
  <p>Your browser does not support the specified <code>type</code>.</p>
</permission>

تشخیص دقیق‌تر ویژگی‌ها به صورت برنامه‌نویسی‌شده

برای کمک به شما در تعیین پشتیبانی از انواع مجوزهای خاص، یک متد استاتیک isTypeSupported() معرفی کرده‌ایم:

HTMLPermissionElement.isTypeSupported('geolocation');

این متد یک مقدار بولی برمی‌گرداند که نشان می‌دهد آیا نوع مجوز مشخص شده پشتیبانی می‌شود یا خیر. با ترکیب تشخیص ویژگی موجود، typeof HTMLPermissionElement !== 'undefined' ، اکنون می‌توانید به صورت برنامه‌نویسی مطمئن شوید که هم از عنصر <permission> و هم از انواع مجوزهای خاص پشتیبانی می‌شود.

توجه داشته باشید که می‌توانید چندین نوع مجوز با فاصله (space-separed) را نیز ارسال کنید (برای مثال، "camera microphone" ) و این تابع بررسی می‌کند که آیا رشته کلی یک مقدار "type" معتبر است یا خیر. برای مثال، فراخوانی isTypeSupported() با پارامترهای زیر، نتایج زیر را برمی‌گرداند:

  • "camera"true
  • "geolocation"true
  • "camera geolocation"false (اگرچه انواع به صورت جداگانه پشتیبانی می‌شوند، اما ترکیب آنها پشتیبانی نمی‌شود.)

نام رویدادها به‌روزرسانی شد

در کروم ۱۳۶، دو رویداد جدید را برای جایگزینی رویدادهای قبلی معرفی کردیم:

  • onpromptdismiss (جایگزین ondismiss می‌شود)
  • onpromptaction (جایگزین onresolve می‌شود)

این رویدادهای جدید، معانی واضح‌تری ارائه می‌دهند و با رفتار عنصر، هماهنگی بهتری دارند. رویدادهای قدیمی‌تر در کروم ۱۳۸ منسوخ خواهند شد، بنابراین توصیه می‌کنیم کنترل‌کننده‌های رویداد خود را بر این اساس به‌روزرسانی کنید.

پشتیبانی از آیکون

ما در حال کار بر روی فعال کردن پشتیبانی از آیکون در عنصر <permission> هستیم که برای کروم ۱۳۸ در نظر گرفته شده است. این ویژگی به شما امکان می‌دهد آیکون‌های از پیش تعریف‌شده مربوط به نوع مجوز را با گزینه‌های سبک‌دهی محدود مانند تنظیم رنگ و اندازه نمایش دهید. جزئیات دقیق API هنوز در حال نهایی شدن است. 

مثال‌های زیر پیش‌فرض، یک رنگ پرکننده متفاوت و یک رنگ پرکننده بدون رنگ اما با یک خط دور مشکی را نشان می‌دهند.

استایل پیش‌فرض

رندر پیش‌فرض آیکون.

رنگ پیش‌فرض آیکون همان رنگ متن عنصر مجوز است.

یک ظاهر طراحی شده اصلاح شده

مثال‌های زیر تغییرات نمونه‌ای در استایل پیش‌فرض را نشان می‌دهند.

تغییر رنگ آیکون

::permission-icon {
  fill: black;
}

رندر اصلاح‌شده با آیکون مشکی ثابت.

تغییر طرح کلی آیکون

::permission-icon {
  fill: white;
  stroke: black;
  stroke-width: 20px;
}

رندر اصلاح‌شده با آیکون دورتادور مشکی.

غیرفعال کردن آیکون

پس از اجرا، آیکون به طور پیش‌فرض فعال خواهد شد. اگر می‌خواهید آیکون را غیرفعال کنید، می‌توانید با استفاده از CSS زیر این کار را انجام دهید.

::permission-icon {
  display: none;
}

دستورالعمل‌های سبک

برای راهنمایی جامع در مورد استایل‌بندی عنصر <permission> ، شامل بهترین شیوه‌ها و محدودیت‌ها، به دستورالعمل‌های استایل‌بندی <permission> مراجعه کنید. این منبع دستورالعمل‌های دقیقی را ارائه می‌دهد تا به شما در استایل‌بندی مؤثر عنصر در برنامه‌هایتان کمک کند.

پشتیبانی از پلتفرم و قابلیت‌های گسترده

عنصر <permission> اکنون از پلتفرم‌ها و قابلیت‌های اضافی پشتیبانی می‌کند:

  • پشتیبانی اندروید: این عنصر اکنون در دستگاه‌های اندروید قابل استفاده است و کاربرد آن را در پلتفرم‌های مختلف کاربران گسترش می‌دهد.
  • پشتیبانی از موقعیت جغرافیایی: اکنون می‌توانید مجوزهای type="geolocation" را با استفاده از عنصر <permission> به همراه یک ویژگی بولی اضافی preciselocation درخواست کنید. در حالی که ویژگی preciselocation فقط بر متن اعلان تأثیر می‌گذارد، ما به طور فعال در حال کار بر روی تمایز بین مجوزهای موقعیت مکانی coarse و exact در به‌روزرسانی‌های آینده هستیم.

نتیجه‌گیری

این بهبودها در عنصر <permission> بخشی از تلاش‌های مداوم ما برای ساده‌سازی درخواست‌های مجوز و بهبود تجربه کاربری در وب است. ما شما را تشویق می‌کنیم که این ویژگی‌های جدید را آزمایش کنید و با ارائه بازخورد به ما در اصلاح و تکامل این قابلیت کمک کنید.