مولّد إشعارات المتصفح
أنشئ واختبر وأنتج كوداً لإشعارات المتصفح الفورية. كوّن الخيارات وشاهد النتائج واحصل على كود جافاسكريبت جاهز للاستخدام.
اختبار الإشعار
الانتقال إلى الكود المُنتج →معاينة
Welcome!
This is your notification message. Customize it to see how it looks.
قوالب سريعة
تكوين الإشعار
أيقونة صغيرة تُعرض في الإشعار
أيقونة شارة تمثل الإشعار (أندرويد فقط)
صورة كبيرة تُعرض في الإشعار
معرّف فريد لتجميع أو استبدال الإشعارات المشابهة
نمط اهتزاز مفصول بفواصل بالمللي ثانية (للجوّال فقط)
الكود المُنتج
// Request notification permission
if ('Notification' in window && Notification.permission === 'default') {
await Notification.requestPermission();
}
// Check if permission is granted
if (Notification.permission === 'granted') {
const notification = new Notification('Welcome!', {
"body": "This is your notification message. Customize it to see how it looks.",
"tag": "notification-1",
"vibrate": [
200,
100,
200
]
});
notification.onclick = () => {
console.log('Notification clicked');
notification.close();
};
}دعم المتصفحات
يُدعم Notifications API في Chrome وFirefox وSafari وEdge وOpera. بعض الميزات مثل الاهتزاز والشارة خاصة بالأجهزة المحمولة وقد لا تعمل على جميع المنصات.
أدوات ذات صلة
حول مولّد إشعارات المتصفح
كيف يعمل
- كوّن خصائص الإشعار مع معاينة مباشرة
- اختبر الإشعارات مباشرةً في متصفحك
- أنتج كود جافاسكريبت للتنفيذ
- خصّص العنوان والنص والأيقونات والسلوك
- اختبر أنماطاً وأساليب مختلفة للإشعارات
حالات الاستخدام الشائعة
- تطوير تطبيقات ويب بإشعارات
- اختبار مظهر وسلوك الإشعارات
- إنشاء تنبيهات لتفاعل المستخدم
- تنفيذ ميزات الإشعارات الفورية
- تعلم Notifications API
الأسئلة الشائعة
ما هو استخدام مولّد إشعارات المتصفح؟
مولّد إشعارات المتصفح هو أداة لمطوري الويب لإنشاء واختبار وإنتاج كود لإشعارات المتصفح الفورية. يتيح لك تكوين جميع خصائص الإشعار ورؤية معاينة مباشرة والحصول على كود جافاسكريبت جاهز.
هل أحتاج إلى أذونات خاصة لاستخدام إشعارات المتصفح؟
نعم، تتطلب إشعارات المتصفح إذن المستخدم. يجب على المستخدمين منح الإذن صراحةً قبل أن يتمكن موقعك من عرض الإشعارات. تُظهر الأداة حالة الإذن الحالية.
ما هي المتصفحات التي تدعم Notifications API؟
يُدعم Notifications API على نطاق واسع في المتصفحات الحديثة بما في ذلك Chrome وFirefox وSafari وEdge وOpera. بعض الميزات مثل أنماط الاهتزاز والشارات خاصة بالأجهزة المحمولة.
هل يمكنني تخصيص أيقونة الإشعار والصور؟
نعم! يمكنك تحديد عناوين URL لأنواع متعددة من الصور: أيقونة صغيرة وشارة (أندرويد فقط) وصورة كبيرة في نص الإشعار. يجب أن تكون جميع الصور متاحة عبر عناوين HTTPS.
ما هو استخدام خاصية 'tag'؟
خاصية tag هي معرّف فريد للإشعار. عند عرض إشعار جديد بنفس tag الإشعار الموجود، يحل الإشعار الجديد محل القديم بدلاً من إنشاء نسخة مكررة. هذا مفيد لمنع إزعاج الإشعارات.
كيف تعمل أنماط الاهتزاز؟
تُحدد أنماط الاهتزاز كأرقام مفصولة بفواصل بالميلي ثانية. يتناوب النمط بين الاهتزاز والتوقف. مثلاً، '200, 100, 200' يعني: اهتزاز 200ms، توقف 100ms، اهتزاز 200ms. هذه الميزة تعمل فقط على الأجهزة المحمولة.
ما معنى 'طلب التفاعل'؟
عند تفعيل 'طلب التفاعل'، يظل الإشعار مرئياً حتى يرفضه المستخدم صراحةً أو ينقر عليه. بدون هذا الخيار، تختفي الإشعارات تلقائياً بعد ثوانٍ.
هل يمكنني جعل الإشعارات صامتة؟
نعم، يتيح خيار 'صامت' إنشاء إشعارات بدون صوت أو اهتزاز. هذا مفيد للتحديثات غير العاجلة التي يجب أن تكون مرئية دون إزعاج.
كيف أنفّذ الكود المُنتج في موقعي؟
انسخ كود جافاسكريبت المُنتج واندمجه في تطبيقك. أولاً تحقق مما إذا كان المتصفح يدعم الإشعارات، ثم اطلب الإذن إذا لزم، وأخيراً أنشئ الإشعارات بخياراتك المكوّنة.
هل الإشعارات التي أنشئها خاصة وآمنة؟
بالتأكيد! كل اختبار الإشعارات يتم في متصفحك فقط. لا يُرسَل أي بيانات إلى خوادم خارجية. الأداة مصممة للاختبار المحلي الآمن.
هل يمكنني اختبار الإشعارات للتطبيقات التقدمية (PWA)؟
نعم! تساعدك هذه الأداة على اختبار Notifications API وهي ميزة رئيسية في التطبيقات التقدمية. ومع ذلك، تتطلب الإشعارات الفورية المستندة إلى service worker إعداداً إضافياً.
لماذا لا تظهر إشعاراتي التجريبية؟
إذا لم تظهر الإشعارات، تحقق من: 1) ربما الإذن مرفوض، 2) المتصفح ربما في وضع 'عدم الإزعاج'، 3) بعض المتصفحات لا تُظهر الإشعارات عند فتح DevTools، 4) استخدم متصفحاً مدعوماً.