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

1. نظرة عامة

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

ما ستتعلمه

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

المتطلبات

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

2. طريقة الإعداد

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

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

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

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

• نزِّل ملف ZIP:

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

إذا نزّلت المصدر كملف ZIP، سيمنحك فك حزمة الملف مجلدًا أساسيًا push-notifications-master.

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

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

تثبيت Web Server for Chrome

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

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

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

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

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

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

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

تحديث عامل الخدمة دائمًا

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

لإعداد هذه الميزة في Chrome، اتّبِع الخطوات التالية:

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

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

الرمز المكتمل

في دليل 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" بحثًا عن Service Worker is registered message، كما يلي:

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

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

جرّب بنفسك

أعِد تحميل علامة التبويب Push Codelab. من المفترض أن يظهر لك الزر تفعيل الرسائل الفورية مفعّلاً الآن (يمكنك النقر عليه)، ومن المفترض أن يظهر لك 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');
  }
}

جرّب بنفسك

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

في حال منح الإذن، من المفترض أن يظهر لك 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. التعامل مع حدث دفع

الرمز المكتمل

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

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

أضِف الرمز التالي إلى ملف 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 على 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(). يمكنك أيضًا إضافة معالج catch في حال نتج عن استدعاء unsubscribe() حدوث خطأ. بعد ذلك، يمكنك تعديل واجهة المستخدم.

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

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

  updateBtn();
})

جرّب بنفسك

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

11. اكتملت المعالجة

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

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

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

Further reading

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

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

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