شرح تركيب الإشعارات للمواقع والمنتديات وإرسال التنبيهات للزوار

[admin]

شرح تركيب وتفعيل إشعارات Push لموقعك أو منتداك

طريقة إضافة إشعارات حقيقية للموقع واستقبالها على الكمبيوتر والآيفون

تقدر تضيف لموقعك أو منتداك ميزة إشعارات Web Push، بحيث يظهر للزائر خيار تفعيل الإشعارات، وبعد موافقته تقدر ترسل له تنبيه عن موضوع جديد أو خبر أو تحديث بالموقع.

الإشعارات تعتمد على تقنية Push API و Service Worker، ويستطيع الموقع استقبال الإشعار حتى عندما لا تكون صفحة الموقع مفتوحة أمام المستخدم.

ـــــــــــــــــــــــــ ـــــــــــ

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



ـــــــــــــــــــــــــ ـــــــــــ

المتطلبات

• الموقع يعمل على HTTPS
• إمكانية رفع ملفات PHP و JavaScript
• Composer على السيرفر أو الكمبيوتر
• إنشاء مفاتيح VAPID
• ملف Service Worker
• مكان لحفظ اشتراكات الزوار

ـــــــــــــــــــــــــ ـــــــــــ

أولاً: تثبيت مكتبة Web Push

إذا كان موقعك يعمل بـ PHP، نستخدم مكتبة Web Push.

من خلال Composer شغل الأمر التالي:

composer require minishlink/web-push

بعد انتهاء التثبيت سيظهر مجلد:

vendor

وفي ملفات PHP نحتاج استدعاء:

require DIR . ‘/vendor/autoload.php’;

ـــــــــــــــــــــــــ ـــــــــــ

ثانياً: إنشاء مفاتيح VAPID

الإشعارات تحتاج مفتاحين:

• Public Key
• Private Key

المفتاح العام يوضع في JavaScript ويمكن أن يظهر للزوار.

أما Private Key فلا تضعه داخل JavaScript ولا تنشره، ويجب أن يبقى داخل السيرفر فقط.

بعد إنشاء المفاتيح احتفظ بها لأننا سنستخدمها في الاشتراك وإرسال الإشعارات.

ـــــــــــــــــــــــــ ـــــــــــ

ثالثاً: إنشاء ملف Service Worker

أنشئ ملف باسم مثلاً:

sw.js

وارفعه في الموقع.

مثال بسيط:

self.addEventListener(‘push’, function(event) {

let data = {};
if (event.data) {
    data = event.data.json();
}
const title = data.title || 'إشعار جديد';
const options = {
    body: data.body || '',
    icon: data.icon || '/icon.png',
    badge: data.badge || '/icon.png',
    data: {
        url: data.url || '/'
    }
};
event.waitUntil(
    self.registration.showNotification(title, options)
);

});

self.addEventListener(‘notificationclick’, function(event) {

event.notification.close();
const url = event.notification.data.url || '/';
event.waitUntil(
    clients.openWindow(url)
);

});

هذا الملف هو المسؤول عن استقبال الإشعار وعرضه على الجهاز.

ـــــــــــــــــــــــــ ـــــــــــ

رابعاً: تسجيل Service Worker

نضيف JavaScript داخل الموقع:

if (‘serviceWorker’ in navigator) {

navigator.serviceWorker.register('/sw.js')
.then(function(registration) {
    console.log('Service Worker تم تسجيله');
})
.catch(function(error) {
    console.log('خطأ:', error);
});

}

ـــــــــــــــــــــــــ ـــــــــــ

خامساً: زر تمكين الإشعارات

الأفضل ألا تطلب الإذن من الزائر مباشرة عند فتح الموقع.

ضع له زر واضح مثل:

تمكين الإشعارات

ثم عند الضغط نطلب الإذن:

document.getElementById(‘enableNotifications’).onclick = async function() {

const permission = await Notification.requestPermission();
if (permission === 'granted') {
    alert('تم تفعيل الإشعارات');
}

};

ـــــــــــــــــــــــــ ـــــــــــ

سادساً: إنشاء اشتراك Push

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

ضع المفتاح العام الخاص بك مكان:

YOUR_PUBLIC_VAPID_KEY

ثم استخدم:

const registration = await navigator.serviceWorker.ready;

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

ونحتاج الدالة التالية لتحويل المفتاح:

