درس تطبيقي حول الترميز: إنشاء عميل للإشعارات الفورية

Kate Jeffreys

Kayce Basques

يعرض لك هذا الدرس التطبيقي حول الترميز كيفية إنشاء برنامج إشعارات فورية بشكل مفصّل. في نهاية الدرس التطبيقي حول الترميز، سيكون لديك عميل:

• تُإشراك المستخدم في الإشعارات الفورية.
• يتلقى هذا الإعداد الرسائل الفورية ويعرضها على شكل إشعارات.
• لإلغاء اشتراك المستخدم في الإشعارات الفورية

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

اكتمل رمز الخادم الخاص بالدرس التطبيقي حول الترميز. ستكون فقط تنفيذ العميل في هذا الدرس التطبيقي حول الترميز. لمعرفة كيفية تنفيذ خادم الإشعارات الفورية، اطّلِع على الدرس التطبيقي حول الترميز: إنشاء إشعار فوري. الخادم.

يمكنك الاطّلاع على المقالة push-notifications-client-codelab-complete (المصدر) لرؤية التعليمة البرمجية الكاملة.

توافُق المتصفح

من المعروف أنّ هذا الدرس التطبيقي يتوافق مع المجموعات التالية من نظام التشغيل والمتصفّح:

• Windows: Chrome وEdge
• نظام التشغيل macOS: Chrome وFirefox
• Android: Chrome، وFirefox

من المعروف أنّ هذا الدرس التطبيقي حول الترميز لا يعمل مع أنظمة التشغيل التالية: (أو مجموعة من نظام التشغيل والمتصفح):

• نظام التشغيل macOS: Brave وEdge وSafari
• iOS

ضبط إعدادات الجهاز

الحصول على نسخة قابلة للتعديل من الرمز

سيتم استدعاء أداة تعديل الرموز التي تظهر على يسار هذه التعليمات واجهة المستخدم لتطبيق Glitch في هذا الدرس التطبيقي حول الترميز.

1. انقر على إنشاء ريمكس لتعديل لجعل المشروع قابلاً للتعديل.

ضبط إعدادات المصادقة

لكي تتمكن من تشغيل الإشعارات الفورية، يجب إعداد لخادمك وعميلك باستخدام مفاتيح المصادقة. يُرجى الاطّلاع على مقالة توقيع طلبات بروتوكول الدفع على الويب. لمعرفة السبب.

1. في واجهة مستخدم Glitch، انقر على أدوات ثم على Terminal لفتح التطبيق الطرفي للأداة.
2. في الوحدة الطرفية للأعطال، شغِّل npx web-push generate-vapid-keys. نسخ المفتاح الخاص وقيم المفاتيح العامة.
3. في واجهة مستخدم Glitch، افتح .env وعدِّل VAPID_PUBLIC_KEY وVAPID_PRIVATE_KEY. ضبط VAPID_SUBJECT إلى mailto:test@test.test يجب أن تكون كل هذه القيم مغلَّفة بين علامات اقتباس مزدوجة. بعد إجراء التعديلات، من المفترض أن يظهر ملف .env على النحو التالي: مشابه لما يلي:

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"

1. أغلِق المحطة الطرفية للأعطال.

1. فتح "public/index.js"
2. استبدِل VAPID_PUBLIC_KEY_VALUE_HERE بقيمة مفتاحك العام.

تسجيل مشغّل الخدمات

سيحتاج عميلك في النهاية إلى عامل خدمات لاستلام المحتوى وعرضه. الإشعارات. من الأفضل تسجيل مشغّل الخدمات في أقرب وقت ممكن. راجِع استلام الرسائل المُرسَلة وعرضها كـ الإشعارات للحصول على مزيد من السياق.

1. استبدل التعليق // TODO add startup logic here بالرمز التالي:

// TODO add startup logic here
if ('serviceWorker' in navigator && 'PushManager' in window) {
  navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
    console.info('Service worker was registered.');
    console.info({serviceWorkerRegistration});
  }).catch(error => {
    console.error('An error occurred while registering the service worker.');
    console.error(error);
  });
  subscribeButton.disabled = false;
} else {
  console.error('Browser does not support service workers or push messages.');
}

subscribeButton.addEventListener('click', subscribeButtonHandler);
unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);

1. لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط ملء الشاشة

1. اضغط على "Control+Shift+J" (أو "Command+Option+J" على أجهزة Mac) لفتح "أدوات مطوري البرامج".
2. انقر على علامة التبويب وحدة التحكم. من المفترض أن ترى الرسالة سجَّل "Service worker was registered." الدخول إلى وحدة التحكّم.

طلب إذن الإشعارات الفورية

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

1. في واجهة مستخدم Glitch، انقر على عرض المصدر للعودة إلى الرمز.
2. في public/index.js، استبدل التعليق // TODO في subscribeButtonHandler() مع الرمز التالي:

// TODO
// Prevent the user from clicking the subscribe button multiple times.
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}

