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

نشرت: 2022-03-20

في هذه المقالة ، نرى كيفية تحويل تطبيق ويب أو موقع ويب إلى 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 في متجر الألعاب حتى اكتمال تطوير Android.

مثال: Titan Eyeplus

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

ميزات PWA

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

عامل الخدمة يعمل بشكل مستقل عن جافا سكريبت الرئيسي. لذلك لا يمكن الوصول إلى DOM API. يمكنه فقط الوصول إلى IndexedDB API و Fetch API و Cache Storage 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

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

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 لتطبيق الويب الخاص بك مع تفاصيل التطبيق الخاص بك. بالنسبة للعرض التوضيحي ، قمت بإنشاء ملف بيان لموقع Geekflare على الويب.

 {
	"الاسم": "Geekflare"،
	"الاسم المختصر": "Geekflare"،
	"description": "تنتج Geekflare مقالات ذات جودة عالية حول التكنولوجيا والتمويل ، وتصنع الأدوات وواجهات برمجة التطبيقات لمساعدة الشركات والأفراد على النمو." ،
	"start_url": "/"،
	"الرموز": [{
		"src": "Assass / icon / icon-128x128.png" ،
		"الأحجام": "128 × 128"،
		"النوع": "صورة / png"
	} ، {
		"src": "Assass / icon / icon-152x152.png" ،
		"الأحجام": "152 × 152"،
		"النوع": "صورة / png"
	} ، {
		"src": "Assass / icon / icon-192x192.png" ،
		"الأحجام": "192x192"،
		"النوع": "صورة / png"
	} ، {
		"src": "Assass / icon / icon-384x384.png" ،
		"الأحجام": "384 × 384" ،
		"النوع": "صورة / png"
	} ، {
		"src": "Assass / icon / icon-512x512.png" ،
		"الأحجام": "512 × 512"،
		"النوع": "صورة / png"
	}] ،
	"background_color": "# EDF2F4"،
	"عرض": "مستقل"،
	"theme_color": "# B20422"،
	"مجال": "/"،
	"الاختصارات": [{
			"الاسم": "المقالات"،
			"الاسم المختصر": "المقالات"،
			"description": "1595 مقالة حول الأمان ونظام إدارة النظام والتسويق الرقمي والحوسبة السحابية والتطوير والعديد من الموضوعات الأخرى." ،
			"url": "/ articles"،
			"الرموز": [{
				"src": "/assets/icon/icon-152x152.png" ،
				"الأحجام": "152 × 152"
			}]
		} ،
		{
			"الاسم": "المؤلفون"،
			"الاسم المختصر": "المؤلفون"،
			"الوصف": "Geekflare - المؤلفون"،
			"url": "/ المؤلفون"،
			"الرموز": [{
				"src": "/assets/icon/icon-152x152.png" ،
				"الأحجام": "152 × 152"
			}]
		} ،
		{
			"الاسم": "أدوات"،
			"الاسم المختصر": "الأدوات"،
			"الوصف": "Geekflare - أدوات"،
			"url": "/ أدوات" ،
			"الرموز": [{
				"src": "/assets/icon/icon-152x152.png" ،
				"الأحجام": "152 × 152"
			}]
		} ،
		{
			"الاسم": "العروض"،
			"الاسم المختصر": "العروض"،
			"الوصف": "Geekflare - Deals"،
			"url": "/ Deals"،
			"الرموز": [{
				"src": "/assets/icon/icon-152x152.png" ،
				"الأحجام": "152 × 152"
			}]
		}
	]
}

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

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

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

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

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

 إذا ('serviceWorker' في الملاح) {
    window.addEventListener ('load'، function () {
        navigator.serviceWorker.register ('/ service-worker.js') ؛
    }) ؛
}

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

 self.addEventListener ('تثبيت'، (حدث) => {// حدث عند تثبيت عامل الخدمة
    console.log ('تثبيت' ، حدث) ؛
    self.skipWaiting () ،
}) ؛

self.addEventListener ('تفعيل'، (حدث) => {// حدث عند تنشيط عامل الخدمة
    console.log ('تفعيل' ، حدث) ؛
    إرجاع self.clients.claim () ؛
}) ؛

