تطبيقات الويب التقدمية

إشعارات الدفع

16 دقيقة الدرس 8 من 30

إشعارات الدفع في تطبيقات الويب التقدمية

تسمح إشعارات الدفع لتطبيق الويب التقدمي الخاص بك بإرسال رسائل إلى المستخدمين حتى عندما لا يكون التطبيق مفتوحًا. يمكن لهذه الميزة القوية تحسين مشاركة المستخدم بشكل كبير من خلال تقديم تحديثات وتنبيهات ومحتوى مخصص في الوقت المناسب.

نظرة عامة على واجهة برمجة تطبيقات الدفع

تمكن واجهة برمجة تطبيقات الدفع تطبيقات الويب من تلقي الرسائل المدفوعة من الخادم، بغض النظر عما إذا كان التطبيق نشطًا. تعمل بالتزامن مع عمال الخدمة لعرض الإشعارات.

المكونات الرئيسية:

خدمة الدفع: خدمة تديرها المتصفح تتعامل مع تسليم الرسائل
اشتراك الدفع: نقطة نهاية فريدة لكل جهاز مستخدم
واجهة برمجة تطبيقات الإشعارات: تعرض إشعارات مرئية للمستخدمين
عامل الخدمة: يستقبل أحداث الدفع في الخلفية
خادم التطبيق: الخلفية الخاصة بك التي ترسل رسائل الدفع

طلب إذن الإشعارات

قبل إرسال الإشعارات، يجب عليك طلب الإذن من المستخدم:

// التحقق مما إذا كانت الإشعارات مدعومة
if ('Notification' in window) {
    console.log('الإشعارات مدعومة');
} else {
    console.log('الإشعارات غير مدعومة');
}

// طلب الإذن
async function requestNotificationPermission() {
    const permission = await Notification.requestPermission();

    if (permission === 'granted') {
        console.log('تم منح إذن الإشعارات');
        return true;
    } else if (permission === 'denied') {
        console.log('تم رفض إذن الإشعارات');
        return false;
    } else {
        console.log('تم تجاهل إذن الإشعارات');
        return false;
    }
}

// الاستخدام مع تفاعل المستخدم
document.getElementById('enable-notifications').addEventListener('click', async () => {
    const granted = await requestNotificationPermission();
    if (granted) {
        await subscribeToPushNotifications();
    }
});

مهم: يجب أن يتم تشغيل طلبات إذن الإشعارات بواسطة تفاعل المستخدم (مثل النقر فوق زر). يعتبر طلب الإذن عند تحميل الصفحة تجربة مستخدم سيئة وقد يتم حظره بواسطة المتصفحات.

إنشاء اشتراك الدفع

اشترك المستخدم في إشعارات الدفع باستخدام واجهة برمجة تطبيقات PushManager:

// إنشاء مفاتيح VAPID أولاً (جانب الخادم):
// npm install web-push
// npx web-push generate-vapid-keys

const publicVapidKey = 'YOUR_PUBLIC_VAPID_KEY';

async function subscribeToPushNotifications() {
    try {
        const registration = await navigator.serviceWorker.register('/sw.js');
        await navigator.serviceWorker.ready;

        const subscription = await registration.pushManager.subscribe({
            userVisibleOnly: true,
            applicationServerKey: urlBase64ToUint8Array(publicVapidKey)
        });

        console.log('اشتراك الدفع:', JSON.stringify(subscription));

        // إرسال الاشتراك إلى الخادم الخاص بك
        await fetch('/api/push-subscribe', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(subscription)
        });

        console.log('تم حفظ الاشتراك في الخادم');
        return subscription;
    } catch (error) {
        console.error('فشل الاشتراك:', error);
    }
}

function urlBase64ToUint8Array(base64String) {
    const padding = '='.repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/');
    const rawData = window.atob(base64);
    const outputArray = new Uint8Array(rawData.length);
    for (let i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
}

معالجة أحداث الدفع في عامل الخدمة

استمع لأحداث الدفع في عامل الخدمة الخاص بك واعرض الإشعارات:

// في sw.js
self.addEventListener('push', (event) => {
    let notificationData = {
        title: 'إشعار جديد',
        body: 'لديك رسالة جديدة',
        icon: '/images/icon-192x192.png',
        badge: '/images/badge-72x72.png',
        tag: 'notification-1',
        data: { url: '/messages' }
    };

    if (event.data) {
        const payload = event.data.json();
        notificationData = { ...notificationData, ...payload };
    }

    event.waitUntil(
        self.registration.showNotification(notificationData.title, {
            body: notificationData.body,
            icon: notificationData.icon,
            badge: notificationData.badge,
            tag: notificationData.tag,
            data: notificationData.data,
            vibrate: [200, 100, 200],
            actions: [
                { action: 'open', title: 'فتح' },
                { action: 'close', title: 'إغلاق' }
            ]
        })
    );
});

تمرين:

نفذ واجهة مستخدم لطلب إذن الإشعارات مع شرح واضح
أنشئ اشتراك دفع وأرسله إلى الخادم الخاص بك
قم بإعداد خادم Node.js مع web-push لإرسال إشعارات الاختبار
تعامل مع نقرات الإشعارات للتنقل إلى صفحات محددة
أضف أزرار إجراءات الإشعارات وتعامل مع نقراتها