ارسال اشعار للمستخدم داخل الصفحة بدون تحديث للموقع Laravel

يمكنك استعمال ال polling و التي يمكن تحديد حدث معين لها حتى تقوم بتحديث جزء من الصفحة بدون إعادة تحميل الصفحة كاملة، أي من ناحية الفكرة هي مماثلة لل ajax.

يمكنك الإطلاع عليها من هنا.

مثلاً لتحديث مكون ما كل 750ms يمكننا كتابة ما يلي:

<div wire:poll.750ms>
    Current time: {{ now() }}
</div>

هنا كل 750ms سيحدث الوقت المعروض في الصفحة و بدون أي إعادة تحميل للصفحة، بالتالي يمكنك استعمال أمر مشابه و لكن بحيث تقوم بتغيير أيقونة الإشعارات أو أي أمر آخر ترغب به.

لإرسال الإشعارات دون تحديث للصفحة، يمكن استخدام تقنية الـ push notifications، والتي تسمح للمستخدم بتلقي الإشعارات على هاتفه المحمول أو جهاز الكمبيوتر الشخصي من خلال متصفح الويب.

يمكن استخدام خدمات مثل Firebase Cloud Messaging أو OneSignal لإرسال الإشعارات على الموقع الذي تعمل عليه. وبشكل عام، يتم القيام بالخطوات التالية:

1. يتم تثبيت خدمة الـ push notifications على الموقع.
2. يتم تسجيل المستخدمين على الخدمة، وتخزين تفاصيلهم في قاعدة البيانات.
3. يتم إنشاء رسالة الإشعار التي تحتوي على المعلومات المراد إرسالها للمستخدم.
4. يتم إرسال الإشعار إلى الهاتف المحمول أو جهاز الكمبيوتر الشخصي من خلال متصفح الويب، ويظهر الإشعار على الشاشة.

يجب التأكد من أن الخدمة المستخدمة تدعم الأجهزة والمتصفحات المختلفة التي يمكن أن يستخدمها المستخدمون للوصول إلى الموقع. ويجب أيضًا التأكد من عدم إرسال الإشعارات بشكل مزعج أو غير مرغوب فيه للمستخدمين، حتى لا تتسبب في الإزعاج أو التشويش على الخدمة التي تقدمها الموقع.

وفيما يلي بعض الأمثلة على كيفية استخدام خدمات الـ push notifications مع Laravel:

1- استخدام OneSignal:

يمكن استخدام خدمة OneSignal مع Laravel باستخدام حزمة توفير الدعم اللازم للإشعارات، مثل laravel-onesignal. ويمكن استخدام هذه الحزمة لإرسال الإشعارات من خلال وحدة التحكم الخاصة بالإشعارات، أو باستخدام الـ API المقدمة من OneSignal.

2- استخدام Firebase Cloud Messaging:

يمكن استخدام Firebase Cloud Messaging مع Laravel باستخدام حزمة Laravel Firebase Cloud Messaging. ويمكن استخدام هذه الحزمة لإرسال الإشعارات من خلال وحدة التحكم الخاصة بالإشعارات، أو باستخدام الـ API المقدمة من Firebase Cloud Messaging.

3- استخدام Pusher:

يمكن استخدام خدمة Pusher مع Laravel باستخدام حزمة Laravel Echo. ويمكن استخدام هذه الحزمة لإرسال الإشعارات على شكل رسائل تتم إرسالها بواسطة Pusher، ويمكن استخدام هذه الرسائل لتحديث الصفحة وعرض الإشعارات الجديدة.

4- استخدام Pusher Beams:

يمكن استخدام خدمة Pusher Beams مع Laravel باستخدام حزمة Laravel Pusher Beams. ويمكن استخدام هذه الحزمة لإرسال الإشعارات إلى تطبيقات الهواتف المحمولة (iOS و Android)، ويمكن استخدام الـ API المقدمة من Pusher Beams لإرسال الإشعارات.

5- استخدام Amazon SNS:

يمكن استخدام خدمة Amazon SNS مع Laravel باستخدام حزمة Laravel SNS. ويمكن استخدام هذه الحزمة لإرسال الإشعارات إلى أجهزة الهواتف المحمولة (iOS و Android)، ويمكن استخدام الـ API المقدمة من Amazon SNS لإرسال الإشعارات.

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

