تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

مرحلة التجربة والتقييم لعنصر <permission> HTML جديد

Thomas Steiner

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

الطرق الإلزامية لطلب الإذن

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

طلب الإذن بشكل ضمني عند أول استخدام مقابل طلب الإذن بشكل صريح مسبقًا

واجهة برمجة التطبيقات Geolocation API هي واجهة برمجة تطبيقات فعّالة وتعتمد على أسلوب الطلب الضمني عند استخدامها لأول مرة. على سبيل المثال، عندما يستدعي تطبيق الأسلوب navigator.geolocation.getCurrentPosition() ، تنبثق رسالة طلب الأذونات تلقائيًا عند أول طلب. مثال آخر هو navigator.mediaDevices.getUserMedia().

أما واجهات برمجة التطبيقات الأخرى، مثل Notification API أو Device Orientation and Motion API، فعادةً ما تتضمّن طريقة صريحة لطلب الإذن من خلال طريقة ثابتة مثل Notification.requestPermission() أو DeviceMotionEvent.requestPermission().

التحديات المتعلّقة بالطرق الإلزامية لطلب الحصول على الإذن

الرسائل غير المرغوب فيها بشأن الأذونات

في السابق، كان بإمكان المواقع الإلكترونية استدعاء طرق مثل navigator.mediaDevices.getUserMedia() أو Notification.requestPermission()، ولكن أيضًا navigator.geolocation.getCurrentPosition() مباشرةً عند loading الموقع الإلكتروني. ستظهر رسالة طلب الإذن قبل أن يتفاعل المستخدم مع الموقع الإلكتروني. ويُشار أحيانًا إلى ذلك باسم "الرسائل غير المرغوب فيها بشأن الأذونات"، ويؤثر في كلا النهجين، إذ يطلب التطبيق الإذن بشكل ضمني عند الاستخدام الأول، كما يطلب الإذن صراحةً في البداية.

رسالة طلب إذن الوصول إلى الميكروفون تظهر عند تحميل موقع إلكتروني

إجراءات التخفيف في المتصفّح ومتطلبات إيماءات المستخدم

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

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

متصفّح Chrome يعرض

وضع الإذن في سياقه

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

"خرائط Google" مع فتح طلب إذن الموقع الجغرافي زر الوصول إلى الموقع الجغرافي الذي أدّى إلى ظهور الطلب بعيد.

لا يمكن التراجع بسهولة

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

عناصر التحكّم في الموقع الإلكتروني على Chrome في "خرائط Google" لإلغاء الأذونات

إذا كان الإذن أساسيًا للتجربة، على سبيل المثال، إذن الوصول إلى الميكروفون لتطبيق اجتماعات الفيديو، تعرض تطبيقات مثل Google Meet مربّعات حوار مزعجة ترشد المستخدم إلى كيفية إزالة حظر الإذن.

تعليمات Google Meet حول كيفية فتح عناصر التحكّم في المواقع الإلكترونية في Chrome

عنصر `<permission>` تعريفي

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

<permission type="camera" />

لا يزال الجدل قائمًا حول ما إذا كان يجب أن يكون <permission> عنصرًا فارغًا أم لا. العنصر غير الصالح هو عنصر ذاتي الإغلاق في HTML لا يمكنه أن يتضمّن أي عقد ثانوية، ما يعني في HTML أنّه قد لا يتضمّن علامة نهاية.

سمة `type`

تحتوي السمة type على قائمة بالأذونات التي تطلبها مفصولة بمسافات. في وقت كتابة هذه المقالة، كانت القيم المسموح بها هي 'camera' و'microphone' و camera microphone (مفصولة بمسافة). يتم عرض هذا العنصر تلقائيًا بطريقة مشابهة للأزرار مع تصميم وكيل المستخدم الأساسي.

أزرار عناصر أذونات مختلفة تتضمّن أذونات الكاميرا والميكروفون والكاميرا والميكروفون معًا

سمة `type-ext`

بالنسبة إلى بعض الأذونات التي تسمح باستخدام مَعلمات إضافية، تقبل السمة type-ext أزواج مفاتيح/قيم مفصولة بمسافات، مثل precise:true لإذن الموقع الجغرافي.

سمة `lang`

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

السلوك

عندما يتفاعل المستخدم مع العنصر <permission>، يمكنه التبديل بين مراحل مختلفة:

إذا لم يسبق له السماح بميزة معيّنة، يمكنه السماح بها في كل زيارة أو السماح بها للزيارة الحالية.
إذا سبق أن سمحوا بالميزة، يمكنهم مواصلة السماح بها أو التوقف عن السماح بها.
إذا سبق أن حظروا ميزة، يمكنهم مواصلة حظرها أو السماح بها هذه المرة.

