تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

إضافة الإشعارات الفورية إلى تطبيق ويب

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

ما ستتعرّف عليه

كيفية الاشتراك وإلغاء الاشتراك في خدمة الرسائل الفورية
كيفية التعامل مع الرسائل الفورية الواردة
كيفية عرض إشعار
كيفية الرد على النقرات على الإشعارات

المتطلبات اللازمة

الإصدار 52 من Chrome أو الإصدارات الأحدث
خادم الويب لمتصفح Chrome أو خادم الويب الذي تختاره
محرِّر نصوص
معرفة أساسية بلغة HTML وCSS وJavaScript ومطوّري برامج Chrome
نموذج الرمز (انظر الإعداد).

تنزيل نموذج الرمز

يتوفّر لك خياران للحصول على نموذج الرمز البرمجي هذا الدرس التطبيقي حول الترميز:

إنشاء نسخة طبق الأصل من مستودع Git:

git clone https://github.com/GoogleChrome/push-notifications.git

تنزيل ملف ZIP:

تنزيل رمز المصدر

في حال تنزيل المصدر كملف ZIP، يؤدي فك ضغطه إلى منحك مجلدًا جذريًا push-notifications-master.

تثبيت خادم الويب وإثبات ملكيته

على الرغم من أن بإمكانك استخدام خادم الويب الخاص بك، فإن هذا الدرس التطبيقي مصمم ليعمل بشكل جيد مع تطبيق Web Server for Chrome. وإذا لم تكن قد ثبّت هذا التطبيق حتى الآن، يمكنك الحصول عليه من "سوق Chrome الإلكتروني":

تثبيت خادم الويب Chrome

بعد تثبيت تطبيق "خادم الويب للويب" في Chrome، انقر على اختصار التطبيقات في شريط الإشارات:

في نافذة "التطبيقات"، انقر على رمز خادم الويب:

سترى مربع الحوار التالي بعد ذلك، والذي يتيح لك تهيئة خادم الويب المحلي:

انقر على الزر اختيار مجلد واختر المجلد app في المجلد push-notifications الذي تم تنزيله. ويتيح لك ذلك عرض عملك قيد التقدم عبر عنوان URL المعروض في قسم عناوين URL لخادم الويب من مربع الحوار.

ضمن الخيارات، ضع علامة في المربّع بجانب عرض فهرسة HTML تلقائيًا، كما هو موضّح في ما يلي:

بعد ذلك، أوقِف الخادم وأعِد تشغيله عن طريق تمرير زر خادم الويب: البدء إلى اليمين ثم الرجوع إلى اليسار.

انقر على عنوان URL لخادم الويب لزيارة موقعك في متصفح الويب. من المفترض أن تظهر صفحة تبدو كما يلي: على الرغم من أن الإصدار قد يعرض 127.0.0.1:8887 على أنه العنوان:

تحديث مشغّل الخدمات دائمًا

خلال عملية التطوير، من المفيد أن تتأكد من أن مشغّل الخدمات يقدّم آخر المعلومات دائمًا وأنّه يتضمّن آخر التغييرات.

لإعداد هذا في Chrome:

انتقِل إلى علامة التبويب Push Codelab.
فتح أدوات مطوري البرامج: Ctrl-Shift-I على نظامي التشغيل Windows وLinux، وCmd-Option-I على نظام التشغيل macOS.
اختر لوحة التطبيق، وانقر على علامة التبويب عمال الخدمة، وضَع علامة في مربّع الاختيار تحديث عند إعادة التحميل. عند تفعيل مربّع الاختيار هذا، يتم فرض تعديل على مشغّل الخدمات في كل مرة تتم فيها إعادة تحميل الصفحة.

الرمز الكامل

في الدليل app، لاحظ أن لديك ملفًا فارغًا باسم sw.js. سيكون هذا الملف مشغِّل خدماتك. وفي الوقت الحالي، يمكن أن تظل فارغة. ستضيف رمزًا إليها لاحقًا.