1. ارجع إلى علامة تبويب التطبيق وانقر على الاشتراك في التحديث. المتصفّح أو نظام التشغيل يسألك ما إذا كنت تريد السماح للموقع الإلكتروني إرسال إشعارات فورية إليك انقر على سماح (أو أي عبارة مشابهة. المتصفح/نظام التشغيل). في وحدة التحكم، من المفترض أن تظهر لك رسالة تشير إلى ما إذا كان الطلب قد تم قبوله أم رفضه.

الاشتراك في ميزة الإشعارات الفورية

تتضمن عملية الاشتراك التفاعل مع إحدى خدمات الويب التي يتم التحكم فيها من قِبل مورِّد المتصفّح الذي يُطلق عليه خدمة الدفع. بمجرد الحصول على معلومات الاشتراك في الإشعارات الفورية التي تحتاج إليها لإرسالها إلى خادم وتجعل الخادم يخزنها في قاعدة بيانات على المدى الطويل. راجِع المقالة إشراك العميل في ميزة الإشعارات الفورية للحصول على المزيد من السياق حول عملية الاشتراك

1. أضِف الرمز المميّز التالي إلى subscribeButtonHandler():

subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
const registration = await navigator.serviceWorker.getRegistration();
const subscribed = await registration.pushManager.getSubscription();
if (subscribed) {
  console.info('User is already subscribed.');
  notifyMeButton.disabled = false;
  unsubscribeButton.disabled = false;
  return;
}
const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
});
notifyMeButton.disabled = false;
fetch('/add-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(subscription)
});

يجب أن يكون الخيار "userVisibleOnly" هو "true". قد لا يكون ذلك ممكنًا في يوم من الأيام دفع الرسائل بدون عرض إشعارات مرئية للمستخدم (عمليات إرسال صامتة) لكن المتصفحات لا تسمح حاليًا بهذه الإمكانية بسبب مخاوف تتعلق بالخصوصية.

تعتمد قيمة applicationServerKey على دالة فائدة تحوِّل سلسلة base64 إلى Uint8Array. تُستخدم هذه القيمة المصادقة بين الخادم وخدمة الإرسال التلقائي.

إلغاء الاشتراك في خدمة الإشعارات الفورية

بعد اشتراك المستخدم في الإشعارات الفورية، يجب أن تتوفر في واجهة المستخدم توفير طريقة لإلغاء الاشتراك في حالة تغيير المستخدم رأيه ولم يعد يريد تلقّي إشعارات فورية

1. استبدال التعليق // TODO في unsubscribeButtonHandler() مع التعليمة البرمجية التالية:

// TODO
const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
  console.info('Successfully unsubscribed from push notifications.');
  unsubscribeButton.disabled = true;
  subscribeButton.disabled = false;
  notifyMeButton.disabled = true;
}

تلقّي رسالة فورية وعرضها كإشعار

كما أسلفنا، ستحتاج إلى عامل خدمة للتعامل مع استلام وعرض الرسائل التي تم إرسالها إلى العميل من خادمك. راجِع استلام الرسائل المُرسَلة وعرضها كـ الإشعارات لمزيد من التفاصيل.

1. فتح public/service-worker.js واستبدال التعليق // TODO في معالِج أحداث push الخاص بعامل الخدمة باستخدام الرمز التالي:

// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);

1. ارجع إلى علامة تبويب التطبيق.
2. انقر على إرسال إشعار إليّ. من المفترض أن تتلقّى إشعارًا فوريًا.
3. حاول فتح عنوان URL لعلامة التبويب الخاصة بالتطبيق على متصفحات أخرى (أو حتى أجهزة أخرى)، ومتابعة سير عمل الاشتراك، ومن ثم النقر على إرسال إشعار للكل من المفترض أن يصلك الإشعار الفوري نفسه. على جميع المتصفّحات التي اشتركت فيها ارجع إلى توافُق المتصفّح للاطّلاع على قائمة بالمتصفِّح/نظام التشغيل من المعروف أنها تعمل أو لا تعمل.

يمكنك تخصيص الإشعار بعدة طرق. اطّلِع على معلَمات ServiceWorkerRegistration.showNotification() للاطّلاع على مزيد من المعلومات.

فتح عنوان URL عندما ينقر مستخدم على إشعار

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

1. استبدال التعليق // TODO في notificationclick الخاص بعامل الخدمات معالج الحدث بالرمز التالي:

// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));

1. يُرجى الرجوع إلى علامة التبويب "التطبيق" وإرسال إشعار آخر إلى نفسك، ثم النقر على الإشعار. من المفترض أن يتم فتح علامة تبويب جديدة في المتصفّح https://web.dev

الخطوات التالية

• الاطّلاع على ServiceWorkerRegistration.showNotification() للتعرّف على جميع الطرق المختلفة التي يمكنك من خلالها تخصيص الإشعارات.
• يُرجى قراءة مقالة نظرة عامة على الإشعارات الفورية. للحصول على معلومات مفصّلة حول آلية عمل الإشعارات الفورية.
• اطّلِع على الدرس التطبيقي حول الترميز: إنشاء خادم للإشعارات الفورية. لمعرفة كيفية إنشاء خادم يدير الاشتراكات ويرسل بروتوكول Web Push الطلبات.
• تجربة منشئ الإشعارات لاختبار جميع الطرق التي يمكنك من خلالها تخصيص الإشعارات.