function urlBase64ToUint8Array(base64String) {

const padding = '='.repeat(
    (4 - base64String.length % 4) % 4
);
const base64 = (base64String + padding)
    .replace(/-/g, '+')
    .replace(/_/g, '/');
const rawData = window.atob(base64);
return Uint8Array.from(
    [...rawData].map(char => char.charCodeAt(0))
);

}

بعدها نرسل بيانات الاشتراك إلى ملف PHP ليتم حفظها.

ـــــــــــــــــــــــــ ـــــــــــ

سابعاً: حفظ اشتراك الزائر

مثلاً نرسل الاشتراك إلى:

save-subscription.php

بالطريقة التالية:

await fetch(’/save-subscription.php’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’
},
body: JSON.stringify(subscription)
});

داخل ملف PHP تستطيع حفظ بيانات الاشتراك في قاعدة البيانات.

كل متصفح أو جهاز سيملك اشتراكاً خاصاً به.

ـــــــــــــــــــــــــ ـــــــــــ

ثامناً: إرسال إشعار من PHP

مثال أساسي:

<?php
require __DIR__ . '/vendor/autoload.php';
use Minishlink\WebPush\WebPush;
use Minishlink\WebPush\Subscription;
$auth = [
    'VAPID' => [
        'subject' => 'https://example.com',
        'publicKey' => 'PUBLIC_KEY',
        'privateKey' => 'PRIVATE_KEY'
    ]
];
$webPush = new WebPush($auth);
$subscription = Subscription::create([
    'endpoint' => 'ENDPOINT',
    'publicKey' => 'P256DH_KEY',
    'authToken' => 'AUTH_KEY'
]);
$payload = json_encode([
    'title' => 'موضوع جديد',
    'body' => 'تم إضافة موضوع جديد في المنتدى',
    'url' => 'https://example.com/topic',
    'icon' => 'https://example.com/icon.png'
]);
$webPush->queueNotification(
    $subscription,
    $payload
);
foreach ($webPush->flush() as $report) {
    if ($report->isSuccess()) {
        echo 'تم إرسال الإشعار';
    } else {
        echo 'فشل الإرسال';
    }
}

وبالطبع في الاستخدام الحقيقي يتم جلب جميع الاشتراكات من قاعدة البيانات وإرسال الإشعار لكل المشتركين.

ـــــــــــــــــــــــــ ـــــــــــ
طريقة تفعيل الإشعارات على الآيفون

في الآيفون تختلف الطريقة قليلاً.
إذا ظهر للمستخدم تنبيه يطلب منه إضافة الموقع إلى الشاشة الرئيسية، يتبع الخطوات التالية:
1- افتح الموقع بواسطة Safari
2- اضغط زر المشاركة
3- اختر إضافة إلى الشاشة الرئيسية
4- افتح الموقع من الأيقونة الجديدة
5- اضغط تمكين الإشعارات

بعد إضافة الموقع للشاشة الرئيسية سيظهر كأنه تطبيق مستقل.

وهنا أصبح الموقع موجوداً على الشاشة الرئيسية ويمكن فتحه مثل أي تطبيق.
ـــــــــــــــــــــــــ ـــــــــــ
ملاحظات مهمة

• يجب أن يعمل الموقع بشهادة HTTPS
• لا تنشر Private VAPID Key
• لا تطلب الإذن من الزائر بطريقة مزعجة
• الأفضل وضع زر خاص لتفعيل الإشعارات
• احذف الاشتراكات المنتهية أو غير الصالحة من قاعدة البيانات
• استخدم الإشعارات للمواضيع المهمة ولا تكثر منها
• اختبر الإشعارات على أكثر من متصفح وجهاز

ـــــــــــــــــــــــــ ـــــــــــ
النتيجة

بعد تطبيق الخطوات يصبح موقعك أو منتداك يدعم إشعارات Push الحديثة.
الزائر يوافق على الإشعارات مرة واحدة، وبعدها تستطيع إرسال تنبيه يحتوي على عنوان ونص ورابط، وعند الضغط عليه ينتقل مباشرة إلى الصفحة أو الموضوع المطلوب.
وتصلح الطريقة للمواقع المبنية بـ PHP وكذلك المنتديات القديمة مثل vBulletin مع بعض التعديل البسيط على أماكن الأكواد.

منتديات النخبة | ZMZM.NET