مزايا استخدام الإشعارات الفورية
تقدّم الإشعارات للمستخدم أجزاء صغيرة من المعلومات. يمكن لتطبيقات الويب استخدام الإشعارات لإعلام المستخدمين بالأحداث المهمة أو الحساسة للوقت أو الإجراءات التي يحتاجون إلى اتّخاذها.
تختلف مظهر الإشعارات وأسلوبها من منصة إلى أخرى. على سبيل المثال:
في العادة، كان على متصفّحات الويب بدء تبادل المعلومات بين الخادم والعميل من خلال تقديم طلب. من ناحية أخرى، تتيح لك تكنولوجيا الإشعارات الفورية على الويب ضبط إعدادات خادمك لإرسال الإشعارات عندما يكون ذلك مناسبًا لتطبيقك. وتنشئ خدمة الإشعارات الفورية عناوين URL فريدة لكل عامل خدمة مشترك. يؤدي إرسال الرسائل إلى عنوان URL الخاص بعمليّة الخدمة إلى تنشيط الأحداث في عمليّة الخدمة هذه، ما يدفعها إلى عرض إشعار.
يمكن أن تساعد الإشعارات الفورية المستخدمين في الاستفادة إلى أقصى حد من تطبيقك من خلال مطالبتهم بإعادة فتحه واستخدامه استنادًا إلى أحدث المعلومات.
إنشاء الإشعارات وإرسالها
أنشئ إشعارات باستخدام Notifications API. يحتوي عنصر Notification
على سلسلة title
وعنصر options
. على سبيل المثال:
let title = 'Hi!';
let options = {
body: 'Very Important Message',
/* other options can go here */
};
let notification = new Notification(title, options);
يتم عرض الرمز title
بخط غامق عندما يكون الإشعار نشطًا، في حين يحتوي الرمز body
على نص إضافي.
الحصول على إذن لإرسال الإشعارات
لعرض إشعار، يجب أن يحصل تطبيقك على إذن من المستخدم لإجراء ذلك:
Notification.requestPermission();
كيف تعمل الإشعارات الفورية؟
تعود القوة الحقيقية للإشعارات إلى الجمع بين مشغّلي الخدمات وتكنولوجيا الإشعارات الفورية:
يمكن تشغيل خدمات Worker في الخلفية وعرض الإشعارات حتى عندما لا يكون تطبيقك مرئيًا على الشاشة.
تتيح لك تكنولوجيا الإشعارات الفورية ضبط خادمك لإرسال الإشعارات عندما يكون ذلك مناسبًا لتطبيقك. وتنشئ خدمة الإشعارات الفورية عناوين URL فريدة لكل عامل خدمة مشترك. يؤدي إرسال الرسائل إلى عنوان URL الخاص بعمليّة الخدمة إلى تنشيط الأحداث في عمليّة الخدمة هذه، ما يدفعها إلى عرض إشعار.
في المثال التالي لمسار المعالجة، يسجِّل العميل عامل خدمة ويشترك في الإشعارات الفورية. بعد ذلك، يُرسِل الخادم إشعارًا إلى نقطة نهاية الاشتراك.
يستخدم العميل وعامل الخدمة JavaScript العادي بدون أي مكتبات إضافية. تم إنشاء الخادم باستخدام حزمة npm express
على Node.js، ويستخدم حزمة npm web-push
لإرسال الإشعارات. لإرسال المعلومات إلى الخادم، يُجري العميل طلبًا إلى عنوان URL لطلب POST قد عرضه الخادم.
الجزء 1: تسجيل مشغّل خدمات والاشتراك في ميزة "الدفع"
يسجِّل تطبيق العميل مشغّل خدمة باستخدام
ServiceWorkerContainer.register()
. سيستمر تشغيل مشغّل الخدمة المسجَّل في الخلفية عندما يكون العميل غير نشط.رمز العميل:
navigator.serviceWorker.register('sw.js');
يطلب العميل الإذن من المستخدم لإرسال الإشعارات.
رمز العميل:
Notification.requestPermission();
لتفعيل الإشعارات الفورية، يستخدم عامل الخدمة
PushManager.subscribe()
لإنشاء اشتراك في الإشعارات الفورية. في طلب البيانات منPushManager.subscribe()
، يقدّم عامل الخدمة مفتاح واجهة برمجة التطبيقات للتطبيق كمعرّف.رمز العميل:
navigator.serviceWorker.register('sw.js').then(sw => { sw.pushManager.subscribe({ /* API key */ }); });
تعمل خدمات الإرسال الفوري، مثل "المراسلة عبر السحابة الإلكترونية من Firebase"، وفقًا لنموذج الاشتراك. عندما يشترك عامل الخدمة في خدمة دفع من خلال الاتصال بـ
PushManager.subscribe()
، تنشئ خدمة الدفع عنوان URL فريدًا لعامل الخدمة هذا. يُعرف عنوان URL باسم نقطة نهاية الاشتراك.يرسل العميل نقطة نهاية الاشتراك إلى خادم التطبيق.
رمز العميل:
navigator.serviceWorker.register('sw.js').then(sw => { sw.pushManager.subscribe({ /* API key */ }).then(subscription => { sendToServer(subscription, '/new-subscription', 'POST'); }); });
رمز الخادم:
app.post('/new-subscription', (request, response) => { // extract subscription from request // send 'OK' response });
الجزء 2: إرسال إشعار
يُرسِل خادم الويب إشعارًا إلى نقطة نهاية الاشتراك.
رمز الخادم:
const webpush = require('web-push'); let options = { /* config info for cloud messaging and API key */ }; let subscription = { /* subscription created in Part 1*/ }; let payload = { /* notification */ }; webpush.sendNotification(subscription, payload, options);
تؤدي الإشعارات المُرسَلة إلى نقطة نهاية الاشتراك إلى تنشيط أحداث الإرسال الفوري مع تحديد Worker الخدمة كهدف. يتلقّى Worker في الخدمة الرسالة ويعرضها للمستخدم كإشعار.
رمز مشغّل الخدمة:
self.addEventListener('push', (event) => { let title = { /* get notification title from event data */ } let options = { /* get notification options from event data */ } showNotification(title, options); })
يتفاعل المستخدم مع الإشعار، ما يؤدي إلى تفعيل تطبيق الويب إذا لم يكن مفعّلاً.
الخطوات التالية
كخطوة تالية، يمكنك استخدام الإشعارات الفورية.
لقد أنشأنا سلسلة من ورشات عمل رموز البرامج لإرشادك خلال كل خطوة من هذه العملية.