كيفية تحويل WebApp كـ PWA مع التنبيه الفوري

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

في العالم الحديث ، يتم تحويل معظم تطبيقات الويب إلى PWA (تطبيق الويب التقدمي) لأنه يوفر ميزات مثل الدعم في وضع عدم الاتصال وإشعار الدفع والمزامنة في الخلفية. تجعل ميزات PWA تطبيق الويب الخاص بنا أشبه بتطبيق أصلي وتوفر تجربة مستخدم ثرية.

على سبيل المثال ، قامت شركات كبيرة مثل Twitter و Amazon بتحويل تطبيقات الويب الخاصة بها إلى PWA لمزيد من مشاركة المستخدمين.

ما هو PWA؟

PWA = (تطبيق الويب) + (بعض ميزات التطبيق الأصلي)

PWA هو نفس تطبيق الويب (HTML + CSS + JS). إنه يعمل مثل تطبيق الويب الخاص بك على جميع المتصفحات كما كان يعمل سابقًا. ولكن يمكن أن تحتوي على ميزات أصلية عند تحميل موقع الويب الخاص بك على متصفح حديث. إنه يجعل تطبيق الويب الخاص بك أكثر قوة من ذي قبل ، كما أنه يجعله أكثر قابلية للتوسع لأننا قادرون على الجلب المسبق للأصول وتخزينها مؤقتًا في الواجهة الأمامية ، كما أنه يقلل من الطلبات إلى خادم الواجهة الخلفية.

كيف يختلف PWA عن تطبيق الويب

  • قابل للتثبيت: يمكن تثبيت تطبيق الويب الخاص بك مثل تطبيق أصلي
  • تقدمي: يعمل مثل تطبيق الويب الخاص بك ولكن مع بعض الميزات الأصلية
  • تجربة التطبيق الأصلي: يمكن للمستخدم استخدام تطبيق الويب والتنقل فيه مثل التطبيقات الأصلية بمجرد تثبيته.
  • سهولة الوصول إليها: على عكس تطبيق الويب الخاص بنا ، ليست هناك حاجة لمستخدمينا لكتابة عناوين الويب في كل مرة يزورونها. بمجرد التثبيت ، يمكن فتحه بنقرة واحدة.
  • التخزين المؤقت للتطبيق: قبل PWA ، كانت آلية التخزين المؤقت الوحيدة التي طبقناها تطبيق الويب لدينا هي ، باستخدام ذاكرة التخزين المؤقت HTTP التي لا تتوفر إلا للمتصفح. ولكن باستخدام PWA ، يمكننا تخزين الأشياء مؤقتًا باستخدام التعليمات البرمجية من جانب العميل نفسها غير المتوفرة في تطبيق الويب.
  • نشر متجر (App / Play): يمكن نشر PWA في متجر Google Play ومتجر تطبيقات IOS.

سيؤدي تحويل تطبيقك إلى PWA إلى جعله أكثر قوة.

لماذا يجب أن تأخذ الأعمال في الاعتبار PWA

بينما يصل إلينا معظم عملائنا ويطلبون تطوير حل تطبيق الويب أولاً ثم يطلبون تطبيقات Android و iOS. كل ما سنفعله هو بناء نفس الوظيفة في تطبيق الويب لتطبيق Android / IOS بواسطة فريق منفصل يستغرق المزيد من تكلفة التطوير والمزيد من الوقت للتسويق.

لكن لدى بعض العملاء ميزانية محدودة أو قد يعتقد بعض العملاء أن وقت التسويق أكثر أهمية لمنتجهم.

يمكن تلبية معظم متطلبات العميل من خلال ميزات PWA نفسها. بالنسبة لهم ، نقترح PWA فقط ونمنحهم فكرة لتحويل PWA الخاص بهم كتطبيق Android باستخدام TWA إذا كانوا يريدون النشر في Playstore.

إذا كانت متطلباتك تحتاج حقًا إلى ميزات التطبيق الأصلية التي لا يمكن أن تفي بها PWA. يمكن للعملاء الذهاب وتطوير كلا التطبيقين كما يحلو لهم. لكن حتى في هذا السيناريو. يمكنهم نشر PWA في متجر Play حتى اكتمال تطوير Android.

مثال: Titan Eyeplus

