في بعض الأحيان سنرى هذه المطالبة في الركن الأيمن السفلي من سطح المكتب:
إن موجه سطح المكتب هذا هو تقنية إشعارات الويب الجديدة لـ HTML5.
تعمل تقنية إشعارات الويب على تمكين الصفحات من إصدار إشعارات سيتم عرضها على مستوى النظام خارج الصفحة. يمكن أن يوفر للمستخدمين تجربة أفضل، حتى عندما يكون المستخدمون مشغولين بأعمال أخرى، يمكنهم تلقي إشعارات الرسائل من الصفحة، مثل تذكير برسالة بريد إلكتروني جديدة، أو تذكير بالرسالة المستلمة في غرفة الدردشة عبر الإنترنت، وما إلى ذلك.
ملاحظة: بالإضافة إلى IE، تتمتع جميع المتصفحات الحديثة الرئيسية بالدعم الأساسي لدفعة سطح المكتب هذه.
يبدأ
لإنشاء إشعار رسالة، يكون الأمر بسيطًا للغاية، ما عليك سوى استخدام فئة الإشعارات ضمن كائن النافذة.
var n = new Notification(Desktop Push, { icon: 'img/icon.png', body: 'هذا هو أول إشعار لي على سطح المكتب.', image: 'img/1.jpg'});بعد ذلك سترى إشعارًا بلقطة الشاشة التي التقطتها أعلاه على سطح مكتب النظام.
ملاحظة: لن يصبح إشعار الرسالة ساري المفعول إلا عند الوصول إلى الصفحة من خلال خدمة الويب. إذا قمت بالنقر المزدوج مباشرة لفتح ملف محلي، فلن يكون له أي تأثير. وهذا يعني أنه يجب فتح ملفك على الخادم بدلاً من استخدام المتصفح مباشرة لفتح الملف المحلي.
بالطبع، من الممكن أنك لا ترى أي شيء، لذلك لا تقلق واستمر في القراءة.
القواعد الأساسيةبالطبع، قبل أن ترغب في ظهور الإشعار أعلاه، من الضروري فهم البنية الأساسية للإشعار:
Let myNotification = new Notification(title, options);
العنوان: يحدد عنوانًا للإشعار الذي سيتم عرضه أعلى نافذة الإشعارات عند تشغيله.
يحتوي كائن الخيارات (اختياري) على أي خيارات إعداد مخصصة تنطبق على الإعلام.
الخيارات شائعة الاستخدام هي:body: نص الإشعار، والذي سيتم عرضه أسفل العنوان.
العلامة: تشبه معرف كل إشعار بحيث يمكن تحديث الإشعار أو استبداله أو إزالته عند الضرورة.
الأيقونة: أيقونة لعرض الإشعارات
الصورة: عنوان URL للصورة التي سيتم عرضها في نص الإشعار.
البيانات: أي بيانات تريد ربطها بالإشعار. يمكن أن يكون هذا أي نوع بيانات.
renotify: قيمة منطقية تحدد ما إذا كان يجب إعلام المستخدم بعد أن يحل الإشعار الجديد محل الإشعار القديم. القيمة الافتراضية خاطئة، مما يعني أنه لن يتم إعلامهم.
requireInteraction: يشير إلى أن الإشعار يجب أن يظل نشطًا حتى ينقر عليه المستخدم أو يغلقه، بدلاً من إغلاقه تلقائيًا. القيمة الافتراضية خاطئة.
عند تنفيذ هذا الكود، سيسأل المتصفح المستخدم ما إذا كان سيسمح للموقع بعرض إشعارات الرسائل، كما هو موضح في الشكل التالي:
لن يتم عرض الإشعارات إلا إذا نقر المستخدم على "السماح" وسمح بالإشعارات.
يأذنكيفية معرفة ما إذا كان المستخدم ينقر على السماح أو الحظر؟
يحتوي مثيل الإشعارات الخاص بالنافذة على وظيفة requestPermission للحصول على حالة ترخيص المستخدم:
// أولاً، نتحقق مما إذا كان لدينا إذن لعرض الإشعارات // إذا لم يكن الأمر كذلك، فإننا نتقدم بطلب للحصول على إذن if (window.Notification && Notification.permission !== Granted) { Notification.requestPermission(function (status) { // الحالة هي حالة التفويض . // إذا نقر المستخدم على السماح، فسيتم "منح" الحالة // إذا نقر المستخدم على "تعطيل"، فستكون الحالة "مرفوضة" // سيسمح لنا هذا باستخدام Notification.permission إذا كان في Chrome/Safari. (Notification.permission!== الحالة) { Notification.permission = الحالة } });ملاحظة: إذا قام المستخدم بالنقر فوق زر الإغلاق في الزاوية اليمنى العليا من التفويض، فستكون قيمة الحالة هي القيمة الافتراضية.
بعد ذلك، نحتاج فقط إلى تحديد ما إذا كانت قيمة الحالة قد تم منحها لتحديد ما إذا كان سيتم عرض الإشعار أم لا.
حدث الإخطارلكن مجرد عرض مربع الرسالة أمر غير جذاب، لذا يجب أن تتمتع إشعارات الرسائل بدرجة معينة من التفاعل، ويجب أن تتضمن الأحداث قبل وبعد عرض الرسالة.
قام الإشعار بصياغة سلسلة من وظائف الأحداث منذ البداية، ويمكن للمطورين استخدام هذه الوظائف للتعامل مع تفاعلات المستخدم بطريقة شاملة:
هناك: onshow، onclick، onerror، onClose.
var n = new Notification(Desktop Push, { icon: 'img/icon.png', body: 'هذا هو أول إشعار لي على سطح المكتب.'}); // يتم تشغيل وظيفة onshow عند عرض مربع الرسالة // OK Do تسجيل بعض البيانات وإغلاق مربع الرسالة بانتظام n.onshow = function() { console.log('عرض مربع الرسالة'); // أغلق مربع الرسالة بعد 5 ثوانٍ setTimeout(function() { n. Close(); } , 3000);};// يتم الاتصال به عند النقر فوق مربع الرسالة // يمكنك فتح العرض ذي الصلة وإغلاق مربع الرسالة والعمليات الأخرى في نفس الوقت n.onclick = function() { console.log('انقر فوق الرسالة box'); // افتح العرض ذي الصلة n. Close();};// عند حدوث خطأ، سيتم استدعاء وظيفة onerror // إذا لم يكن هناك ترخيص ممنوح، فسيتم تنفيذ وظيفة onerror أيضًا عند إنشاء ملف مثيل كائن الإعلام n.onerror = function() { console.log('خطأ في صندوق الرسالة'); // القيام بأشياء أخرى}; ) // افعل شيئًا آخر};مثال بسيط
<!DOCTYPE html><html lang=en> <head> <meta charset=UTF-8 /> <title>المستند</title> </head> <body> <button>انقر لبدء الإشعار</button> < / body> <script> window.addEventListener(load, function() { // أولاً، دعونا نتحقق مما إذا كان لدينا إذن لإرسال الإشعارات // إذا لم يكن الأمر كذلك، فإننا نطلب الإذن if (window.Notification && Notification.permission !== منح) { Notification.requestPermission(function(status) { if (Notification.permission !==status) { Notification.permission = condition; } }); var Button = document.getElementsByTagName(button)[0]; Button.addEventListener(click, function() { // أنشئ إشعارًا إذا وافق المستخدم if (window.Notification && Notification.permission === Granted) { var n = new Notification(Hi!); } // إذا لم يختر المستخدم عرض الإشعارات أم لا // ملاحظة: لأنه في Chrome لا يمكننا تحديد ما إذا كانت سمة الإذن لها قيمة، فمن غير الآمن // التحقق مما إذا كانت قيمة هذه السمة أم لا بشكل افتراضي else.if (window.Notification && Notification.permission !== مرفوض) { Notification.requestPermission(function(status) { if (Notification.permission !==status) { Notification.permission = condition; } // إذا وافق المستخدم إذا (الحالة === تم منحها) { var n = new Notification(Hi! } // وإلا فيمكننا التنازل عن الوضع العادي واستخدامه else { تنبيه(Hi! } }); // إذا رفض المستخدم قبول الإشعار else { // يمكننا التسوية واستخدام الوضع العادي تنبيه التنبيه(Hi! } }); </script></html>عندما نفتح الواجهة، سينبثق تطبيق ترخيص. إذا نقرنا على "السماح" ثم نقرنا على الزر، فسيتم إرسال إشعار إلى سطح المكتب، ويمكننا رؤية هذا الإشعار في الزاوية اليمنى السفلية من سطح المكتب.
أعلاه نعرض فقط رسالة.
إذا (الحالة === مُنحت) { var n = new Notification(Hi);}إذا كان لدينا الكثير من الرسائل، على سبيل المثال، أستخدم حلقة for لمحاكاة عدد كبير من الإشعارات.
for(var i=0; i<10; i++) { var n = new Notification(Hi,+i);}يمكنك أن ترى أنه يتم عرض 10 إشعارات. لكن في بعض الحالات، قد يكون عرض عدد كبير من الإشعارات مؤلمًا للمستخدمين.
على سبيل المثال، إذا كان تطبيق المراسلة الفورية يطالب المستخدم بكل رسالة واردة. لتجنب إغراق سطح مكتب المستخدم بمئات الإشعارات غير الضرورية، قد يكون من الضروري تولي قائمة انتظار من الرسائل المعلقة.
لذلك، يجب إضافة علامة إلى الإشعار الذي تم إنشاؤه حديثًا.
إذا كان هناك إشعار جديد يحمل نفس علامة الإشعار السابق، فسيحل الإشعار الجديد محل الإشعار السابق، وسيتم عرض الإشعار الأخير فقط على سطح المكتب.
لا تزال تستخدم المثال أعلاه، ما عليك سوى إضافة سمة علامة إلى إشعار المشغل:
for (var i = 0; i < 10; i++) { // أخيرًا، سيتم رؤية الإشعار الذي يحتوي على محتوى Hi 9 فقط var n = new Notification(Hi! + i, {tag: 'soManyNotification'});} أخيرايعد إشعار الرسائل ميزة جيدة، لكنه لا يستبعد أن بعض المواقع تستخدم هذه الوظيفة بشكل ضار بمجرد أن يأذن المستخدم بها، فسوف يرسلون بعض الرسائل غير الودية من وقت لآخر ويزعجون عمل المستخدم - تعطيل صلاحيات الموقع.
يمكننا النقر على علامة التعجب الموجودة على الجانب الأيسر من مربع إدخال عنوان المتصفح وسيكون هناك خيار إعلام، ويمكننا تعديل التفويض. أو هناك خيار لتعديل الإشعار في صفحة الإشعارات، ويمكنك تعديل إشعار التفويض وفقًا للحالة المحددة.
لذلك يتم تنفيذ إشعار الويب الأساسي.
تلخيصما ورد أعلاه هو طريقة تنفيذ وظيفة إعلام سطح المكتب لإشعارات الويب بتنسيق HTML5 التي قدمها المحرر، وآمل أن تكون مفيدة لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!
إذا كنت تعتقد أن هذه المقالة مفيدة لك، فنحن نرحب بإعادة طبعها، يرجى الإشارة إلى المصدر، شكرًا لك!