أولاً، عليك تسجيل هذا الملف كعامل الخدمة.

تُحمِّل صفحة app/index.html scripts/main.js. أنت تسجّل مشغّل الخدمات في ملف JavaScript هذا.

إضافة الرمز التالي إلى scripts/main.js:

if ('serviceWorker' in navigator && 'PushManager' in window) {
  console.log('Service Worker and Push are supported');

  navigator.serviceWorker.register('sw.js')
  .then(function(swReg) {
    console.log('Service Worker is registered', swReg);

    swRegistration = swReg;
  })
  .catch(function(error) {
    console.error('Service Worker Error', error);
  });
} else {
  console.warn('Push messaging is not supported');
  pushButton.textContent = 'Push Not Supported';
}

يتحقّق هذا الرمز مما إذا كان المتصفّح متوافقًا مع مستخدمي الخدمة والرسائل الفورية. ستسجِّل الرمز ملف sw.js إذا كانت متوافقة.

جرّب بنفسك

تحقّق من التغييرات من خلال إعادة تحميل علامة التبويب Push Codelab في المتصفّح.

تحقق من وحدة التحكم في Chrome DevTools للحصول على Service Worker is registered message، كما يلي:

الحصول على مفاتيح خادم التطبيق

ولاستخدام هذا الدرس التطبيقي، عليك إنشاء مفاتيح خادم التطبيق. ويمكنك إجراء ذلك على الموقع الإلكتروني المصاحب: web-push-codelab.glitch.me.

يمكنك هنا إنشاء مفتاحَي تشفير عام والخاص.

انسخ مفتاحك العام إلى scripts/main.js مع استبدال قيمة <Your Public Key>:

const applicationServerPublicKey = '<Your Public Key>';

ملاحظة مهمة: يجب عدم إضافة مفتاحك الخاص في تطبيق الويب.

الرمز الكامل

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

ستحتاج إلى إنشاء وظيفتين في scripts/main.js:

initializeUI، للتحقق مما إذا كان المستخدم مشتركًا حاليًا
updateBtn، لتفعيل الزر وتغيير النص وفقًا لما إذا كان المستخدم مشتركًا أم لا

يمكنك إضافة دالة initializeUI إلى main.js على النحو التالي:

function initializeUI() {
  // Set the initial subscription value
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    isSubscribed = !(subscription === null);

    if (isSubscribed) {
      console.log('User IS subscribed.');
    } else {
      console.log('User is NOT subscribed.');
    }

    updateBtn();
  });
}

تستخدم الطريقة الجديدة swRegistration من الخطوة السابقة وتحصل على السمة pushManager منها وتطلب getSubscription() من ذلك.

pushManager. تعرض getSubscription() وعودًا يتفاهم مع الاشتراك الحالي في حال توفّره. وبخلاف ذلك، سيتم عرض null. باستخدام هذا الخيار، يمكنك التحقّق مما إذا كان المستخدم مشتركًا في القناة وضبط قيمة isSubscribed ثم الاتصال بـ updateBtn() لتعديل الزر.

أضِف الدالة updateBtn() إلى main.js:

function updateBtn() {
  if (isSubscribed) {
    pushButton.textContent = 'Disable Push Messaging';
  } else {
    pushButton.textContent = 'Enable Push Messaging';
  }

  pushButton.disabled = false;
}

وتعمل هذه الوظيفة على تفعيل الزر وتغيير نص الزر اعتمادًا على ما إذا كان المستخدم مشتركًا أم لا.

وآخر إجراء يجب اتخاذه هو الاتصال بالرقم initializeUI() عند تسجيل مشغّل الخدمات في main.js:

navigator.serviceWorker.register('sw.js')
.then(function(swReg) {
  console.log('Service Worker is registered', swReg);

  swRegistration = swReg;
  initializeUI();
})

جرّب بنفسك

