تنبيه

الرجاء تحديد نص من المقال أولاً.

محتوى محمي

لتحميل هذا المقال، يرجى تفعيل جرس الإشعارات أو اختيار طريقة اشتراك أخرى.

Ahmed Bouchefra

الرئيسية
Ahmed Bouchefra

أحمد بوشفرة

Software Engineer & Tech Author

ابدأ هنا
ابدأ هنا
المكتبة
المكتبة
أكاديمية بايثون
أكاديمية بايثون
تطبيق اختبارات البرمجة
تطبيق اختبارات البرمجة
دورات يوديمي
دورات يوديمي
المسارات
المسارات
الملخصات
الملخصات
الأدوات
الأدوات
اشترك
اشترك
كتب فريق 10xdevblog
كتب فريق 10xdevblog
الكاتب: أحمد بوشفرة

أسرار الإشعارات الخفية: كيف تعمل خدمة Push Notifications؟

اضغط على زر PDF لتحميل المقال كملف للقراءة لاحقاً

ملاحظة: هذا المقال بقلم أحمد بوشفرة. الآراء الواردة تعبر عن الكاتب.

أحمد بوشفرة: مبرمج ومؤلف تقني، أساعد المطورين على بناء تطبيقات ويب حديثة وسريعة.

يمكنك التواصل مع الكاتب لطلب خدمات برمجية عبر:

يمكنك أيضاً نشر مقالك هنا والترويج لخدماتك أمام جمهور من المبرمجين. تواصل معنا

لخص هذا المقال باستخدام ChatGPT

انسخ الأمر أدناه والصقه في ChatGPT للحصول على ملخص سريع للمقال:

لخص لي هذا المقال في نقاط رئيسية: https://www.ahmedbouchefra.com/secrets-hidden-notifications تم النسخ!
فتح ChatGPT

تخيل معي أنك تشاهد فيلمًا على الهاتف المحمول أو حتى تلعب لعبة على الكمبيوتر، والمتصفح ليس مغلقًا فحسب، بل لا يعمل إطلاقًا. لا فيسبوك مفتوح، ولا أمازون، ولا حتى موقع التسوق الذي زرته قبل قليل. ولكن فجأة، يظهر لك إشعار من الأسفل يخبرك: “المنتج الذي رأيته عاد إلى المخزن، سارع بطلبه بسرعة قبل أن ينفد”. فتتساءل في نفسك: “كيف لا يزال هذا الموقع يعمل؟ هل يراقبني؟”.

لا تقلق، لا يوجد سحر ولا تجسس. هناك قصة بسيطة تحدث في الخفاء، وخلفها تقنيات متقدمة مثل جافا سكريبت، الـ Service Worker، والـ Push API، بالإضافة إلى التشفير، وحتى طرف ثالث غامض وهو الـ Push Service. دعنا نروي القصة من البداية.

البداية: بوابة الاتصال الخفية

لنفترض أنك دخلت إلى موقع ما، وظهرت لك الرسالة أو السؤال المألوف الذي يظهر لنا جميعًا: “هل تسمح للموقع بإرسال إشعارات إليك؟”. وكالعادة، يضغط الكثيرون على “سماح” (Allow). هذه اللحظة تبدو بسيطة جدًا من الخارج، ولكن من الداخل، هي اللحظة التي فتحت بوابة اتصال بينك وبين الموقع، بوابة تظل تعمل حتى لو كان الموقع مغلقًا.

بمجرد أن يوافق المستخدم، يحدث أمران مهمان:

  1. تخزين الصلاحية: المتصفح يُخزّن صلاحية إرسال الإشعارات التي منحتها للموقع.
  2. طلب الاشتراك: يطلب الموقع، عبر جافا سكريبت، الاشتراك في خدمة الإشعارات (Push Notifications).
// مثال على طلب الاشتراك في الإشعارات
serviceWorkerRegistration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: applicationServerKey
});

هنا، يتدخل المتصفح ويرسل هذا الطلب إلى شيء مهم جدًا وهو الـ Push Service. هذه الخدمة هي ببساطة “مكتب البريد” الرسمي لشركة المتصفح. فإذا كنت تستخدم جوجل كروم مثلًا، فهذه الخدمة تسمى FCM (Firebase Cloud Messaging).

رحلة الإشعار: من الخادم إلى شاشتك

يرسل المتصفح لك ما يسمى بـ PushSubscription، وهو كائن (object) يحتوي على معلومات حيوية:

  • endpoint: وهو العنوان الفريد الذي ستُرسل إليه الرسائل.
  • keys: وهي مفاتيح تستخدم لتشفير محتوى الإشعار لضمان خصوصيته.
  • expirationTime: وهو وقت انتهاء صلاحية هذا الاشتراك.

