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

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

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

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

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

المتطلبات

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

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

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

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

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

نزِّل ملف ZIP:

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

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

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

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

تثبيت Web Server for Chrome

بعد تثبيت تطبيق Web Server for Chrome، انقر على اختصار التطبيقات في شريط الإشارات المرجعية:

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

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

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

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

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

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

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

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

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

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

  updateBtn();
})

جرّب بنفسك

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

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

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

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

مزيد من المعلومات

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

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

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

المتطلبات

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

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

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

جرّب بنفسك

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

جرّب بنفسك

جرّب بنفسك

جرّب بنفسك

جرّب بنفسك

جرّب بنفسك

جرّب بنفسك

مزيد من المعلومات

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

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