أعِد تحميل علامة التبويب Push Codelab. من المفترض أن يظهر لك الزر تفعيل إرسال الإشعارات الفورية مفعّلاً (يمكنك النقر عليه) وسيظهر لك User is NOT subscribed في وحدة التحكُّم.

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

الرمز الكامل

في الوقت الحالي، لا يفعل زر تفعيل المراسلة الفورية الكثير. لنصلح هذه المشكلة.

في الدالة initializeUI()، أضِف أداة معالجة نقر الزر:

function initializeUI() {
  pushButton.addEventListener('click', function() {
    pushButton.disabled = true;
    if (isSubscribed) {
      // TODO: Unsubscribe user
    } else {
      subscribeUser();
    }
  });

  // Set the initial subscription value
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    isSubscribed = !(subscription === null);

    updateSubscriptionOnServer(subscription);

    if (isSubscribed) {
      console.log('User IS subscribed.');
    } else {
      console.log('User is NOT subscribed.');
    }

    updateBtn();
  });
}

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

وبعد ذلك، يمكنك الاتصال بالرقم subscribeUser() إذا لم يكن المستخدم مشتركًا حاليًا. ولإجراء ذلك، عليك لصق الرمز التالي في scripts/main.js:

function subscribeUser() {
  const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
  swRegistration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: applicationServerKey
  })
  .then(function(subscription) {
    console.log('User is subscribed.');

    updateSubscriptionOnServer(subscription);

    isSubscribed = true;

    updateBtn();
  })
  .catch(function(error) {
    console.error('Failed to subscribe the user: ', error);
    updateBtn();
  });
}

لنتعرّف على كيفية عمل هذا الرمز وطريقة اشتراكه في الرسائل الفورية.

أولاً، عليك الحصول على المفتاح العام لخادم التطبيق وهو Base64 URL-encoded، ثم تحويله إلى UInt8Array، لأن هذا هو الإدخال المتوقع لاستدعاء subscribe(). دالة urlB64ToUint8Array() في أعلى scripts/main.js.

بعد تحويل القيمة، يمكنك استدعاء طريقة subscribe() على مشغّل الخدمات pushManager، مع تمرير المفتاح العام لخادم تطبيقك والقيمة userVisibleOnly: true.

const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
swRegistration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: applicationServerKey
})

تُعد مَعلمة userVisibleOnly ضمانًا بأنك ستعرض إشعارًا في كل مرة يتم فيها إرسال رسالة فورية. هذه القيمة مطلوبة حاليًا ويجب أن تكون صحيحة.

ويؤدي الاتصال بالرقم subscribe() إلى تقديم وعود يتم حلها بعد الخطوات التالية:

لقد منح المستخدم إذنًا لعرض الإشعارات.
أرسل المتصفِّح طلب شبكة إلى خدمة دفع للحصول على البيانات المطلوبة لإنشاء PushSubscription.

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

swRegistration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: applicationServerKey
})
.then(function(subscription) {
  console.log('User is subscribed.');

  updateSubscriptionOnServer(subscription);

  isSubscribed = true;

  updateBtn();

})
.catch(function(err) {
  console.log('Failed to subscribe the user: ', err);
  updateBtn();
});

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

في التطبيق الحقيقي، الوظيفة updateSubscriptionOnServer() هي المكان الذي سترسل إليه بيانات الاشتراك إلى خلفية، ولكن بالنسبة إلى الدرس التطبيقي حول الترميز، يمكنك عرض الاشتراك في واجهة المستخدم بسهولة. أضف الدالة التالية إلى scripts/main.js:

function updateSubscriptionOnServer(subscription) {
  // TODO: Send subscription to application server

  const subscriptionJson = document.querySelector('.js-subscription-json');
  const subscriptionDetails =
    document.querySelector('.js-subscription-details');

  if (subscription) {
    subscriptionJson.textContent = JSON.stringify(subscription);
    subscriptionDetails.classList.remove('is-invisible');
  } else {
    subscriptionDetails.classList.add('is-invisible');
  }
}