في البداية ، قاموا بتطوير تطبيق PWA ونشره في متجر الألعاب باستخدام TWA (نشاط الويب الموثوق به). بمجرد الانتهاء من تطوير تطبيقات Android الخاصة بهم. قاموا بنشر تطبيق Android الحقيقي الخاص بهم في متجر الألعاب. لقد حققوا كلاً من الوقت اللازم للتسويق باستخدام PWA وتكلفة التطوير.

ميزات PWA

يمنح PWA تطبيقات الويب الخاصة بنا ميزات تشبه التطبيقات الأصلية.

الميزات الرئيسية هي:

  • قابل للتثبيت: تطبيق ويب مثبت مثل تطبيق أصلي.
  • التخزين المؤقت: التخزين المؤقت للتطبيق ممكن ، مما يمنح تطبيقنا دعمًا في وضع عدم الاتصال.
  • إشعار الدفع: يمكن إرسال إشعار الدفع من خادمنا لإشراك مستخدمينا على موقعنا.
  • Geofencing: يمكن إخطار التطبيق من خلال حدث كلما تغير موقع الجهاز.
  • طلب الدفع: قم بتمكين الدفع في التطبيق الخاص بك مع تجربة مستخدم رائعة مثل التطبيق المحلي.
  كيفية تغيير المعلومات في شريط حالة Outlook

والعديد من الميزات القادمة في المستقبل.

الميزات الأخرى هي:

  • الاختصارات: عناوين URL التي يمكن الوصول إليها بسرعة والتي تمت إضافتها في ملف البيان.
  • Web Share API: اسمح لتطبيقك بتلقي البيانات المشتركة من التطبيقات الأخرى.
  • Badge API: لإظهار عدد الإشعارات في PWA المثبت لديك.
  • واجهة برمجة تطبيقات مزامنة الخلفية الدورية: تحفظ بيانات المستخدم حتى يتم توصيلها بالشبكة.
  • منتقي جهات الاتصال: يُستخدم لاختيار جهات الاتصال من هاتف المستخدم المحمول.
  • منتقي الملفات: يستخدم للوصول إلى الملف على النظام المحلي / الهاتف المحمول

ميزة PWA على التطبيق الأصلي

يعمل التطبيق الأصلي بشكل أفضل من PWA ولديه ميزات أكثر من PWA. ولكن مع ذلك ، فإنه يتمتع ببعض المزايا مقارنة بالتطبيق المحلي.

  • يعمل PWA على منصات متعددة مثل Android و IOS و Desktop.
  • يقلل من تكلفة التطوير الخاصة بك.
  • سهولة نشر الميزات مقارنة بالتطبيق الأصلي.
  • يمكن اكتشافه بسهولة لأن PWA (موقع الويب) صديق لكبار المسئولين الاقتصاديين
  • آمن لأنه يعمل فقط على HTTPS

عيوب تطبيق PWA على التطبيق المحلي

  • تتوفر وظائف محدودة مقارنة بالتطبيق المحلي.
  • ميزات PWA غير مضمونة لدعم جميع الأجهزة.
  • العلامة التجارية لـ PWA منخفضة لأنها غير متوفرة في متجر التطبيقات أو متجر الألعاب.

يمكنك نشر PWA الخاص بك كتطبيق Android في متجر play باستخدام android نشاط الويب الموثوق (TWA). سوف يساعد علامتك التجارية.

الأشياء اللازمة لتحويل تطبيق الويب إلى PWA

للتحويل ، أي تطبيق ويب أو موقع ويب إلى PWA.

  • عامل الخدمة: جوهر أي تطبيق PWA للتخزين المؤقت ، دفع الإشعارات ، وكيل لطلباتنا.
  • ملف البيان: يحتوي على تفاصيل حول تطبيق الويب الخاص بك. يتم استخدامه لتنزيل تطبيقنا مثل التطبيق الأصلي على الشاشة الرئيسية.
  • شعار التطبيق: صورة عالية الجودة 512 × 512 بكسل لرمز التطبيق الخاص بك. مطلوب شعار التطبيق لـ PWA على الشاشة الرئيسية ، وشاشة البداية ، وما إلى ذلك ، لذا يتعين علينا إنشاء مجموعة من الصور بنسبة 1: 1 لتطبيقنا باستخدام أي أدوات.
  • تصميم سريع الاستجابة: يجب أن يكون تطبيق الويب مستجيبًا للعمل على أحجام شاشات مختلفة.

ما هو عامل الخدمة:

عامل الخدمة (البرنامج النصي من جانب العميل) هو وكيل بين تطبيق الويب الخاص بك والجانب الخارجي ، ويقدم إشعارات الدفع لتطبيق الويب الخاص بنا ويدعم التخزين المؤقت.

عامل الخدمة يعمل بشكل مستقل عن جافا سكريبت الرئيسي. لذلك لا يمكن الوصول إلى DOM API. يمكنه الوصول فقط IndexedDB APIو جلب APIو واجهة برمجة تطبيقات التخزين المؤقت. ولكن يمكنه التواصل مع الموضوع الرئيسي برسالة.

الخدمة المقدمة من قبل عامل الخدمة:

  • اعتراض طلبات HTTP من المجال الأصلي الخاص بك.
  • تلقي إشعار دفع من الخادم الخاص بك.
  • توافر تطبيقنا دون اتصال بالإنترنت

يتحكم عامل الخدمة في تطبيقك ويمكنه معالجة طلباتك ، لكنه يعمل بشكل مستقل. لهذا السبب ، يجب تمكين المجال الأصلي باستخدام HTTPS لتجنب هجوم man-in-the-middle.

ما هو ملف المانيفست

يحتوي ملف البيان (manifest.json) على تفاصيل حول تطبيق PWA لإخبار المتصفح.

  • الاسم: اسم التطبيق
  • short_name: الاسم المختصر لتطبيقنا. إذا قدمت
  • مع كل من اسم الخاصية والاسم المختصر ، سيأخذ المتصفح اسمًا قصيرًا.
  • الوصف: وصف لوصف طلبنا.
  • start_url: لتحديد الصفحة الرئيسية للتطبيق عند إطلاق PWA.
  • الرموز: مجموعة صور لـ PWA للشاشة الرئيسية ، إلخ.
  • background_color: لتعيين لون خلفية شاشة البداية في تطبيق PWA الخاص بنا.
  • عرض: لتخصيص واجهة مستخدم متصفحنا لتظهر في تطبيق PWA الخاص بنا.
  • theme_color: لون سمة تطبيق PWA.
  • النطاق: نطاق URL لتطبيقنا الذي يجب مراعاته لـ PWA. افتراضات إلى موقع ملف البيان الموجود.
  • الاختصارات: روابط سريعة لتطبيق PWA الخاص بنا.

تحويل تطبيق الويب إلى PWA

لغرض العرض ، قمت بإنشاء بنية مجلد موقع admingate.org مع ملفات ثابتة.

  • index.html – الصفحة الرئيسية
  • مقالات/
    • index.html – صفحة المقالات
  • المؤلفون/
    • index.html – صفحة المؤلفين
  • أدوات/
    • index.html – صفحة الأدوات
  • صفقات/
    • index.html – صفحة الصفقات

إذا كان لديك بالفعل أي موقع ويب أو تطبيق ويب ، فحاول تحويله إلى PWA باتباع الخطوات التالية.

إنشاء الصور المطلوبة لـ PWA

أولاً ، خذ شعار تطبيقك واقطعه بحجم نسبة 1: 1 في 5 أحجام مختلفة. لقد استخدمت https://tools.crawlink.com/tools/pwa-icon-generator/ للحصول على أحجام صور مختلفة بسرعة. لذلك يمكنك استخدامه أيضًا.

قم بإنشاء ملف بيان

ثانيًا ، قم بإنشاء ملف manifest.json لتطبيق الويب الخاص بك مع تفاصيل التطبيق الخاص بك. بالنسبة للعرض التوضيحي ، قمت بإنشاء ملف بيان لموقع admingate.org.