كما أشار لك Kais، الـ polling هي تقنية تستخدم عادة لتحديث الصفحة بشكل دوري من دون الحاجة لإعادة تحميلها بشكل كامل. بدلاً من ذلك، يتم استخدام الـ polling لإجراء طلبات متكررة للخادم للتحقق من وجود تحديثات جديدة.

من خلال إرسال طلبات HTTP الخفية إلى الخادم باستخدام JavaScript. تتحقق الصفحة بانتظام للحصول على تحديثات جديدة، وإذا كان هناك تحديث جديد، يتم تحميله وعرضه على الصفحة دون الحاجة إلى تحديث الصفحة بالكامل.

في Laravel، يمكنك استخدام تقنية الـ polling باستخدام Laravel Livewire وتحديد فترة زمنية محددة لتحديث مكون معين بشكل دوري.

على سبيل المثال، إذا أردت تحديث عداد لعدد الدعوات الجديدة كل 5 ثوانٍ، يمكنك كتابة الكود التالي:

في الـ view:

<div wire:poll.5s>
    {{ $newInvitationsCount }}
</div>

في الكود السابق، تم استخدام دالة "wire:poll" في Laravel، والتي تعمل على تحديث جزء محدد من الصفحة بشكل دوري وفقًا للوقت المحدد. وبمجرد تحديد الوقت الذي يجب تحديثه، سيتم تحديث جزء من الصفحة بشكل مستمر بينما يواصل المستخدم التفاعل مع الصفحة.

<div wire:poll.750ms> <p>يمكنك وضع أي محتوى تريده هنا، مثل عدد الإشعارات الجديدة، أيقونة الإشعارات، أو أي شيء آخر.</p> <p>مثال: تم تحديث الصفحة في {{ now() }}</p> </div>

يتم تحديث الصفحة كل 750 ميلي ثانية باستخدام "wire:poll.750ms"، والتي تستخدم "Livewire"، وهي أداة في Laravel تتيح تحديث الصفحة بشكل فوري بدون إعادة تحميل الصفحة بالكامل.

في الـ component:

class NotificationsComponent extends Component
{
    public $newInvitationsCount = 0;

    public function render()
    {
        $this->newInvitationsCount = // طلب لجلب عدد الدعوات الجديدة من الخادم
        return view('livewire.notifications-component');
    }
}

هذا الكود سيقوم بتحديث قيمة $newInvitationsCount كل 5 ثوانٍ دون الحاجة إلى إعادة تحميل الصفحة بشكل كامل.

يمكنك تعديل هذا الكود بحسب احتياجاتك ومتطلبات تطبيقك، على سبيل المثال، يمكنك تحديد فترة زمنية مختلفة لتحديث المكون، أو استخدام قيمة مختلفة للـ polling مثل 1000ms بدلاً من 5s.

قم بتنفيذ ميزة إشعارات الدفع في تطبيق Laravel باستخدام WebPush. سوف نستخدم Vanilla Javascript بدون أطر عمل أو مكتبات. Push Notification هو سمة من سمات   Service Workers

Service Workers هو برنامج نصي داخل متصفح الويب يعمل في الخلفية. هناك الكثير من الميزات مثل التخزين المؤقت والمزامنة في الخلفية  الخطوات التالية لتنفيذ المطلوب بشكل مختصر

• قم بتثبيت حزمة laravel-notification-channels/webpush عن طريق الأمر: composer require laravel-notification-channels/webpush1.
• أضف السمة NotificationChannels\WebPush\HasPushSubscriptions إلى نموذج المستخدم الخاص بك1.
• قم بإنشاء مفتاح عام وخاص لـ Webpush باستخدام الأمر: php artisan webpush:vapid1.
• قم بإضافة ملف service-worker.js إلى مجلد public وأضف فيه كود التسجيل لـ Webpush2.
• قم بإنشاء نوع جديد من الإشعارات باستخدام الأمر: php artisan make:notification PushDemo وأضف فيه كود إرسال الإشعارات لـ Webpush2.

للمزبد من التفاصيل يمكنك الإطلاع على الحزمة من هذا الرابط