جرّب بنفسك

انتقِل إلى علامة التبويب Push Codelab، وأعِد تحميل الصفحة، ثم انقر على الزر. من المفترض أن تظهر لك رسالة مطالبة مثل:

في حال منحت الإذن، من المفترض أن يظهر لك User is subscribed مسجّلاً في وحدة التحكم. سيتغير نص الزر إلى إيقاف الرسائل الفورية وستتمكّن من عرض الاشتراك بتنسيق JSON في أسفل الصفحة.

الرمز الكامل

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

السيناريو الواضح لمعالجة هذا السيناريو هو الدالة updateBtn(). ما عليك سوى التحقّق من قيمة Notification.permission، على النحو التالي:

function updateBtn() {
  if (Notification.permission === 'denied') {
    pushButton.textContent = 'Push Messaging Blocked';
    pushButton.disabled = true;
    updateSubscriptionOnServer(null);
    return;
  }

  if (isSubscribed) {
    pushButton.textContent = 'Disable Push Messaging';
  } else {
    pushButton.textContent = 'Enable Push Messaging';
  }

  pushButton.disabled = false;
}

وستدرك أنّه إذا كان الإذن هو denied، لن يكون بإمكان المستخدم الاشتراك ولا يتّخذ أي إجراء آخر، لذلك يكون إيقاف الزر نهائيًا هو أفضل إجراء.

جرّب بنفسك

بما أنك قد منحت إذنًا لتطبيق الويب من الخطوة السابقة، عليك النقر على i في دائرة في شريط عنوان URL وتغيير إذن الإشعارات إلى استخدام الإعداد التلقائي العام (طلب).

بعد الانتهاء من تغيير هذا الإعداد، حدِّث الصفحة وانقر على الزر تفعيل إرسال الرسائل الفورية واختَر حظر في مربع حوار الأذونات. سيتم إيقاف الزر ويعرض النص تم حظر إرسال الرسائل.

من خلال هذا التغيير، يمكنك الآن اشتراك المستخدم، مع الاهتمام بسيناريوهات الأذونات المحتملة.

الرمز الكامل

قبل أن تعرف كيفية إرسال رسالة فورية من الخلفية، عليك مراعاة ما سيحدث فعليًا عندما يتلقى مستخدم مشترك رسالة فورية.

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

أضِف الرمز التالي إلى ملف sw.js:

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

  const title = 'Push Codelab';
  const options = {
    body: 'Yay it works.',
    icon: 'images/icon.png',
    badge: 'images/badge.png'
  };

  event.waitUntil(self.registration.showNotification(title, options));
});

لنستعرض هذا الرمز. أنت تستمع إلى push حدثًا في مشغّل الخدمات من خلال إضافة أداة معالجة حدث:

self.addEventListener('push', ... );

(ما لم تكن قد لعبت بواسطة Web Worker من قبل، من المحتمل أن يكون self جديدًا. في ملف مشغّل الخدمات، يشير self إلى مشغّل الخدمات نفسه.)

عند تلقّي رسالة فورية، سيتم الاتصال بمستخدم الحدث وسيتم إنشاء إشعار من خلال الاتصال بـ showNotification() في السمة registration لعامل الخدمة. تتطلب showNotification() title، ويمكنك أيضًا منحها كائن options لضبط رسالة نصية ورمز وشارة. (تُستخدم الشارة على Android فقط في وقت كتابتها).

const title = 'Push Codelab';
const options = {
  body: 'Yay it works.',
  icon: 'images/icon.png',
  badge: 'images/badge.png'
};
self.registration.showNotification(title, options);

إنّ آخر ما يجب تناوله في معالجة حدث push هو event.waitUntil(). تهدف هذه الطريقة إلى ضمان تفعيل المتصفّح للحفاظ على نشاط مشغّل الخدمات وعرضه إلى أن يتمّ حلّه.

