Looking for a simple way to add PWA push notifications?
Progressive Web Apps (PWAs) are apps that work on any device. But there’s always some conflict with sending web push notifications. Usually, the biggest problem is the delivery rates. You can add web push to your PWA in many ways. But how do you send web push notifications that actually get delivered from your PWA?
Don’t worry! In this article, we’re going to show you step-by-step how you can send PWA push notifications with reliable delivery rates in less than 10 minutes.
دعنا نتعمق.
TL;DR — What is PWA push? Progressive Web App (PWA) push notifications are standard web push messages delivered through a PWA’s registered service worker, allowing apps installed from the web to receive push messages even when the web page is closed.
Send PWA Push Notifications Today!
تعد إشعارات الدفع أداة تسويقية فعالة للغاية ومنخفضة التكلفة لمساعدتك على زيادة حركة المرور المتكررة والمشاركة والمبيعات تلقائيًا.
How to Install PWA Push Notifications
Adding push notifications to a Progressive Web App is quite simple. Just follow the steps in this article. If you follow every step, by the end of this article, you should be able to send push notifications like this one:
- Register a service worker at the site root that combines PWA logic and push handling.
- Install PushEngage script and copy installation code into
<head>. - Configure the opt-in modal and create a campaign in the PushEngage dashboard.
The main challenge is that all web push notification software uses a Javascript file called service_worker.js. The service worker helps you collect push notification subscribers through popup modals. But all PWAs already have a service worker file that serves a different purpose. And at a time, your PWA can only use one service worker.
In simple words, web push services confuse your PWA. So, sometimes it will collect push notification subscribers and sometimes, it won’t. Sometimes you can send notifications and sometimes you can’t. You might even end up sending push messages to your entire subscriber list and have it delivered only to a few subscribers.
We recommend using PushEngage to send PWA push notifications. PushEngage is the #1 push notification software in the world. So, you know that your campaigns are in safe hands.
Of course, PWA builders like Mendix come with their own push notification system. But what if you want to migrate to some other push notification service? What if you want more flexibility and control over your push notification campaigns? What’s more is that these services typically give you an API to create push campaigns. But with PushEngage, you get an easy to use dashboard from which you can create, schedule, send, and manage push campaigns.
ونعم، يمكنك استخدام Firebase Cloud Messaging (FCM) لإرسال إشعارات الدفع لتطبيقات Android. ولكن مع PushEngage، يمكنك إرسال إشعارات الدفع لتطبيقات Android والويب، وإشعارات الدفع لتطبيقات iOS و iPadOS على الويب والتطبيقات، وإشعارات الدفع للمتصفح.
أفضل جزء؟ يمكنك حتى إرسال إشعارات دفع التجارة الإلكترونية القوية ببضع نقرات.
| حقيقة | قيمة |
|---|---|
| آلية التسليم الأساسية | عامل الخدمة (اشتراك الدفع) |
| وقت الإعداد النموذجي | ~10 دقائق (أساسي) |
| متطلب شائع | ملف service_worker.js في جذر النطاق + manifest.json |
| يعمل على | معظم متصفحات سطح المكتب و Android (يختلف حسب النظام الأساسي) |
لنبدأ.
الخطوة #1: إعداد حساب PushEngage الخاص بك
توجه إلى الصفحة الرئيسية لـ PushEngage وانقر على زر البدء:
يمكنك تجربة PushEngage مجانًا. إذا كنت تدير مدونة صغيرة تحتاج إلى زيارات متكررة وتفاعل، فهذا جيد بما فيه الكفاية على الأرجح. ولكن إذا كنت جادًا بشأن المبيعات، فيجب عليك الحصول على حزمة Enterprise وفتح الحملات الآلية.
بمجرد التسجيل في حساب PushEngage الخاص بك، توجه إلى لوحة تحكم PushEngage الخاصة بك وانتقل إلى إعدادات الموقع » تفاصيل الموقع:
يمكنك تعيين شعارك واسم موقعك وعنوان URL لموقعك هنا. من المهم جدًا ترتيب هذه الأمور الآن حتى تتمكن من اختبار الإعداد بالكامل لاحقًا.
الخطوة #2: الحصول على رمز التثبيت من PushEngage
لتثبيت إشعارات الدفع، ستحتاج إلى الحصول على رمز التثبيت. في شاشة إعدادات الموقع، قم بالتمرير لأسفل وانقر فوق الزر انقر هنا للحصول على تعليمات الإعداد:
ثم، انقر فوق علامة التبويب أي موقع:
يمكنك استخدام كود Javascript لبدء إرسال إشعارات الدفع.
Step #3: Add the Service Worker Code For PWA Push Notifications
الجزء الأكثر صعوبة في العملية هنا أخيرًا. في لوحة تحكم PushEngage ضمن تعليمات الإعداد، سترى أيضًا خيارًا لتنزيل ملف عامل الخدمة.
هام: يمكن لتطبيق الويب التقدمي (PWA) أن يكون له نطاق عامل خدمة نشط واحد فقط في كل مرة - قم بدمج كود الدفع في عامل الخدمة الحالي لديك. بشكل افتراضي، لا يتطلب تطبيق الويب التقدمي (PWA) ملف عامل خدمة. كل ما تحتاجه لتحويل أي موقع إلى تطبيق ويب تقدمي هو ملف بيان. لذا، إذا كان تطبيق الويب التقدمي (PWA) الخاص بك لا يحتوي على ملف عامل خدمة، فيمكنك ببساطة إضافة عامل خدمة PushEngage إلى الدليل الجذر لموقعك أو تطبيق الويب الخاص بك.
ولكن إذا كان تطبيق الويب التقدمي (PWA) الخاص بك يحتوي بالفعل على عامل خدمة، فلا تقم بتحميل ملف عامل خدمة إشعارات الدفع الخاص بـ PushEngage مباشرة كما هو. افتح عامل خدمة PushEngage في محرر نصوص مثل Notepad وانسخ الكود الموجود في ملف عامل خدمة PushEngage. ثم، ابحث عن ملف عامل الخدمة لتطبيق الويب التقدمي (PWA) الخاص بك وأضف ببساطة كود عامل خدمة PushEngage إلى الملف.
إذا أهملت هذه الخطوة، فلن تتمكن من جمع مشتركين في إشعارات الدفع.
الخطوة #4: تكوين موافقة PushEngage
الآن، عد إلى لوحة تحكم PushEngage الخاصة بك. انتقل إلى التصميم » نوافذ منبثقة وحدد الاشتراك الذي تختاره:
الفكرة هنا هي منح زوارك سببًا وجيهًا للاشتراك. إذا كنت بحاجة إلى بعض المساعدة في ذلك، فراجع مقالتنا حول كيفية إنشاء خيار اشتراك مخصص للإشعارات الفورية.
وإذا كنت ترغب في الحصول على بعض القوالب للبدء، يجب عليك الاطلاع على هذا المقال حول نماذج الاشتراك في الإشعارات الفورية عالية التحويل.
الخطوة #5: إنشاء حملتك الأولى
الآن بعد أن أصبح تطبيق الويب التقدمي (PWA) الخاص بك قادرًا على إرسال إشعارات الدفع، يجب عليك إنشاء حملة فعلية.
تساعد حملة سلة التسوق المهجورة في تحقيق إيرادات إضافية عن طريق تحويل السلات المهجورة. إنها مجرد تذكير يبيع الكثير من المنتجات تلقائيًا. لذا، فهي حملة رائعة لدعم أي صفحة هبوط تحقق مبيعات مباشرة.
ما عليك سوى التوجه إلى لوحة تحكم PushEngage الخاصة بك وانتقل إلى الحملات » الحملات المشغلة » إنشاء حملة مشغلة جديدة:
ثم، حدد قالب حملة سلة التسوق المهجورة:
إذا كنت جديدًا في إنشاء حملات تسويق آلية، يمكنك ببساطة متابعة مقالتنا حول كيفية إعداد حملة إشعارات دفع لسلة التسوق المهجورة. اتبع كل خطوة، ويمكنك إعداد إشعارات دفع مثل هذه:
فقط في حال كنت تتساءل، لا تحتاج إلى أن تكون علامة تجارية مشهورة لكي تكون حملات إشعارات الدفع الخاصة بك فعالة. في الواقع، تم بناء PushEngage لمساعدة الشركات الصغيرة على النمو باستخدام إشعارات الدفع.
ولكن قبل أن تبدأ في تسويق موقعك، يجب عليك إصلاح أي مشكلات في عملية اشتراك إشعارات الدفع الخاصة بك. تحقق من هذه المقالة حول اختبار إشعارات الدفع الخاصة بك. إذا كان كل شيء يعمل بشكل مثالي، فقد انتهيت!
أسئلة متكررة
س: هل يتطلب دفع PWA عامل خدمة؟
ج: نعم. يتم تسليم رسائل دفع PWA بواسطة عامل الخدمة المسجل الذي يجب أن يتضمن معالجة حدث الدفع.
س: هل يمكنني إرسال دفع PWA على iOS؟
ج: دعم iOS لدفع الويب المستند إلى عامل الخدمة محدود؛ تدعم متصفحات Android وسطح المكتب دفع PWA على نطاق واسع. (إذا كان لديك حالة دقيقة لنظام iOS، فاستبدلها ببيان موجز حالي وقم بالاستشهاد.)
س: ما هو الخطأ الأكثر شيوعًا في التكامل؟
ج: تحميل عامل خدمة دفع منفصل إلى الجذر دون دمجه مع عامل الخدمة الحالي لتطبيق الويب التقدمي (PWA) - مما يؤدي إلى تعارضات وفقدان الاشتراكات.
What To Do After Adding PWA Push Notifications?
هذا كل شيء لهذا اليوم أيها الأصدقاء!
يمكنك الآن إرسال إشعارات دفع PWA. بحلول هذا الوقت، تكون قد أنشأت أيضًا حملة إشعارات دفع ويب قوية لتعزيز نموك. كل ذلك، في أقل من 10 دقائق!
تحقق من كيفية إنشاء حملات إشعارات دفع آلية أخرى أيضًا. معظم حملات الدفع بسيطة وفعالة. لذا، نوصي بإعداد حملات متعددة لموقعك. إليك بعض الحملات الرائعة للبدء بها:
- كيفية إرسال إشعارات دفع RSS تلقائيًا
- كيفية إعداد إشعارات دفع التخلي عن سلة التسوق باستخدام GTM
- كيفية جدولة إشعارات الدفع بالطريقة السهلة [دليل 5 دقائق]
وإذا لم تكن قد فعلت ذلك بالفعل، فابدأ باستخدام PushEngage. PushEngage هو البرنامج رقم 1 للإشعارات الفورية في العالم. لذا، فإن حملاتك في أيد أمينة.
