كيفية دمج دفع الإخطارات في PWA الخاص بك

في برنامجنا التعليمي اليوم ، سنقوم بدمج إشعارات الدفع في PWA باستخدام Firebase ، أو لنكون أكثر تحديدًا ، باستخدام ميزة المراسلة السحابية بداخلها والتي تتيح إرسال الرسائل باستخدام طلبات HTTPS.

تطبيقات الويب التقدمية ودفع الإخطارات

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

 يوصى بقراءة: PWA مقابل Native: أيهما يناسبك بشكل أفضل؟

تمنح مشغلات الإشعارات للمطورين القدرة على جدولة الإشعارات ، حتى إذا كان جهاز المستخدم في وضع الطائرة.

جون كرافسيك ، Chrome Dev Summit 2019

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

 يوصى بالقراءة: 9 ميزات لا غنى عنها لتطبيق الويب التقدمي (PWA) للتجارة الإلكترونية

كيفية دمج دفع الإخطارات في PWA الخاص بك

في برنامجنا التعليمي اليوم ، سنقوم بدمج إشعارات الدفع في PWA باستخدام Firebase ، وتحديداً ميزة المراسلة السحابية بداخلها والتي تتيح إرسال الرسائل باستخدام طلبات HTTPS.

المتطلبات الأساسية

• حساب Firebase (بما أنك ستنشئ مشروعًا داخل Firebase)
• تطبيق ويب تقدمي. للحصول على عرض توضيحي مبسط ، سنستخدم تطبيق create-response-app وهو تطبيق PWA أساسي يمكن إنشاؤه باستخدام أمر

الخطوة 1 : قم بإنشاء PWA أساسي

نظرًا لأننا سننشئ PWA أساسيًا باستخدام تطبيق create-react-app ، فلنقم بتنزيل NodeJS أولاً. بعد الانتهاء من تثبيت NodeJS ، افتح موجه أوامر NodeJS وقم بتشغيل الأوامر التالية.

لإنشاء تطبيق React بسيط في دليلك المحدد:

 npx create-reaction-app your-pwa-directory

قم بتغيير دليل العمل الحالي إلى تطبيق React الذي تم إنشاؤه حديثًا:

 cd your-pwa-directory

أضف مكتبة Firebase JavaScript لعرضها:

 npm تثبيت firebase - حفظ 

الخطوة 2: إنشاء push-notification.js

الخطوة التالية هي إنشاء الوحدة التي ستكون مسؤولة عن جميع عمليات الإشعارات الخاصة بك. في <your-pwa-directory>\src ، أنشئ ملفًا باسم push- push-notification.js .js.

أولاً ، لنقم بإنشاء وظيفة تقوم بتهيئة Firebase وتمرير مفاتيح مشروعك. يمكنك العثور على مفاتيح مشروعك بالانتقال إلى Firebase> نظرة عامة على المشروع ← إعدادات المشروع والنقر على هذا الرمز:

سيوجهك هذا إلى صفحة أخرى تحتوي على Firebase SDK لـ PWA:

الآن بعد أن أصبح لدينا مفاتيح مشروعنا ، دعنا نضيف الكود التالي إلى push-notification.js . js.

 استيراد Firebase من "firebase" ؛
تصدير const initializeFirebase = () => {
  firebase.initializeApp ({
    مفتاح apiKey: "XXXXXXXXXXXXX" ،
    نطاق المصادقة: "XXXXXXXXXXXXX" ،
    قاعدة بيانات عنوان URL: "XXXXXXXXXXXXX" ،
    معرّف المشروع: "XXXXXXXXXXXXX" ،
    التخزين: "XXXXXXXXXXXXX" ،
    messagingSenderId: "XXXXXXXXXXXXX"،
    معرف التطبيق: "XXXXXXXXXXXXX"
  }) ؛
}

باستخدام هذا ، تكون قد أنشأت الوظيفة المسؤولة عن جميع عمليات معالجة الإشعارات ، وستحتاج الآن إلى استيرادها واستدعاءها. قم بتحرير index.js الخاص بك كما يلي:

 استيراد رد فعل من "رد فعل" ؛
استيراد ReactDOM من "رد فعل دوم" ؛
استيراد "./index.css" ؛
استيراد التطبيق من "./App" ؛
استيراد * كـ serviceWorkerRegistration من "./serviceWorkerRegistration" ؛
استيراد reportWebVitals من "./reportWebVitals" ؛
استيراد Firebase من "firebase" ؛
استيراد {initializeFirebase} من './push-notification' ؛
ReactDOM.render (<App />، document.getElementById ('root')) ؛
initializeFirebase () ،

الخطوة 3: إنشاء عامل خدمة

Service Workers (عمال الخدمة) هو اسم التقنية الكامنة وراء تطبيق الويب التقدمي ، والذي يدعم قدرته في وضع عدم الاتصال ، ودفع الإخطارات والتخزين المؤقت للموارد.

SimiCart ، كل ما تحتاج لمعرفته حول تطبيقات الويب التقدمية

مطلوب عامل خدمة لتلقي حدث onMessage وبالتالي ، السماح بإرسال الإخطارات إلى جهاز المستخدم. بشكل افتراضي ، يبحث Firebase تلقائيًا عن ملف يسمى firebase-messaging-sw.js .

دعنا نضيف firebase-messaging-sw.js إلى الدليل حيث يتم تقديم ملفاتك. نظرًا لأن مشروعنا عبارة عن مشروع create-react-app ، فسيتم firebase-messaging-sw.js العام:

 importScripts ('https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js') ؛