لتسهيل فهم الرمز أعلاه، يمكنك إعادة كتابته كما يلي:

const notificationPromise = self.registration.showNotification(title, options);
event.waitUntil(notificationPromise);

الآن بعد أن اطّلعت على الحدث الذي يجري الدفع الآن، لنجرّب حدثًا فوريًا.

جرّب بنفسك

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

في تطبيق الويب، اشترك في ميزة إرسال الرسائل الفورية وتأكد من ظهور User IS subscribed في وحدة التحكم. في لوحة التطبيق في DevTools، ضمن علامة التبويب Service Workers، انقر على الزر Push:

بعد النقر على دفع، من المفترض أن يظهر لك إشعار على النحو التالي:

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

الرمز الكامل

إذا نقرت على أحد هذه الإشعارات، ستلاحظ عدم حدوث أي شيء. يمكنك معالجة النقرات على الإشعارات من خلال الاستماع إلى أحداث notificationclick في مشغّل الخدمات الخاص بك.

ابدأ بإضافة مستمع notificationclick في sw.js:

self.addEventListener('notificationclick', function(event) {
  console.log('[Service Worker] Notification click received.');

  event.notification.close();

  event.waitUntil(
    clients.openWindow('https://developers.google.com/web')
  );
});

عندما ينقر المستخدم على الإشعار، سيتم استدعاء أداة معالجة حدث notificationclick.

يغلق الرمز أولاً الإشعار الذي تم النقر عليه:

event.notification.close();

بعد ذلك يتم فتح نافذة أو علامة تبويب جديدة، يتم تحميل عنوان URL https://developers.google.com/web. ويمكنك تغيير ذلك.

event.waitUntil(
    clients.openWindow('https://developers.google.com/web/')
  );

يضمن event.waitUntil() عدم إنهاء المتصفِّح لعامل الخدمة قبل عرض النافذة أو علامة التبويب الجديدة.

جرّب بنفسك

حاوِل تشغيل رسالة فورية في "أدوات مطوري البرامج" مرة أخرى وانقر على "الإشعار". سيظهر لك الإشعار الآن ويتم فتح علامة تبويب جديدة.

رأيت أنّه بإمكان تطبيق الويب الخاص بك عرض إشعار باستخدام "أدوات مطوّري البرامج" وبحث في كيفية إغلاق الإشعار بنقرة واحدة. وتتمثل الخطوة التالية في إرسال رسالة فورية فعلية.

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

وهذا خارج نطاق هذا الدرس التطبيقي حول الترميز، ولكن يمكنك استخدام الموقع الإلكتروني المصاحب (web-push-codelab.glitch.me) لتشغيل رسالة فورية فعلية. الصق الاشتراك في أسفل صفحتك:

بعد ذلك، الصق ذلك في الموقع المصاحب في منطقة النص الاشتراك لإرسال إلى:

ضمن النص المطلوب إرساله، أضف أي سلسلة تريد إرسالها مع رسالة الدفع.

انقر على الزر إرسال رسالة فورية.

من المفترض أن تتلقى رسالة فورية. سيتم تسجيل النص الذي استخدمته في وحدة التحكم.

ومن المفترض أن يتيح لك ذلك فرصة اختبار إرسال البيانات واستلامها، بالإضافة إلى التحكم في الإشعارات نتيجةً لذلك.

التطبيق المصاحب هو خادم عقدة يستخدم مكتبة web-push لإرسال الرسائل. ومن المفيد مراجعة مؤسسة web-push-libs على GitHub لمعرفة المكتبات المتاحة لإرسال رسائل فورية لك. يعالج ذلك الكثير من التفاصيل لتفعيل الرسائل الفورية.

ويمكنك الاطّلاع على كل رمز الموقع الإلكتروني المصاحب هنا.

الرمز الكامل

