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

1. نظرة عامة

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

المعلومات التي ستطّلع عليها

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

المتطلبات

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

2. الإعداد

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

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

• استنساخ مستودع Git:

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

• تنزيل ملف ZIP:

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

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

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

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

تثبيت خادم الويب لمتصفّح Chrome

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

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

سيظهر لك مربع الحوار هذا بعد ذلك، والذي يتيح لك ضبط خادم الويب المحلي:

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

ضمن الخيارات، ضَع علامة في المربّع بجانب عرض index.html تلقائيًا، كما هو موضّح أدناه:

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

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

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

أثناء التطوير، من المفيد التأكّد من أنّ عامل الخدمة محدّث بصفة دائمة وأنّه لديه آخر التغييرات.

لإعداد هذا الإجراء في Chrome:

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

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

رمز مكتمل

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

أولاً، يجب تسجيل هذا الملف كمشغّل الخدمات.

يتم تحميل scripts/main.js على صفحتك في app/index.html. تسجّل مشغّل الخدمات في ملف 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 إذا كانت متوافقة.

جرّب بنفسك

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

ابحث عن Service Worker is registered message في وحدة التحكّم في "أدوات مطوري البرامج في Chrome" على النحو التالي:

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

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

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

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

const applicationServerPublicKey = '<Your Public Key>';

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

4. إعداد الحالة

رمز مكتمل

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

ستحتاج إلى إنشاء دالتَين في 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();
})

جرّب بنفسك

أعِد تحميل علامة التبويب إرسال درس تطبيقي حول الترميز. من المفترض أن ترى أن الزر تفعيل الرسائل الفورية قد تم تفعيله الآن (يمكنك النقر عليه) ومن المفترض أن يظهر لك الزر User is NOT subscribed في وحدة التحكّم.

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

5- اشتراك المستخدم

رمز مكتمل

في الوقت الحالي، لا يؤدي زر تفعيل الرسائل الفورية إلى إجراء أي تأثير. دعنا نصلح ذلك.

في الدالة 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-آمن، وتحويله إلى UInt8Array، لأنّ هذا هو الإدخال المتوقَّع لاستدعاء subscribe(). وتقع الدالة urlB64ToUint8Array() في أعلى scripts/main.js.

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

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

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

يؤدي طلب الرقم subscribe() إلى إرجاع وعد سيتم حلّه بعد تنفيذ الخطوات التالية:

1. لقد منح المستخدم إذنًا لعرض الإشعارات.
2. أرسل المتصفِّح طلب شبكة إلى خدمة إرسال البيانات للحصول على البيانات المطلوبة لإنشاء 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');
  }
}

جرّب بنفسك

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

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

6- تم رفض إذن الاسم المعرِّف

رمز مكتمل

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

المكان الواضح للتعامل مع هذا السيناريو هو في الدالة 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 وتغيير إذن الإشعارات إلى استخدام الإعداد التلقائي العام (طلب).

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

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

7. التعامل مع حدث الدفع

رمز مكتمل

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

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

أضِف الرمز التالي إلى ملف 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 Workers من قبل، فمن المحتمل أن يكون 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" في وحدة التحكّم. في لوحة التطبيق في "أدوات مطوري البرامج"، ضمن علامة التبويب مشغّلو الخدمات، انقر على الزرّ إرسال:

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

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

8. نقرة على إشعار

رمز مكتمل

إذا نقرت على أحد هذه الإشعارات، ستلاحظ عدم حدوث أي شيء. يمكنك التعامل مع النقرات على الإشعارات من خلال الاستماع إلى أحداث 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() أنّ المتصفّح لا ينهي عامل الخدمة قبل عرض النافذة أو علامة التبويب الجديدة.

جرّب بنفسك

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

9. إرسال رسائل فورية

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

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

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

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

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

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

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

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

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

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

10. إلغاء اشتراك المستخدم

رمز مكتمل

الشيء الوحيد المفقود هو القدرة على إلغاء اشتراك المستخدم من الدفع. لِتَنْفِيذْ هَذَا الْإِجْرَاءْ، يَجِبُ الِاتِّصَالْ بِـ 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();
})

جرّب بنفسك

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

11. انتهت

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

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

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

قراءة إضافية

• الإشعارات الفورية على الويب: اطّلِع على مستندات حول أساسيات الويب.
• مكتبات دفع الويب: مكتبات دفع الويب، بما في ذلك Node.js وPHP وJava وPython وC وC#

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

• تشفير حمولة البيانات الأساسية على الويب
• مفاتيح خادم التطبيق وإرسال إشعارات الويب
• إجراءات الإشعارات
• الرموز وإغلاق الأحداث وإعادة إرسال الإشعارات المفضّلة والطوابع الزمنية