هذه هي البيانات التي يرسلها موقع الويب إلى الخادم الخاص به لتخزينها. الآن، أصبح لدى الخادم عنوان المستخدم (Endpoint) ومفاتيح التشفير.

عندما يريد الخادم إرسال إشعار، فإنه يستخدم بروتوكولًا يسمى Web Push Protocol. يقوم بإعداد رسالة، يشفرها باستخدام المفاتيح التي لديه، ويرسلها إلى الـ Push Service. بدورها، تقوم الـ Push Service بتوصيل هذه الرسالة إلى المتصفح الخاص بالمستخدم.

ماذا لو كان الجهاز غير متصل بالإنترنت؟ لا مشكلة. تخزن الـ Push Service الرسالة مؤقتًا وتنتظر أول فرصة متاحة لإرسالها فورًا. يمكن للمطورين أيضًا إضافة بيانات وصفية (metadata) للتحكم في عملية التسليم:

  • TTL (Time To Live): وقت صلاحية الإشعار.
  • Urgency: درجة الاستعجال (عالية أو منخفضة).
  • Topic: نوع الرسالة لتصنيفها.

كل هذا يساعد الـ Push Service على فهم أهمية الرسالة، ولمن يجب أن تُرسل، ومتى.

البطل الخفي: الـ Service Worker

وهنا يظهر بطل القصة الذي يعمل دائمًا في الخلفية: الـ Service Worker. حتى لو لم يكن الموقع مفتوحًا، يمكن للمتصفح تفعيل الـ Service Worker بمجرد وصول رسالة الدفع (Push message). يستقبل الـ Service Worker الحدث ويستخدم showNotification() ليُظهر الإشعار على جهاز المستخدم فورًا.

// Service Worker يستمع لحدث الدفع
self.addEventListener('push', function(event) {
  const title = 'إشعار جديد';
  const options = {
    body: 'وصلك شيء جديد!',
    icon: 'images/icon.png',
    badge: 'images/badge.png'
  };

  event.waitUntil(self.registration.showNotification(title, options));
});

والأجمل من ذلك، عندما يضغط المستخدم على الإشعار، يمكنك توجيهه إلى صفحة معينة باستخدام clients.openWindow().

// توجيه المستخدم عند النقر على الإشعار
self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  event.waitUntil(
    clients.openWindow('https://example.com')
  );
});

وهذا يعني أن إشعارًا واحدًا يمكن أن يؤدي إلى نقرة، ثم إلى صفحة منتج، ومن ثم إلى عملية شراء جديدة.

سلاح ذو حدين

ولكن كن حذرًا، فالإشعارات ليست لعبة. إنها أداة قوية جدًا يمكنك أن تبني بها ثقة المستخدم أو تخسره إلى الأبد. فإذا استخدمتها بشكل صحيح، يمكنك إيصال محتوى مهم في الوقت المناسب وللمستخدم المناسب. لكن إذا أفرطت في استخدامها، سيختار الناس حظرك (block)، أو إلغاء الاشتراك (unsubscribe)، أو حتى تجنب موقعك تمامًا. فمن منا لا تصله إشعارات مزعجة يدفعه ذلك إلى حظرها أو حتى إلغاء تثبيت التطبيق من على الهاتف تمامًا.

خاتمة

في المرة القادمة عندما يصلك إشعار بسيط من موقع ما، تذكر أن هناك سلسلة كاملة من الأحداث تعمل في الخلفية: جافا سكريبت، Push API، Push Service، التشفير، Service Worker، وواجهة الإشعارات (Notifications API). كل هذا لكي تصلك جملة من سطرين فقط، إذا وصلت في الوقت المناسب، فإنها تصبح كنزًا.

هل لديك سؤال أو استفسار؟ اترك تعليقاً بالأسفل:

احصل على المحتوى الجديد فور نشره ⚡

اختر الطريقة الأنسب لك لمتابعتنا والحصول على التحديثات مجاناً.
(اضغط على رابط التفعيل الذي سيصلك لفتح المحتوى)

عرض كل بدائل الاشتراك

احصل على موارد مجانية! 📚

اشترك في القائمة البريدية واحصل على كتب ومصادر تعليمية مجانية

تنبيه هام:

للاشتراك بنجاح، يرجى فتح الصفحة في متصفح خارجي (مثل Chrome أو Safari) وليس متصفح التطبيق المدمج.

📚 المكتبة المجانية

حمّل كتب وأدلة PDF مجانية في البرمجة وتطوير الويب

تصفح المكتبة

شارك المقال