{
	"name": "admingate.org",
	"short_name": "admingate.org",
	"description": "admingate.org produces high-quality technology & finance articles, makes tools, and APIs to help businesses and people grow.",
	"start_url": "/",
	"icons": [{
		"src": "assets/icon/icon-128x128.png",
		"sizes": "128x128",
		"type": "image/png"
	}, {
		"src": "assets/icon/icon-152x152.png",
		"sizes": "152x152",
		"type": "image/png"
	}, {
		"src": "assets/icon/icon-192x192.png",
		"sizes": "192x192",
		"type": "image/png"
	}, {
		"src": "assets/icon/icon-384x384.png",
		"sizes": "384x384",
		"type": "image/png"
	}, {
		"src": "assets/icon/icon-512x512.png",
		"sizes": "512x512",
		"type": "image/png"
	}],
	"background_color": "#EDF2F4",
	"display": "standalone",
	"theme_color": "#B20422",
	"scope": "/",
	"shortcuts": [{
			"name": "Articles",
			"short_name": "Articles",
			"description": "1595 articles on Security, Sysadmin, Digital Marketing, Cloud Computing, Development, and many other topics.",
			"url": "https://geekflare.com/articles",
			"icons": [{
				"src": "/assets/icon/icon-152x152.png",
				"sizes": "152x152"
			}]
		},
		{
			"name": "Authors",
			"short_name": "Authors",
			"description": "admingate.org - Authors",
			"url": "/authors",
			"icons": [{
				"src": "/assets/icon/icon-152x152.png",
				"sizes": "152x152"
			}]
		},
		{
			"name": "Tools",
			"short_name": "Tools",
			"description": "admingate.org - Tools",
			"url": "https://admingate.org.com/tools",
			"icons": [{
				"src": "/assets/icon/icon-152x152.png",
				"sizes": "152x152"
			}]
		},
		{
			"name": "Deals",
			"short_name": "Deals",
			"description": "admingate.org - Deals",
			"url": "/deals",
			"icons": [{
				"src": "/assets/icon/icon-152x152.png",
				"sizes": "152x152"
			}]
		}
	]
}

تسجيل عامل الخدمة

قم بإنشاء ملف نصي register-service-worker.js و service-worker.js في المجلد الجذر.

  كيفية إظهار أزرار الإجراءات السريعة على بريدك الإلكتروني في Outlook

الأول ، register-service-worker.js هو ملف جافا سكريبت الذي سيعمل على الخيط الرئيسي الذي يمكنه الوصول إلى واجهة برمجة تطبيقات DOM. لكن service-worker.js عبارة عن برنامج نصي لعامل الخدمة يعمل بشكل مستقل عن السلسلة الرئيسية ، كما أن عمره قصير أيضًا. يتم تشغيله عندما تستدعي الأحداث عمال الخدمة وتعمل حتى تنتهي من العملية.

من خلال التحقق من ملف جافا سكريبت الموضوع الرئيسي ، يمكنك التحقق مما إذا كان عامل الخدمة مسجلاً فيه. إذا لم يكن الأمر كذلك ، يمكنك تسجيل نص عامل الخدمة (service-worker.js).

الصق المقتطف أدناه في register-service-worker.js:

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('/service-worker.js');
    });
}

الصق المقتطف أدناه في service-worker.js

self.addEventListener('install', (event) => { // event when service worker install
    console.log( 'install', event);
    self.skipWaiting();
});

self.addEventListener('activate', (event) => { // event when service worker activated
    console.log('activate', event);
    return self.clients.claim();
});

self.addEventListener('fetch', function(event) { // HTTP request interceptor
    event.respondWith(fetch(event.request)); // send all http request without any cache logic
    /*event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event. request);
        })
    );*/ // cache new request. if already in cache serves with the cache.
});

لم نركز على كيفية تمكين ذاكرة التخزين المؤقت للدعم في وضع عدم الاتصال. نتحدث فقط عن كيفية تحويل تطبيقات الويب إلى PWA.

أضف ملف بيان وبرنامج نصي في علامة الرأس الكاملة لصفحة HTML الخاصة بك.

<link rel="manifest" href="https://admingate.org.com/manifest.json">
<script src="/register-service-worker.js"></script>

قم بتحديث الصفحة بعد إضافتك. الآن يمكنك تثبيت التطبيق الخاص بك كما هو موضح أدناه على كروم المحمول.

على الشاشة الرئيسية ، تتم إضافة التطبيق.

إذا كنت تستخدم WordPress. حاول استخدام البرنامج المساعد الحالي PWA المحول. بالنسبة إلى vueJS أو رد فعل JS ، يمكنك اتباع الطريقة المذكورة أعلاه أو استخدام وحدات PWA npm الحالية لتسريع عملية تطويرك. نظرًا لأن وحدات PWA npm النمطية قد تم تمكينها بالفعل من خلال التخزين المؤقت للدعم دون اتصال بالإنترنت ، وما إلى ذلك.

تفعيل دفع الإعلام

