Notifications API ومعالجة الأذونات

إن Notification.permission عبارة عن سلسلة نصية ثابتة تعكس حالة الإذن الحالية. ويمكن أن تكون "granted" (سمح المستخدم)، أو "denied" (حظر المستخدم)، أو "default" (لم يُطلب الإذن من قبل). تحقّق من هذه الخاصية قبل محاولة عرض الإشعارات لتجنب الأخطاء غير الضرورية.

يعيد Notification.requestPermission() وعدًا يُحلّ بسلسلة الإذن الجديدة. استدعِه استجابةً لإجراء واضح من المستخدم فقط، وليس عند تحميل الصفحة. تتجاهل المتصفحات طلبات الإذن التي تظهر فور التحميل أو تمنعها، وينزعج المستخدمون منها عندما تظهر بلا سياق.

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

ينشئ new Notification(title, options) إشعارًا للنظام ويعرضه. الوسيطة الأولى هي سلسلة عنوان الإشعار. أما كائن options فهو الوسيطة الثانية، ويقبل خصائص مثل body (النص أسفل العنوان)، وicon (عنوان URL للصورة)، وtag لمنع التكرار. لا يعمل ذلك إلا إذا كان الإذن "granted".

تشمل خيارات الإشعار الأساسية ما يلي: body للنص التوضيحي أسفل العنوان، وicon لصورة صغيرة، وbadge للأيقونة الصغيرة أحادية اللون المعروضة في منطقة إشعارات نظام التشغيل، وimage لصورة كبيرة مضمّنة، وtag لاستبدال إشعار سابق له الوسم نفسه، وrequireInteraction: true لإبقاء الإشعار حتى يتفاعل المستخدم معه.

يطلق مثيل Notification عدة أحداث: يُطلق onclick عند نقر المستخدم على الإشعار (استخدمه لتركيز النافذة والتنقل)، ويُطلق onclose عند إغلاق الإشعار، ويُطلق onerror عند حدوث مشكلة أثناء إنشائه. أرفق معالجات الأحداث بالمثيل المُعاد بعد استدعاء new Notification().

خزّن مثيل Notification المُعاد في متغير، واستدعِ notification.close() لإغلاقه برمجيًا. يفيد ذلك في الإشعارات الحساسة للوقت التي تصبح غير مهمة بعد مدة معينة. ادمجه مع setTimeout لإغلاق الإشعار تلقائيًا بعد بضع ثوانٍ.

يتطلب Notifications API سياقًا آمنًا. في صفحات HTTP، تكون نتيجة typeof Notification === 'undefined' أو تكون API معطّلة بالكامل، وذلك حسب المتصفح. هذا إجراء أمني لمنع المواقع الضارة من إغراق المستخدمين برسائل نظام مزيفة. تحقّق دائمًا من توفرها قبل استخدامها.

يمكن أن يوفّر hook باسم useNotifications دالتين: requestPermission() وshowNotification(title, options). ويتتبع داخليًا حالة الإذن الحالية ويحدّثها بعد طلب الإذن. تستدعي المكوّنات showNotification دون القلق بشأن التحقق من الإذن، لأن hook يتولى ذلك داخليًا.

توفّر Page Visibility API الخاصية document.hidden والحدث visibilitychange. تكون الإشعارات أكثر فائدة عندما لا يكون المستخدم يشاهد علامة التبويب حاليًا. تحقّق من document.hidden === true قبل عرض الإشعار لتجنب التنبيهات المكررة عندما تكون الصفحة في المقدمة بالفعل.

إن Notifications API الموضحة هنا مخصصة للإشعارات التي تطلقها الصفحة نفسها محليًا. أما إشعارات الدفع التي تصل حتى عند إغلاق الصفحة، فتحتاج إلى Push API مدمجة مع service worker. يستقبل service worker حدث الدفع ويستدعي self.registration.showNotification() في الخلفية.

أيّ مما يلي ليس قيمة صالحة لـ Notification.permission؟

يمكن أن تكون قيمة Notification.permission هي granted أو denied أو default. اطلب الإذن دائمًا استجابةً لإجراء من المستخدم، وليس عند تحميل الصفحة. استخدم new Notification(title, options) لإنشاء الإشعارات، وتعامل مع onclick لتركيز النافذة. ادمج ذلك مع Visibility API لعرض الإشعارات فقط عندما تكون علامة التبويب مخفية.