استخدام Web Push

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

الحصول على إذن لاستخدام Push API

عند تسجيل خادم Push على موقع إلكتروني عادي، يتم عرض إشعار للمستخدم بمنح الإذن أو رفضه. باستخدام الإضافات التي لن تظهر الطلب. لاستخدام واجهة برمجة التطبيقات Push API في الإضافة، عليك ضبط إذن notifications في ملفManifest.json.

  {
    "manifest_version": 3,
    ...
    "permissions": ["notifications"]

إذا لم يكن لديك هذا الإذن، سيؤدي أي تفاعل مع registration.pushManager إلى حدوث خطأ فوري، وتكون النتيجة نفسها التي يتم الحصول عليها إذا رفض المستخدم منح الإذن. بالإضافة إلى ذلك، يُرجى العِلم أنّ الإذن "notifications" سيؤدي إلى ظهور تحذير بشأن الإذن أثناء عملية التثبيت. سيعطل Chrome أيضًا الإضافة في أي عمليات تثبيت حالية إلى أن يوافق المستخدم على طلب الإذن الجديد. يمكنك الاطّلاع على مزيد من المعلومات حول كيفية التعامل مع هذه المشكلة في دليل التحذير بشأن الأذونات.

مقدّمو خدمة الدفع بدون تلامس الأجهزة

بعد إضافة الإذن إلى ملفManifest.json، عليك ضبط الربط بين الواجهة الخلفية والإضافة. يمكن التفكير في هذا الاتصال في جزأين هما: مقدّم خدمة Push وخدمة Push. المزوِّد هو حزمة SDK التي تستخدمها لإرسال الرسالة إلى خدمة Push. هناك العديد من الخيارات المختلفة، ويمكن أن يعمل أيّ مزوّد لخدمة Push مع واجهة برمجة التطبيقات Push (على الرغم من أنه قد لا يوفر حزمة SDK تجعل عملية الدمج سهلة). ويتعين عليك تجربة حزمة SDK للمزود لمعرفة ما هو ممكن. خدمة الدفع هي خدمة يتم تسجيل جهاز المستخدم النهائي بها، لذا يمكن تنبيهها إلى أي رسالة فورية يرسلها مزوّد خدمة Push. هذا أمر لا يمكنك التحكم فيه، حيث يتم ترميزه بشكل ثابت في متصفحات فردية. بالنسبة إلى Chrome، المراسلة عبر السحابة الإلكترونية من Firebase هي خدمة Push. أي رسائل يتم إرسالها إلى مستخدم Chrome سيتم توجيهها من خلالها.

الاستضافة الذاتية لمقدّم خدمة Push

يمكن لأي مقدم خدمات الدفع العمل، ولكن لا تتوفر لدى جميع مقدّمي الخدمات حزمة SDK صالحة للاستخدام لدى العاملين في الخدمة. وستحتاج إلى استشارة مزود الخدمة إذا كنت تواجه مشكلات في تشغيله. ومع ذلك، لست بحاجة إلى الاستعانة بمقدّم خدمات عام. باستخدام المكتبات مثل web-push، يمكنك استضافة الخلفية الخاصة بك.

يمكنك اختبار هذه المكتبة باستخدام web-push-codelab.glitch.me. ستحتاج تحديدًا إلى نسخ مفتاح VAPID العام لخادم Push لإنشاء اشتراك Push في المتصفح. هذا المفتاح العام هو في الواقع قيمة ثنائية بترميز base64 وعليك فك ترميزها وتحويلها إلى Uint8Array لتسجيل الدخول باستخدام مدير الدفع في المتصفّح. هناك مكتبات متاحة لتنفيذ هذا المنطق، لكن ما يلي هو كل ما هو مطلوب.

function urlB64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');

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

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

يتم تمرير هذه القيمة المقدَّمة إلى مدير الدفع.

const SERVER_PUBLIC_KEY = '_INSERT_VALUE_HERE_';
const applicationServerKey = urlB64ToUint8Array(SERVER_PUBLIC_KEY);

async function subscribe() {
  try {
    let subscription = await self.registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey
    });

    console.log(`Subscribed: ${JSON.stringify(subscription,0,2)}`);

    return subscription
  } catch (error) {
    console.error('Subscribe error: ', error);
  }
}

const subscription = await subscribe();

تعرض الدالة subscribe PushSubscription، وهو كائن يحتوي على البيانات الوصفية لخادم Push. بما أنّك تستخدم web-push-codelab.glitch.me، لذا يجب نسخ هذه القيمة إلى قسم الاشتراكات الفورية في الصفحة.

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

self.addEventListener('push', function (event) {
  console.log(`Push had this data/text: "${event.data.text()}"`);
});

بعد وضع المستمع في مكانه، يمكنك إرسال رسالة من خلال web-push-codelab.glitch.me، وسيتم تسجيل الرسائل في وحدة تحكّم مشغّل الخدمة.

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

دفع صامت

لقد تلقّيت إشعارًا فوريًا في إضافة Manifest v3 منذ طرح الإصدار 3 من Chrome في الإصدار 88. ومع ذلك، كان هناك دائمًا شرط بأن يعرض الإشعار نوعًا من الطلبات المرئية للمستخدم، مثل إشعار الويب. وهذا جعلها أقل فائدة بكثير إذا كنت ترغب في دفع الأوامر أو تحديثات البيانات إلى الإضافة الخاصة بك دون إزعاج المستخدم بمعلومات غير ضرورية. اعتبارًا من Chrome 121، يمكن للإضافات ضبط userVisibleOnly على false. يمكنك الآن إرسال إشعارات فورية صامتة وليست موجّهة للمستخدمين لاستخدام هذا، اضبط userVisibleOnly على false عند الاتصال بـ pushManager.subscribe.

let subscription = await self.registration.pushManager.subscribe({
  userVisibleOnly: false,
  applicationServerKey
});