تعد الإشعارات الفورية طريقة رائعة لإرسال رسائل سريعة إلى المستخدمين. تعرف على كيفية إرسالها باستخدام JavaScript دون استخدام أي مكتبة خارجية.
تعد إشعارات JavaScript طريقة لإرسال رسائل إلى المستخدمين في الوقت الفعلي. يمكنك استخدامها لإعلامك بتحديثات موقع الويب الخاص بك أو رسائل الدردشة الجديدة أو رسائل البريد الإلكتروني أو أي أنشطة وسائط اجتماعية. يمكنك أيضًا استخدام إشعارات تذكيرات التقويم (مثل اجتماع يقترب على Google Meet أو Zoom).
تعرف على كيفية إنشاء إشعارات الأحداث في JavaScript وإرسالها إلى هاتفك أو متصفح الويب. ستحقق ذلك باستخدام JavaScript مدمج من جانب العميل - لا توجد مكتبة خارجية مطلوبة!
طلب الإذن بإرسال الإخطارات
لإنشاء إشعار ، تحتاج إلى الاتصال بـ إشعار فئة لإنشاء كائن. يمنحك الوصول إلى العديد من الخصائص والطرق التي يمكنك استخدامها لتكوين إشعارك. ولكن قبل إنشاء إشعار ، ستحتاج أولاً إلى طلب إذن من المستخدم.
سيطلب JavaScript التالي الإذن لإرسال إشعارات المستخدم. ال طلب إذن ستعيد المكالمة رسالة توضح ما إذا كان المتصفح يسمح بالإشعارات أم لا:
مقدار ثابت زر = وثيقة.querySelector ('زر')
button.addEventListener (
"انقر", ()=> {
Notification.requestPermission (). ثم (إذن => {
تنبيه (إذن)
})
})عند النقر فوق الزر ، قد تتلقى تنبيهًا يقول رفض. هذا يعني أن المتصفح رفض إرسال JavaScript لإشعارات الأحداث. حالة الإذن هي رفض للحالات التي منع فيها المستخدم صراحةً المواقع من إرسال الإشعارات (من خلال إعدادات المتصفح) أو كان المستخدم يتصفح في وضع التصفح المتخفي.
في مثل هذه الحالات ، من الأفضل احترام قرار المستخدم بشأن رفض الإشعارات ويجب عليك الامتناع عن مضايقته.
إرسال الإخطارات الأساسية
يمكنك إنشاء إشعار دفع عن طريق إنشاء ملف إشعار مع الكلمة الرئيسية الجديدة. للتعمق في البرمجة الشيئية ، يمكنك الرجوع إلى دليلنا على كيفية إنشاء فصول في JavaScript.
نظرًا لأنك ترسل إشعارات فقط إذا تم منح الإذن ، فستحتاج إلى لفه بداخل ملف لو يفحص.
مقدار ثابت زر = وثيقة.querySelector ('زر')
button.addEventListener ("انقر", ()=> {
Notification.requestPermission (). ثم (موج الشعر بإستمرار => {
لو(موج الشعر بإستمرار 'ممنوح') {
جديد إشعار("مثال على الإخطار")
}
})
})انقر فوق الزر ، وستتلقى إشعارًا فوريًا في الزاوية اليمنى السفلية من متصفح الويب الخاص بك بالنص المحدد.
هذه هي الطريقة الأساسية لإنشاء الإشعارات ، وهي تعمل على هاتفك وكذلك على جهاز الكمبيوتر الخاص بك. لنلقِ نظرة على بعض خصائص الإشعارات المتقدمة.
خصائص الإخطارات المتقدمة
بالإضافة إلى عنوان الإشعار ، يمكنك أيضًا تمرير وسيطة خيارات للمنشئ عند إنشاء كائن الإشعار. يجب أن تكون وسيطة الخيارات هذه كائنًا. هنا ، يمكنك إضافة عدة خيارات لتخصيص إشعارك.
ملكية الجسم
الخاصية الأولى التي يجب أن تعرفها هي جسم ملكية. يمكنك استخدام هذا لإضافة نص إلى إشعارك ، عادةً لنقل مزيد من المعلومات في شكل نص. إليك مثال بسيط:
مقدار ثابت زر = وثيقة.querySelector ('زر')
button.addEventListener ("انقر", ()=> {
Notification.requestPermission (). ثم (موج الشعر بإستمرار => {
لو(موج الشعر بإستمرار 'ممنوح') {
جديد إشعار("مثال على الإخطار", {
جسم: "هذا نص أكثر",
})
}
})
})إذا قمت بتشغيل هذا الرمز ، فسيظهر النص الأساسي في إشعار الدفع ، أسفل مثال على الإخطار رأس.
سمة البيانات
في كثير من الأحيان قد ترغب في إضافة بيانات مخصصة إلى الإشعارات. ربما تريد عرض رسالة خطأ معينة إذا تم رفض الإذن ، أو تخزين البيانات التي تلقيتها من واجهة برمجة التطبيقات. لجميع هذه الحالات ، يمكنك استخدام ملف بيانات لإضافة بيانات مخصصة إلى إشعارك.
button.addEventListener ("انقر", ()=> {
Notification.requestPermission (). ثم (موج الشعر بإستمرار => {
لو(موج الشعر بإستمرار 'ممنوح') {
مقدار ثابت إخطار = جديد إشعار("مثال على الإخطار", {
جسم: "هذا نص أكثر",
بيانات: {مرحبًا: "عالم"}
})
تنبيه (إشعار. data.hello)
}
})
})
يمكنك الوصول إلى البيانات من بيانات الخاصية بشكل مشابه لما هو موضح في كتلة التعليمات البرمجية أعلاه (داخل يُحذًِر()).
يمكنك أيضًا ربط مستمعي الأحداث بإشعاراتك. على سبيل المثال ، يتم تنفيذ مستمع الحدث التالي عندما تغلق إشعار الدفع. وظيفة رد الاتصال تقوم ببساطة بتسجيل الرسالة المخصصة.
مقدار ثابت إخطار = جديد إشعار("مثال على الإخطار", {
جسم: "هذا نص أكثر",
بيانات: {مرحبًا: "عالم"}
})
إشعار. addEventListener ("يغلق"، ه => {
وحدة التحكم.log (e.target.data.hello)
})
هذه طريقة ممتازة لتمرير البيانات إذا كنت بحاجة إلى القيام بشيء ما عندما يغلق شخص ما إشعارًا أو ينقر عليه. جزء من ال يغلق الحدث (الذي يتم تنفيذه عند إغلاق الإشعار) ، يجب عليك الاحتفاظ بها المستمعين الحدث في مخيلتك:
- يعرض: يتم التنفيذ عندما يظهر الإخطار.
- انقر: يتم التنفيذ عندما ينقر المستخدم في أي مكان في الإشعار.
- خطأ: يتم التنفيذ عند رفض إذن JavaScript لإرسال الإشعارات.
خاصية الرمز
ال أيقونة الخاصية هي لإضافة رمز إلى إشعار الدفع. بافتراض أن لديك شعار رمز مسمى logo.png في الدليل الحالي ، يمكنك استخدامه في إشعاراتك مثل:
مقدار ثابت إخطار = جديد إشعار("مثال على الإخطار", {
أيقونة: "logo.png"
})إذا كنت تكافح من أجل الارتباط بملفاتك ، فأنت بحاجة إلى ذلك فهم عمل عناوين URL النسبية وعناوين URL المطلقة.
عند حفظ الملف ، قم بتحديث المتصفح ، وانقر فوق الزر ، فسيتم عرض الصورة على الجانب الأيسر من الرأس والجسم في الإشعار.
سمة العلامة
عندما تقوم بتعيين ملف بطاقة شعار السمة في الإشعار ، فأنت تعطي الإشعار بشكل أساسي معرفًا فريدًا. لا يمكن أن يتواجد إشعاران معًا إذا كان لديهم نفس العلامة. بدلاً من ذلك ، سيحل أحدث إشعار محل الإشعار الأقدم.
ضع في اعتبارك مثال الزر السابق (بدون علامة). إذا كنت تنقر على الزر ثلاث مرات في تتابع سريع ، فستظهر الإشعارات الثلاثة ، وستتراكم فوق بعضها البعض. لنفترض الآن أنك أضفت العلامة التالية إلى الإشعار:
مقدار ثابت إخطار = جديد إشعار("مثال على الإخطار", {
جسم: "هذا نص أكثر",
بطاقة شعار: "علامتي الجديدة"
})
إذا قمت بالنقر فوق الزر مرة أخرى ، فسيظهر مربع إعلام واحد فقط. ستحل كل نقرة لاحقة محل الإشعار السابق ، لذلك سيظهر إشعار واحد فقط بغض النظر عن عدد المرات التي تنقر فيها على الزر. هذا مفيد إذا كنت تريد إضافة بيانات ديناميكية (مثل Math.random ()) الى الجسم:
مقدار ثابت إخطار = جديد إشعار("مثال على الإخطار", {
جسم: رياضيات.عشوائي()
أيقونة: "logo.png",
بطاقة شعار: "علامة جسدي"
})
في كل مرة تنقر فيها على الزر ، سيظهر رقم جديد. استخدم خاصية العلامة إذا كنت تريد الكتابة فوق إشعار حالي بمعلومات جديدة بداخله. في تطبيق المراسلة ، على سبيل المثال ، يمكنك استخدام سمة العلامة للكتابة فوق الإشعار برسائل جديدة.
مثال على دفع الإخطار باستخدام JavaScript
يكتشف المثال التالي أي وقت تفقد فيه التركيز على صفحتك (أي عندما تغلق الصفحة أو تفتح علامة تبويب جديدة). في هذه الحالة ، يرسل الرمز إشعارًا يطلب منك العودة:
يترك إشعار
وثيقة.addEventListener ("تغيير الرؤية", ()=> {
لو(وثيقة.visibilityState "مختفي") {
إخطار = جديد إشعار("عد رجاء", {
جسم: "لا تغادر للتو :("
بطاقة شعار: "عد"
})
} آخر {
إشعار. إغلاق ()
}
})
عندما تفقد التركيز على تلك الصفحة ، ستتلقى إشعارًا يطلب منك العودة إلى الصفحة. ولكن بمجرد العودة إلى الصفحة ، فإن ملف آخر عمليات تنفيذ الكتلة ، والتي تغلق إشعار الدفع. هذه التقنية ممتازة في المواقف التي تريد فيها إعطاء المستخدم نوعًا من المعلومات بعد مغادرة صفحتك.
تعرف على المزيد حول JavaScript
يعد إشعار الحدث أحد الميزات العديدة التي يمكنك العثور عليها في JavaScript. لكي تكون جيدًا حقًا مع الإشعارات ، يجب عليك أولاً فهم ميزات اللغة الأساسية وبناء جملة JavaScript. يعد بناء الألعاب البسيطة إحدى الطرق التي يمكنك من خلالها تعزيز مهاراتك والتعرف على المفاهيم الأساسية للغة.