يتم إرسال إشعارات الدفع عبر الويب إلى المتصفح لجعل مستخدمينا يتفاعلون / يتفاعلون مع تطبيقنا في كثير من الأحيان. يمكننا تمكينه باستخدام

  • إعلام API: يتم استخدامه لتكوين كيفية عرض إشعار الدفع الخاص بنا للمستخدم.
  • دفع API: يتم استخدامه لتلقي رسائل التنبيه المرسلة من خادمنا إلى المتصفح.

تتمثل الخطوة الأولى لتمكين دفع الإشعارات في تطبيقنا في التحقق من Notification API والحصول على إذن من المستخدم لإظهار إشعار. لذلك انسخ والصق المقتطف أدناه في register-service-worker.js.

if ('Notification' in window && Notification.permission != 'granted') {
    console.log('Ask user permission')
    Notification.requestPermission(status => {  
        console.log('Status:'+status)
        displayNotification('Notification Enabled');
    });
}


const displayNotification = notificationTitle => {
    console.log('display notification')
    if (Notification.permission == 'granted') {
        navigator.serviceWorker.getRegistration().then(reg => {
            console.log(reg)
            const options = {
                    body: 'Thanks for allowing push notification !',
                    icon:  '/assets/icons/icon-512x512.png',
                    vibrate: [100, 50, 100],
                    data: {
                      dateOfArrival: Date.now(),
                      primaryKey: 0
                    }
                  };
    
            reg.showNotification(notificationTitle, options);
        });
    }
};

إذا سارت الأمور بشكل صحيح. سوف تتلقى إشعارًا من التطبيق.

سيخبرنا “الإعلام” في النافذة أن Notification API مدعومة في ذلك المتصفح. سيعلم Notification.permission أنه قد تم السماح للمستخدم بإظهار الإخطار. إذا سمح المستخدم بتطبيقنا ، فسيتم “منح” القيمة. إذا رفض المستخدم القيمة ، فسيتم “حظرها”.

قم بتمكين Firebase Cloud Messaging وإنشاء اشتراك

الآن الجزء الحقيقي يبدأ. لإرسال الإشعارات من خادمك إلى المستخدم ، نحتاج إلى نقطة نهاية / اشتراك فريد لكل مستخدم. لذلك ، سنستخدم المراسلة السحابية لـ Firebase.

