استخدام إشعار رسالة HTML5 (إشعار الويب)

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

لنجرب أبسط مثال أولاً. افتح أدوات مطور chrome ، والصق الكود فيه وقم بتشغيله مباشرة:

 new Notification('إشعار رسالة Jartto/', { dir: 'rtl', body: 'هذه رسالة، تم إرسالها عبر إشعار الويب، كاختبار!'، أيقونة: 'https://raw.githubusercontent.com / chenfengyanyu/my-web-accumulation/master/images/logo.jpeg'})

لم يظهر أي إشعار بالرسالة، ما الذي يحدث؟ لا تقلق، استمر في القراءة.

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

سنجد قريبًا أن إذن المستخدم الأصلي هو default ، نظرًا لأن اختيار المستخدم غير معروف، فإن سلوك المتصفح هو نفس سلوك denied ، وهو الرفض.

عند رؤية API عالية المستوى لـ HTML5 ، هناك دائمًا بعض المخاوف. على الرغم من أن المثال جيد وسهل الاستخدام، إلا أن مدى التوافق هو سؤال يستحق التفكير فيه.

كما ترون، تدعمها جميع المتصفحات بشكل أساسي، باستثناء iOS Safari و Opera Mini ، لذا يجب أن تكون تطبيقات الهاتف المحمول حذرة.

4. وثائق API

لنقم أولاً بفرز واجهة برمجة التطبيقات (API) بشكل منهجي، الأمر بسيط للغاية.

حالة الاستخدام:

 السماح بالإشعار = إشعار جديد (العنوان، الخيارات)

المعلمة:

العنوان: عنوان الإشعار الذي سيتم عرضه بالتأكيد

الخيارات: كائن يُسمح باستخدامه لتعيين الإشعارات. ويحتوي على الخصائص التالية:

• dir: يمكن أن يكون اتجاه النص تلقائيًا (تلقائي)، أو ltr (من اليسار إلى اليمين)، أو rtl (من اليمين إلى اليسار).
• lang: يحدد اللغة المستخدمة في الإشعارات. يجب أن تكون هذه السلسلة صالحة في مستند علامة اللغة BCP 47.
• النص: سلسلة إضافية معروضة في الإشعار
• العلامة: امنح الإشعار معرفًا حتى يمكن تحديث الإشعار أو استبداله أو إزالته عند الضرورة.
• أيقونة: عنوان URL للصورة التي سيتم استخدامها لعرض أيقونة الإشعارات.

ملكية:

Notification.permission: سلسلة تشير إلى حالة الترخيص لعرض الإشعارات الحالية. تشمل القيم المحتملة ما يلي:

• denied (رفض المستخدم عرض الإشعار)،
• granted (سمح المستخدم بعرض الإشعار)،
• default (لأن اختيار المستخدم غير معروف، فإن المتصفح يتصرف بنفس الطريقة التي يتصرف بها عند denied )

طريقة:

• Notification.onclick: يتعامل مع حدث النقر، الذي يتم تشغيله في كل مرة ينقر فيها المستخدم على الإشعار.
• Notification.onshow: يتعامل مع حدث العرض، الذي يتم تشغيله عند عرض الإشعار.
• Notification.onerror: يعالج حدث الخطأ، الذي يتم تشغيله عندما يواجه الإشعار خطأ.
• Notification.onclus: يعالج حدث الإغلاق، الذي يتم تشغيله عندما يقوم المستخدم بإغلاق الإشعار.
• Notification.requestPermission(): يُستخدم للصفحة الحالية لتطبيقها على المستخدم للحصول على إذن لعرض الإشعارات.
• Notification. Close (): يستخدم لإغلاق الإشعارات.

Notification.requestPermission لا يمكن استدعاء هذه الطريقة إلا من خلال سلوك المستخدم (على سبيل المثال: حدث عند النقر) ولا يمكن استدعاؤها بواسطة طرق أخرى.

وفقًا لواجهة برمجة التطبيقات (API) المذكورة أعلاه، دعنا نكتب مثالًا كاملاً:

 function notifyMe(){ // تحقق أولاً مما إذا كان المتصفح يدعم if (!(Notification in window)) { تنبيه (هذا المتصفح لا يدعم إشعارات سطح المكتب } // تحقق مما إذا كان المستخدم يوافق على تلقي الإشعارات else if (Notification. إذن = == منح) { // إذا كان الأمر جيدًا، فلنقم بإنشاء إشعار var notification = new Notification(Hi There! } // وإلا فإننا نحتاج إلى الحصول على إذن من المستخدم else if (Notification.permission !== 'denied ') { Notification.requestPermission(function (permission){ // إذا وافق المستخدم، يمكنك إرسال إشعار إليه if (permission === Grants) { var notification = new Notification(Hi There!); } }); // أخيرًا ، إذا وصل التنفيذ إلى هذه النقطة، فهذا يعني أن المستخدم رفض السماح بالإشعارات ذات الصلة // احترامًا، لا ينبغي لنا إزعاجهم بعد الآن}

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.