وهناك شيء واحد مفقود هو إمكانية إلغاء اشتراك مستخدم من الدفع. لِتَنْفِيذْ هَذَا الْإِجْرَاءْ، يَجِبُ الِاتِّصَالْ بِـ unsubscribe() عَلَى PushSubscription.

ارجع إلى ملف scripts/main.js، غيِّر أداة معالجة النقر pushButton في initializeUI() إلى ما يلي:

pushButton.addEventListener('click', function() {
  pushButton.disabled = true;
  if (isSubscribed) {
    unsubscribeUser();
  } else {
    subscribeUser();
  }
});

لاحظ أنك تنوي الآن استدعاء دالة جديدة unsubscribeUser(). في هذه الدالة، يمكنك الحصول على الاشتراك الحالي وطلب unsubscribe() منه. إضافة الرمز التالي إلى scripts/main.js:

function unsubscribeUser() {
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    if (subscription) {
      return subscription.unsubscribe();
    }
  })
  .catch(function(error) {
    console.log('Error unsubscribing', error);
  })
  .then(function() {
    updateSubscriptionOnServer(null);

    console.log('User is unsubscribed.');
    isSubscribed = false;

    updateBtn();
  });
}

لننتقل إلى هذه الدالة.

أولاً، تحصل على الاشتراك الحالي عن طريق الاتصال بـ getSubscription():

swRegistration.pushManager.getSubscription()

تعرض هذه القيمة وعودًا يتّفق مع PushSubscription إذا كان متوفّرًا، وإلا يتمّ عرض null. إذا كنت تمتلك اشتراكًا، يمكنك استدعاء القيمة unsubscribe() عليه، ما يجعل PushSubscription غير صالح.

swRegistration.pushManager.getSubscription()
.then(function(subscription) {
  if (subscription) {
    // TODO: Tell application server to delete subscription
    return subscription.unsubscribe();
  }
})
.catch(function(error) {
  console.log('Error unsubscribing', error);
})

ويؤدي الاتصال بالرقم unsubscribe() إلى إرجاعك وعودًا، لأن هذا الأمر قد يستغرق بعض الوقت. وعليك إرجاع هذا الوعد بحيث ينتظر then() التالي في السلسلة انتهاء unsubscribe(). ويمكنك أيضًا إضافة معالِج صيد في حال تسبب طلب unsubscribe() في حدوث خطأ. وبعد ذلك، يمكنك تحديث واجهة المستخدم.

.then(function() {
  updateSubscriptionOnServer(null);

  console.log('User is unsubscribed.');
  isSubscribed = false;

  updateBtn();
})

جرّب بنفسك

من المفترض أن تتمكن من الضغط على تفعيل المراسلة الفورية أو إيقاف المراسلة الفورية في تطبيق الويب، وستعرض السجلات المستخدم المستخدم مشتركًا وغير مشترك.

تهانينا على إكمال هذا الدرس التطبيقي حول الترميز.

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

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

إضافة الإشعارات الفورية إلى تطبيق ويب

ما ستتعرّف عليه

المتطلبات اللازمة

تنزيل نموذج الرمز

تثبيت خادم الويب وإثبات ملكيته

تحديث مشغّل الخدمات دائمًا

جرّب بنفسك

الحصول على مفاتيح خادم التطبيق

جرّب بنفسك

جرّب بنفسك

جرّب بنفسك

جرّب بنفسك

جرّب بنفسك

جرّب بنفسك

المزيد من القراءة

مشاركات مدونة ذات صلة

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

ما ستتعرّف عليه

المتطلبات اللازمة

تنزيل نموذج الرمز

تثبيت خادم الويب وإثبات ملكيته

تحديث مشغّل الخدمات دائمًا

جرّب بنفسك

الحصول على مفاتيح خادم التطبيق

جرّب بنفسك

جرّب بنفسك

جرّب بنفسك

جرّب بنفسك

جرّب بنفسك

جرّب بنفسك

المزيد من القراءة

مشاركات مدونة ذات صلة

إضافة الإشعارات الفورية إلى تطبيق ويب