استخدام Web Push

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

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

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

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

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

مقدّمو خدمات الدفع وخدمات Push

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

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

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

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

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، يجب نسخ هذه القيمة إلى جزء اشتراك الدفع من الصفحة.

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

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

من خلال وضع مستمعك، يمكنك إرسال رسالة على web-push-codelab.glitch.me، وسيتم تسجيل الدخول إلى الرسائل. وحدة تحكم عامل الخدمة.

ونظرًا لأنه معيار ويب مفتوح، فهناك الكثير من الوثائق الحالية حول كيفية تطبيق Web Push، بما في ذلك على مدونة Chrome. بالنسبة إلى نسخة كاملة من المثال الذي تم تناوله هنا، يوجد واحد متاح في extensions sample repo.

دفع صامت

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

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