self.addEventListener ('fetch'، function (event) {// HTTP request interceptor
    event.respondWith (fetch (event.request)) ؛ // إرسال كل طلبات http دون أي منطق ذاكرة التخزين المؤقت
    /*event.respondWith (
        caches.match (event.request). ثم (الوظيفة (الاستجابة) {
            الرد || جلب (حدث. طلب) ؛
        })
    ) ؛ * / // طلب جديد مخبأ. إذا كان بالفعل في ذاكرة التخزين المؤقت يخدم مع ذاكرة التخزين المؤقت.
}) ؛

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

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

 <link rel = "manifest" href = "/ manifest.json">
<script src = "/ register-service-worker.js"> </script>

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

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

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

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

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

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

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

 if ('Notification' in window && Notification.permission! = 'منح') {
    console.log ('اطلب إذن المستخدم')
    Notification.requestPermission (الحالة => {  
        console.log ('الحالة:' + الحالة)
        displayNotification ('Notification Enabled') ؛
    }) ؛
}


const displayNotification =ificationTitle => {
    console.log ("عرض الإخطار")
    إذا (Notification.permission == 'ممنوح') {
        navigator.serviceWorker.getRegistration (). ثم (reg => {
            console.log (ريج)
            خيارات const = {
                    body: "شكرًا للسماح بإشعار الدفع!" ،
                    icon: "/assets/icons/icon-512x512.png" ،
                    الاهتزاز: [100 ، 50 ، 100] ،
                    بيانات: {
                      dateOfArrival: Date.now () ،
                      المفتاح الأساسي: 0
                    }
                  } ؛
    
            reg.showNotification (عنوان الإعلام ، الخيارات) ؛
        }) ؛
    }
} ؛

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

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

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

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

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

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

ثم انتقل إلى إعدادات المشروع وانقر فوق المراسلة السحابية وإنشاء مفاتيح.

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

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

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

 const updateSubscriptionOnYourServer = subscription => {
    console.log ('اكتب كود ajax الخاص بك هنا لحفظ اشتراك المستخدم في DB الخاص بك ، اشتراك) ؛
    // اكتب طريقة طلب ajax الخاصة بك باستخدام fetch و jquery و axios لحفظ الاشتراك في الخادم الخاص بك لاستخدامه لاحقًا.
} ؛

const SubscribeUser = async () => {
    const swRegistration = wait navigator.serviceWorker.getRegistration () ،
    const applicationServerPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY' ؛ // الصق المفتاح العام لشهادة webpush
    const applicationServerKey = urlB64ToUint8Array (applicationServerPublicKey) ؛
    swRegistration.pushManager.subscribe ({
      userVisibleOnly: صحيح ،
      applicationServerKey
    })
    ثم ((اشتراك) => {
        console.log ('تم اشتراك المستخدم حديثًا:' ، اشتراك) ؛
        updateSubscriptionOnServer (اشتراك) ؛
    })
    .catch ((يخطئ) => {
        إذا كان (Notification.permission === 'مرفوض') {
          console.warn ("تم رفض الإذن بالإشعارات")
        } آخر {
          console.error ("فشل اشتراك المستخدم:" ، يخطئ)
        }
    }) ؛
} ؛
const urlB64ToUint8Array = (base64String) => {
    حشوة ثابتة = '='. كرر ((4 - base64String.length٪ 4)٪ 4)
    const base64 = (base64String + padding)
        .replace (/ \ - / g، "+")
        .replace (/ _ / g، '/')

    const rawData = window.atob (base64) ؛
    const outputArray = new Uint8Array (rawData.length) ؛

    لـ (let i = 0؛ i <rawData.length؛ ++ i) {
        outputArray [i] = rawData.charCodeAt (i) ،
    }
    عودة الإخراج
} ؛

const checkSubscription = async () => {
    const swRegistration = wait navigator.serviceWorker.getRegistration () ،
    swRegistration.pushManager.getSubscription ()
    .then (الاشتراك => {
        إذا (!! اشتراك) {
            console.log ('المستخدم مشترك بالفعل.') ؛
            updateSubscriptionOnYourServer (اشتراك) ؛
        } آخر {
            console.log ("المستخدم غير مشترك. اشتراك المستخدم حديثًا") ؛
            SubscribeUser () ،
        }
    }) ؛
} ؛

checkSubscription () ؛

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

 self.addEventListener ('push'، (الحدث) => {
  const json = JSON.parse (event.data.text ())
  console.log ('Push Data'، event.data.text ())
  self.registration.showNotification (json.header، json.options)
}) ؛

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

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

يمكنك استخدام وحدة web-push npm لتسهيل الأمر.

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

 const webPush = تتطلب ("دفع الويب") ؛
    // pushSubscription ليس سوى اشتراك أرسلته من الواجهة الأمامية لحفظه في قاعدة البيانات
    الثابت : "BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}} ؛
    // شهادات الويب الخاصة بك المفتاح العام
    const vapidPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY' ؛
    // مفتاح خاص لشهادات الويب الخاصة بك
    const vapidPrivateKey = 'المفتاح الخاص لشهادة الويب' ؛

    var payload = JSON.stringify ({
      "والخيارات": {
        "body": "اختبار دفع الإخطار PWA للخلفية" ،
        "شارة": "/assets/icon/icon-152x152.png" ،
        "icon": "/assets/icon/icon-152x152.png" ،
        "اهتزاز": [100 ، 50 ، 100] ،
        "بيانات": {
          "المعرف": "458"،
        } ،
        "أجراءات": [{
          "الإجراء": "عرض"،
          "العنوان": "عرض"
        } ، {
          "الإجراء": "إغلاق"،
          "العنوان": "إغلاق"
        }]
      } ،
      "header": "Notification from Geekflare-PWA Demo"
    }) ؛

    خيارات var = {
      التفاصيل: {
        الموضوع: "mailto: [email protected]" ،
        المفتاح العام: vapidPublicKey ،
        مفتاح خاص: vapidPrivateKey
      } ،
      TTL: 60
    } ؛

    webPush.sendNotification (
      دفع
      الحمولة ،
      والخيارات
    ) ثم (data => {
      return res.json ({status: true، message: 'Notification sent'}) ؛
    }). catch (يخطئ => {
      return res.json ({status: false، message: err}) ؛
    }) ؛

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

ادفع من PHP Backend

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

 <؟ php if (! المعرفة ('BASEPATH')) خروج ('غير مسموح بالوصول المباشر للبرنامج النصي')؛

تتطلب __DIR __. '/ .. / vendor / autoload.php'؛
استخدم Minishlink \ WebPush \ WebPush ؛
استخدام Minishlink \ WebPush \ Subscription ؛

// الاشتراك المخزن في DB
$ subsrciptionJson = '{"endpoint": "https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj" ":" BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y "} '؛
بيانات الحمولة بالدولار = مصفوفة (
"خيارات" => مجموعة (
                'body' => 'اختبار إخطار الدفع PWA من الواجهة الخلفية' ،
                'شارة' => '/assets/icon/icon-152x152.png' ،
                'icon' => '/assets/icon/icon-152x152.png' ،
                "تهتز" => 
                مجموعة مصفوفة (
                  0 => 100 ،
                  1 => 50 ،
                  2 => 100 ،
                ) ،
                "البيانات" => 
                مجموعة مصفوفة (
                  "معرف" => "458" ،
                ) ،
                'الإجراءات' => 
                مجموعة مصفوفة (
                  0 => 
                  مجموعة مصفوفة (
                    "الإجراء" => "عرض" ،
                    "العنوان" => "عرض" ،
                  ) ،
                  1 => 
                  مجموعة مصفوفة (
                    "عمل" => "إغلاق" ،
                    "العنوان" => "إغلاق" ،
                  ) ،
                ) ،
) ،
'header' => 'إعلام من Geekflare-PWA Demo' ،
) ؛

// المصادقة
$ المصادقة = [
    "GCM" => "المفتاح الخاص لمشروعك" ، // مهمل واختياري ، إنه هنا فقط لأسباب التوافق
    "VAPID" => [
        'subject' => 'mailto: [البريد الإلكتروني محمي]' ، // يمكن أن يكون mailto: أو عنوان موقع الويب الخاص بك
        'publicKey' => 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY' ، // (مستحسن) 64-غير مضغوط في مفتاح عام P.
        'privateKey' => 'المفتاح الخاص لشهادة الويب' ، // (موصى به) في الواقع المضاعف السري للمفتاح الخاص المشفر في Base64-URL
    ] ،
] ؛

$ webPush = WebPush الجديد ($ auth) ؛

$ SubsrciptionData = json_decode ($ subsrciptionJson، true)؛


// webpush 6.0
$ webPush-> sendOneNotification (
  الاشتراك :: إنشاء ($ subsrciptionData) ،
  json_encode ($ payloadData) // اختياري (القيم الافتراضية خالية)
) ؛

استنتاج

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