يتم تعديل نص العنصر <permission> تلقائيًا استنادًا إلى الحالة. على سبيل المثال، إذا تم منح الإذن لاستخدام ميزة، يتم تغيير النص للإشارة إلى أنّ الميزة مسموح بها. إذا كان من الضروري منح الإذن أولاً، يتغيّر النص لدعوة المستخدم إلى استخدام الميزة. قارِن بين لقطة الشاشة السابقة ولقطة الشاشة التالية للاطّلاع على الحالتَين.

أزرار الأذونات مع النصوص

تصميم CSS

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

الموقع	القواعد
`color`، `background-color`	يمكن استخدامها لضبط لون النص والخلفية، على التوالي. يجب أن يكون التباين بين اللونَين كافيًا لقراءة النص بوضوح (يجب أن تكون نسبة التباين 3 على الأقل). يجب أن يكون ملف قناة ألفا يساوي 1.
`font-size`، `zoom`	يجب ضبطها ضمن ما يعادل `small` و `xxxlarge`. وسيتم إيقاف العنصر في حال عدم تحديد قيمة. سيتم أخذ الزوم في الاعتبار عند احتساب `font-size`.
`outline-offset`	سيتم تصحيح القيم السالبة إلى `0`.
`margin` (الكل)	سيتم تصحيح القيم السالبة إلى `0`.
`font-weight`	سيتم تصحيح القيم التي تقل عن `200` إلى `200`.
`font-style`	سيتم تصحيح القيم غير `normal` و`italic` إلى `normal`.
`word-spacing`	سيتم تصحيح القيم التي تزيد عن `0.5em` لتصبح `0.5em`. سيتم تصحيح القيم التي تقل عن `0` لتصبح `0`.
`display`	سيتم تصحيح القيم غير `inline-block` و`none` إلى `inline-block`.
`letter-spacing`	سيتم تصحيح القيم التي تزيد عن `0.2em` لتصبح `0.2em`. سيتم تعديل القيم التي تقل عن `-0.05em` لتكون `-0.05em`.
`min-height`	ستكون القيمة التلقائية هي `1em`. في حال توفّر القيمة، سيتم أخذ الحد الأقصى للقيمة المحسوبة بين القيمة التلقائية والقيمة المقدَّمة في الاعتبار.
`max-height`	ستكون القيمة التلقائية هي `3em`. في حال توفّر القيمة، سيتم أخذ الحدّ الأدنى للقيمة المحسوبة بين القيمة التلقائية والقيمة المقدَّمة في الاعتبار.
`min-width`	ستكون القيمة التلقائية هي `fit-content`. في حال توفّر قيمة، سيتم اعتبار الحد الأقصى للقيمة المحسوبة بين القيمة التلقائية والقيمة المرسَلة.
`max-width`	ستكون القيمة التلقائية ثلاث مرات `fit-content`. في حال تحديد قيمة، سيتم اعتبار الحد الأدنى للقيمة المحسوبة بين القيمة التلقائية والقيمة التي تم تحديدها.
`padding-top`	لن يتم تطبيقها إلا في حال ضبط `height` على `auto`. في هذه الحالة، سيتم تعديل القيم التي تزيد عن `1em` لتكون `1em` وسيتم تعديل `padding-bottom` لتكون القيمة `padding-top`.
`padding-left`	لن يتم تطبيقها إلا في حال ضبط `width` على `auto`. في هذه الحالة، سيتم تعديل القيم التي تزيد عن `5em` لتكون `5em` وسيتم تعديل `padding-right` لتكون القيمة `padding-left.`.
`transform`	لن يُسمح باستخدام التأثيرات البصرية المشوهة. في الوقت الحالي، يقتصر قبولنا على الترجمة ثنائية الأبعاد والتكبير النسبي.

يمكن استخدام خصائص 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;
}

أحداث JavaScript

يُقصد استخدام العنصر <permission> مع Permissions API. هناك عدد من الأحداث التي يمكن الاستماع إليها:

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

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

ملاحظة: خلال الفترة التجريبية للمصدر، سيتم تسمية هذا الإصدار onresolve، ولكن اسم النهائي سيكون onpromptaction. يمكنك رصد اسم الحدث المتوافق باستخدام ميزة، مثل 'onresolve' in HTMLPermissionElement.prototype مثلاً.
onvalidationstatuschange: يتمّ تشغيل هذا الحدث عند تبديل العنصر من "valid" إلى "invalid". يُعتبر العنصر "valid" عندما يثق ال browser في سلامة الإشارة إذا نقر عليها المستخدم، و"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، لن يحدث شيء إذا كان المتصفّح لا يعرفه. قد تحتاج إلى رصد مدى توفّر JavaScript، مثلاً لإنشاء طلب إذن يتم تشغيله من خلال نقرة على <button> عادي.

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