importScripts ('https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js') ؛
firebase.initializeApp ({
    مفتاح apiKey: "XXXXXXXXXXXXX" ،
    نطاق المصادقة: "XXXXXXXXXXXXX" ،
    قاعدة بيانات عنوان URL: "XXXXXXXXXXXXX" ،
    معرّف المشروع: "XXXXXXXXXXXXX" ،
    التخزين: "XXXXXXXXXXXXX" ،
    messagingSenderId: "XXXXXXXXXXXXX"،
    معرف التطبيق: "XXXXXXXXXXXXX"
}) ؛
رسائل const = firebase.messaging () ؛

إذا لم تكن قد سمعت عن PWA Service Worker حتى الآن ، فلدينا مقال حصري لتتعلم كل شيء عن هذه التكنولوجيا المدهشة.

الخطوة 4: اطلب أذونات المستخدم لإرسال الإشعارات

إنه عصر الخصوصية ، ولا تريد إزعاج المستخدمين بإرسال إعلامات غير مرغوب فيها وغير مصرح بها!

لطلب إذن المستخدم الخاص بك ، ما عليك سوى إضافة هذا إلى push-notification.js الخاص بك:

 استيراد Firebase من "firebase" ؛
 
تصدير const initializeFirebase = () => {
  firebase.initializeApp ({
    مفتاح apiKey: "XXXXXXXXXXXXX" ،
    نطاق المصادقة: "XXXXXXXXXXXXX" ،
    قاعدة بيانات عنوان URL: "XXXXXXXXXXXXX" ،
    معرّف المشروع: "XXXXXXXXXXXXX" ،
    التخزين: "XXXXXXXXXXXXX" ،
    messagingSenderId: "XXXXXXXXXXXXX"،
    معرف التطبيق: "XXXXXXXXXXXXX"
  }) ؛
}
 
تصدير const askForPermissionToReceiveNotifications = async () => {
  محاولة {
    رسائل const = firebase.messaging () ؛
    انتظار messaging.requestPermission () ؛
    رمز const = انتظار messaging.getToken () ؛
    console.log ('الرمز المميز الخاص بك هو:' ، الرمز المميز) ؛
    
    رمز العودة
  } catch (خطأ) {
    وحدة التحكم (خطأ) ؛
  }
}

ونظرًا لأن هذه الوظيفة ستحتاج إلى الاستدعاء من مكان ما ، فسنضيفها بنقرة زر واحدة. قم بتحرير ملف app.js في الدليل / src / مثل:

 استيراد الشعار من "./logo.svg" ؛
استيراد "./App.css" ؛
استيراد {askForPermissionToReceiveNotifications} من "./push-notification" ؛

وظيفة التطبيق () {
  إرجاع (
    <div className = "التطبيق">
      <header className = "App-header">
        <img src = {logo} className = "App-logo" alt = "logo" />
        <p>
          قم بتحرير <code> src / App.js </code> وحفظها لإعادة التحميل.
        </p>
        <أ
          className = "رابط التطبيق"
          href = "https://reactjs.org"
          الهدف = "_ فارغ"
          rel = "noopener noreferrer"
        >
          تعلم React
        </a>
		 <button onClick = {askForPermissionToReceiveNotifications}>
          انقر لتلقي الإخطارات
        </button>
      </header>
    </div>
  ) ؛
}

تصدير التطبيق الافتراضي ؛

الآن دعنا نبدأ مشروعنا وسترى زر انقر لتلقي الإشعارات مثل هذا:

انقر فوق الزر وسترى نافذة منبثقة تطلب إذنك:

انقر فوق السماح وتحقق من وحدة تحكم المستعرض الخاص بك. من المفترض أن ترى رسالة تُعلمك بالرمز المميز الخاص بك:

الآن احفظ هذا الرمز في مكان آخر لأنك ستحتاج إليه في الخطوة التالية.

الخطوة 5: إرسال إشعارات فورية مع ساعي البريد

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

في Postman ، أنشئ طلب POST بالمعلومات التالية:

• عنوان URL للطلب : https://fcm.googleapis.com/fcm/send

• الرؤوس : في رؤوس طلب POST ، ستحتاج إلى المفاتيح التالية:

التفويض: مفتاح = SERVER_KEY

نوع المحتوى : application / json

ملاحظات : يمكن العثور على SERVER_KEY ضمن علامة التبويب Cloud Messaging في إعدادات Firebase

• Body : املأ نص طلب POST بالرمز التالي:

 {
    "تنبيه": {
        "العنوان": "SimiCart"،
        "body": "اختبار دفع الإخطار" ،
        "click_action": "http: // localhost: 3000 /" ،
        "رمز": "https://i.imgur.com/5zO5cce.png"
    }
    "إلى": "USER_TOKEN"
}

استبدل USER_TOKEN الذي حصلت عليه (بالنقر فوق الزر انقر لتلقي الإشعارات ) في الخطوة 4. لا تنس اختيار Body type as raw و JSON .

انقر الآن على إرسال وسترى إشعارًا يظهر في الزاوية اليمنى السفلية:

ملاحظات : تظهر هذه الإشعارات فقط عندما يكون التطبيق في الخلفية أو مصغرًا.

تهانينا! يمكن لـ PWA الآن إرسال إشعارات!

استنتاج

نأمل أنه بعد هذا الدليل ، يمكنك الآن بثقة إعداد وظيفة إعلام الدفع الخاصة بك. نظرًا لكونها تقنية جديدة ، تعد تطبيقات الويب التقدمية أمرًا معقدًا للمستخدمين غير البارعين في التكنولوجيا ، وهذا هو السبب في وجود موفري حلول متاحين بسهولة مثل SimiCart الذين يمكنهم الاعتناء بكل احتياجاتك من خلال سنوات خبرتنا في PWAs.