كخطوة أولى ، قم بإنشاء حساب Firebase من خلال زيارة هذا الرابط https://firebase.google.com/ واضغط على ابدأ.

  • أنشئ مشروعًا جديدًا باسم واضغط على متابعة. سأقوم بإنشائه باسم admingate.org.
  • في الخطوة التالية ، يتم تمكين Google Analytics افتراضيًا. يمكنك التبديل إلى أننا لسنا بحاجة إلى ذلك الآن والضغط على متابعة. يمكنك تمكينه لاحقًا في وحدة تحكم Firebase إذا احتجت إلى ذلك.
  • بمجرد إنشاء المشروع ، سيبدو كما يلي.
  • ثم انتقل إلى إعدادات المشروع وانقر فوق المراسلة السحابية وإنشاء مفاتيح.

      11 دروس عامل ميناء جيد للمبتدئين لإتقان

    من الخطوات المذكورة أعلاه ، لديك 3 مفاتيح.

    • مفتاح خادم المشروع
    • مفتاح خاص لشهادات الدفع على الويب
    • شهادات دفع الويب بالمفتاح العام

    الآن قم بلصق المقتطف أدناه في register-service-worker.js:

    const updateSubscriptionOnYourServer = subscription => {
        console.log('Write your ajax code here to save the user subscription in your DB', subscription);
        // write your own ajax request method using fetch, jquery, axios to save the subscription in your server for later use.
    };
    
    const subscribeUser = async () => {
        const swRegistration = await navigator.serviceWorker.getRegistration();
        const applicationServerPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY'; // paste your webpush certificate public key
        const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
        swRegistration.pushManager.subscribe({
          userVisibleOnly: true,
          applicationServerKey
        })
        .then((subscription) => {
            console.log('User is subscribed newly:', subscription);
            updateSubscriptionOnServer(subscription);
        })
        .catch((err) => {
            if (Notification.permission === 'denied') {
              console.warn('Permission for notifications was denied')
            } else {
              console.error('Failed to subscribe the user: ', err)
            }
        });
    };
    const urlB64ToUint8Array = (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;
    };
    
    const checkSubscription = async () => {
        const swRegistration = await navigator.serviceWorker.getRegistration();
        swRegistration.pushManager.getSubscription()
        .then(subscription => {
            if (!!subscription) {
                console.log('User IS Already subscribed.');
                updateSubscriptionOnYourServer(subscription);
            } else {
                console.log('User is NOT subscribed. Subscribe user newly');
                subscribeUser();
            }
        });
    };
    
    checkSubscription();

    الصق المقتطف أدناه في service-worker.js.

    self.addEventListener('push', (event) => {
      const json = JSON.parse(event.data.text())
      console.log('Push Data', event.data.text())
      self.registration.showNotification(json.header, json.options)
    });

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

    ادفع من الواجهة الخلفية لـ node.js

    يمكنك استخدام ال دفع الويب وحدة npm لتسهيل الأمر.

    مثال مقتطف لإرسال إشعار الدفع من خادم nodeJS.

    const webPush = require('web-push');
        // pushSubscription is nothing but subscription that you sent from your front-end to save it in DB
        const pushSubscription = {"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uwMcg","keys":{"auth":"qX6AMD5JWbu41cFWE3Lk8w","p256dh":"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}};
        //your web certificates public-key
        const vapidPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY';
        //your web certificates private-key
        const vapidPrivateKey = 'web-certificate private key';
    
        var payload = JSON.stringify({
          "options": {
            "body": "PWA push notification testing fom backend",
            "badge": "/assets/icon/icon-152x152.png",
            "icon": "/assets/icon/icon-152x152.png",
            "vibrate": [100, 50, 100],
            "data": {
              "id": "458",
            },
            "actions": [{
              "action": "view",
              "title": "View"
            }, {
              "action": "close",
              "title": "Close"
            }]
          },
          "header": "Notification from admingate.org-PWA Demo"
        });
    
        var options = {
          vapidDetails: {
            subject: 'mailto:[email protected]',
            publicKey: vapidPublicKey,
            privateKey: vapidPrivateKey
          },
          TTL: 60
        };
    
        webPush.sendNotification(
          pushSubscription,
          payload,
          options
        ).then(data => {
          return res.json({status : true, message : 'Notification sent'});
        }).catch(err => {
          return res.json({status : false, message : err });
        });

    سيرسل الرمز أعلاه إشعارًا فوريًا للاشتراك. سيتم تشغيل حدث الدفع في عامل الخدمة.

    ادفع من PHP Backend

    بالنسبة لخلفية PHP ، يمكنك استخدام امتداد web-push-php حزمة الملحن. تحقق من رمز المثال لإرسال إشعارات الدفع أدناه.

    <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
    
    require __DIR__.'/../vendor/autoload.php';
    use MinishlinkWebPushWebPush;
    use MinishlinkWebPushSubscription;
    
    // subscription stored in DB
    $subsrciptionJson = '{"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uwMcg","keys":{"auth":"qX6AMD5JWbu41cFWE3Lk8w","p256dh":"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}}';
    $payloadData = array (
    'options' =>  array (
                    'body' => 'PWA push notification testing fom backend',
                    'badge' => '/assets/icon/icon-152x152.png',
                    'icon' => '/assets/icon/icon-152x152.png',
                    'vibrate' => 
                    array (
                      0 => 100,
                      1 => 50,
                      2 => 100,
                    ),
                    'data' => 
                    array (
                      'id' => '458',
                    ),
                    'actions' => 
                    array (
                      0 => 
                      array (
                        'action' => 'view',
                        'title' => 'View',
                      ),
                      1 => 
                      array (
                        'action' => 'close',
                        'title' => 'Close',
                      ),
                    ),
    ),
    'header' => 'Notification from admingate.org-PWA Demo',
    );
    
    // auth
    $auth = [
        'GCM' => 'your project private-key', // deprecated and optional, it's here only for compatibility reasons
        'VAPID' => [
            'subject' => 'mailto:[email protected]', // can be a mailto: or your website address
            'publicKey' => 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY', // (recommended) uncompressed public key P-256 encoded in Base64-URL
            'privateKey' => 'your web-certificate private-key', // (recommended) in fact the secret multiplier of the private key encoded in Base64-URL
        ],
    ];
    
    $webPush = new WebPush($auth);
    
    $subsrciptionData = json_decode($subsrciptionJson,true);
    
    
    // webpush 6.0
    $webPush->sendOneNotification(
      Subscription::create($subsrciptionData),
      json_encode($payloadData) // optional (defaults null)
    );

    استنتاج

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