اعلان‌های فشاری را به یک برنامه وب اضافه کنید

۱. مرور کلی

پیام‌رسانی فوری روشی ساده و مؤثر برای تعامل مجدد با کاربران شما فراهم می‌کند. در این آزمایشگاه کد، یاد خواهید گرفت که چگونه اعلان‌های فوری را به برنامه وب خود اضافه کنید.

آنچه یاد خواهید گرفت

  • نحوه اشتراک و لغو اشتراک یک کاربر برای پیام‌رسانی فوری
  • نحوه مدیریت پیام‌های فوری دریافتی
  • نحوه نمایش اعلان
  • نحوه پاسخ به کلیک‌های اعلان

آنچه نیاز دارید

  • کروم ۵۲ یا بالاتر
  • وب سرور برای کروم ، یا وب سرور دلخواه شما
  • یک ویرایشگر متن
  • آشنایی اولیه با HTML، CSS، جاوا اسکریپت و ابزارهای توسعه کروم
  • کد نمونه (به راه‌اندازی مراجعه کنید.)

۲. آماده شوید

کد نمونه را دانلود کنید

دو راه برای دریافت کد نمونه برای این codelab وجود دارد:

  • مخزن گیت را کلون کنید: 
git clone https://github.com/GoogleChrome/push-notifications.git
  • دانلود فایل زیپ:

اگر منبع را به صورت فایل ZIP دانلود کنید، پس از باز کردن آن، یک پوشه ریشه push-notifications-master خواهید داشت.

نصب و بررسی وب سرور

اگرچه شما می‌توانید از وب سرور خودتان استفاده کنید، این codelab طوری طراحی شده است که به خوبی با برنامه وب سرور برای کروم کار کند. اگر هنوز آن برنامه را نصب نکرده‌اید، می‌توانید آن را از فروشگاه وب کروم دریافت کنید:

پس از نصب برنامه وب سرور برای کروم، روی میانبر برنامه‌ها در نوار نشانک‌ها کلیک کنید:

۹۴۶bcaaad66e5c8e.png

در پنجره برنامه‌ها، روی نماد وب سرور کلیک کنید:

9f3c21b2cf6cbfb5.png

در مرحله بعد این کادر محاوره‌ای را مشاهده خواهید کرد که به شما امکان پیکربندی سرور وب محلی‌تان را می‌دهد:

73543edeb27c3d6f.png

روی دکمه‌ی «انتخاب پوشه» کلیک کنید و پوشه‌ی app را در پوشه‌ی push-notifications که دانلود کرده‌اید، انتخاب کنید. این به شما امکان می‌دهد تا کار در حال انجام خود را از طریق URL نشان داده شده در بخش URL(های) وب سرور در پنجره‌ی محاوره‌ای ارائه دهید.

در قسمت Options ، کادر کنار Automatically show index.html را علامت بزنید، همانطور که در زیر نشان داده شده است:

5ac11bca86ce7369.png

سپس با کشیدن تاگل Web Server: STARTED به سمت چپ و سپس به سمت راست، سرور را متوقف و مجدداً راه‌اندازی کنید.

d42f87972f9fec24.png

برای بازدید از سایت خود در مرورگر وب خود، روی آدرس وب سرور کلیک کنید. باید صفحه‌ای شبیه به این را ببینید - اگرچه نسخه شما ممکن است آدرس 127.0.0.1:8887 را نشان دهد:

00-push-codelab.png

همیشه سرویس ورکر را به‌روزرسانی کنید

در طول توسعه، مفید است که مطمئن شوید سرویس ورکر شما همیشه به‌روز است و آخرین تغییرات را دارد.

برای تنظیم این مورد در کروم:

  1. به برگه Push Codelab بروید.
  2. ابزار توسعه (DevTools) را باز کنید: Ctrl-Shift-I در ویندوز و لینوکس، Cmd-Option-I در macOS.
  3. پنل Application را انتخاب کنید، روی تب Service Workers کلیک کنید و کادر انتخاب Update on Reload را علامت بزنید. وقتی این کادر انتخاب فعال باشد، Service Worker هر بار که صفحه مجدداً بارگذاری می‌شود، به زور به‌روزرسانی می‌شود.

e7d384fb77885b99.png

۳. ثبت نام یک سرویس ورکر

کد تکمیل شده

در پوشه app خود، توجه داشته باشید که یک فایل خالی با نام sw.js دارید. این فایل، service worker شما خواهد بود. فعلاً می‌توانید خالی بماند. بعداً کدی به آن اضافه خواهید کرد.

ابتدا باید این فایل را به عنوان service worker خود ثبت کنید.

صفحه app/index.html شما scripts/main.js را بارگذاری می‌کند. شما service worker خود را در این فایل جاوا اسکریپت ثبت می‌کنید.

کد زیر را به 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';
}

این کد بررسی می‌کند که آیا مرورگر شما از سرویس ورکرها و پیام‌های push پشتیبانی می‌کند یا خیر. اگر از آنها پشتیبانی شود، کد فایل sw.js شما را ثبت می‌کند.

امتحانش کن.

با رفرش کردن تب Push Codelab در مرورگر، تغییرات خود را بررسی کنید.

کنسول Chrome DevTools را برای یافتن Service Worker is registered message مانند زیر بررسی کنید:

5d7ad383d6f235d5.png

دریافت کلیدهای سرور برنامه

برای کار با این codelab، باید کلیدهای سرور برنامه را تولید کنید. می‌توانید این کار را در سایت همراه انجام دهید: web-push-codelab.glitch.me

در اینجا می‌توانید یک جفت کلید عمومی و خصوصی ایجاد کنید.

push-codelab-04-company.png

کلید عمومی خود را در 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() ‎ یک promise برمی‌گرداند که در صورت وجود، با اشتراک فعلی حل می‌شود. در غیر این صورت، null برمی‌گرداند. با این کار، می‌توانید بررسی کنید که آیا کاربر قبلاً مشترک شده است یا خیر، مقدار isSubscribed را تنظیم کنید و سپس updateBtn() را برای به‌روزرسانی دکمه فراخوانی کنید.

تابع updateBtn() را به main.js اضافه کنید:

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

  pushButton.disabled = false;
}

این تابع دکمه را فعال می‌کند و متن دکمه را بسته به اینکه کاربر مشترک شده است یا خیر، تغییر می‌دهد.

آخرین کاری که باید انجام دهید این است که وقتی service worker شما در main.js ثبت شد، initializeUI() را فراخوانی کنید:

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

  swRegistration = swReg;
  initializeUI();
})

امتحانش کن.

تب Push Codelab را رفرش کنید. باید ببینید که دکمه‌ی Enable Push Messaging اکنون فعال شده است (می‌توانید روی آن کلیک کنید) و باید User is NOT subscribed در کنسول ببینید.

a1553f4a0483d227.png

همچنان که در ادامه‌ی این کدلاگ پیش می‌روید، باید ببینید که متن دکمه هر زمان که مشترک می‌شوید یا لغو اشتراک می‌کنید، تغییر می‌کند.

۵. کاربر را مشترک کنید

کد تکمیل شده

در حال حاضر، دکمه‌ی «فعال کردن پیام‌رسان فوری» کار زیادی انجام نمی‌دهد. بیایید این مشکل را حل کنیم.

در تابع 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();
  });
}

بیایید قدم به قدم بررسی کنیم که این کد چه کاری انجام می‌دهد و چگونه کاربر را برای دریافت پیام‌های فوری (push messaging) ثبت‌نام می‌کند.

ابتدا، کلید عمومی سرور برنامه را که با رمزگذاری Base64 URL-safe کدگذاری شده است، دریافت کرده و آن را به یک UInt8Array تبدیل می‌کنید، زیرا این ورودی مورد انتظار برای فراخوانی subscribe() است. تابع urlB64ToUint8Array() در بالای scripts/main.js قرار دارد.

پس از تبدیل مقدار، متد subscribe() را در pushManager سرویس ورکر خود فراخوانی می‌کنید و کلید عمومی سرور برنامه و مقدار userVisibleOnly: true به آن ارسال می‌کنید.

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

پارامتر userVisibleOnly تضمین می‌کند که هر بار که یک پیام ارسال می‌شود، یک اعلان نمایش داده شود. در حال حاضر، این مقدار الزامی است و باید درست باشد.

فراخوانی subscribe() یک promise را برمی‌گرداند که پس از مراحل زیر حل خواهد شد:

  1. کاربر مجوز نمایش اعلان‌ها را داده است.
  2. مرورگر یک درخواست شبکه به یک سرویس push ارسال کرده است تا داده‌های مورد نیاز برای تولید PushSubscription دریافت کند.

اگر این مراحل موفقیت‌آمیز باشند، promise مربوط subscribe() با یک PushSubscription حل خواهد شد. اگر کاربر مجوز ندهد یا مشکلی در عضویت کاربر وجود داشته باشد، promise با خطا رد می‌شود. این به شما زنجیره promise زیر را در codelab شما می‌دهد: 

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() جایی است که شما داده‌های اشتراک خود را به backend ارسال می‌کنید، اما برای codelab شما به سادگی اشتراک را در رابط کاربری خود نمایش می‌دهید. تابع زیر را به 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 بروید، صفحه را رفرش کنید و روی دکمه کلیک کنید. باید یک درخواست مجوز مانند این را ببینید:

fcc61267a0194e81.png

اگر مجوز را بدهید، باید User is subscribed ببینید. متن دکمه به «غیرفعال کردن پیام‌های فوری» تغییر می‌کند و می‌توانید اشتراک را به صورت داده‌های JSON در پایین صفحه مشاهده کنید.

5c5505f2ead037c.png

۶. مجوز هندل رد شد

کد تکمیل شده

یک موردی که هنوز به آن نپرداخته‌اید این است که اگر کاربر درخواست مجوز را مسدود کند، چه اتفاقی می‌افتد. این موضوع نیاز به بررسی خاصی دارد، زیرا اگر کاربر مجوز را مسدود کند، برنامه وب شما قادر به نمایش مجدد درخواست مجوز نخواهد بود و نمی‌تواند کاربر را مشترک کند. شما حداقل باید دکمه فشاری را غیرفعال کنید تا کاربر بداند که نمی‌تواند از آن استفاده کند.

مکان واضح برای مدیریت این سناریو، تابع 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 در یک دایره در نوار آدرس کلیک کنید و مجوز اعلان‌ها را به «استفاده از پیش‌فرض جهانی (پرسیدن)» تغییر دهید.

۵۴۴۹۵۵۹۲۰۷۴f10ae.png

پس از تغییر این تنظیم، صفحه را رفرش کنید و روی دکمه‌ی «فعال کردن پیام‌های فوری» کلیک کنید و در پنجره‌ی مجوزها، گزینه‌ی «مسدود کردن» را انتخاب کنید. دکمه غیرفعال می‌شود و متن «مسدود کردن پیام‌های فوری» نمایش داده می‌شود.

d4cf22468f6defda.png

با این تغییر، اکنون می‌توانید کاربر را با در نظر گرفتن سناریوهای دسترسی ممکن، مشترک کنید.

۷. مدیریت یک رویداد push

کد تکمیل شده

قبل از اینکه یاد بگیرید چگونه از طریق backend خود یک پیام push ارسال کنید، باید در نظر بگیرید که وقتی یک کاربر مشترک یک پیام push دریافت می‌کند، واقعاً چه اتفاقی می‌افتد.

وقتی یک پیام فشار (push message) را فعال می‌کنید، مرورگر پیام فشار را دریافت می‌کند، تشخیص می‌دهد که فشار برای کدام سرویس ورکر (service worker) است، آن سرویس ورکر را بیدار می‌کند و یک رویداد فشار (push event) ارسال می‌کند. شما باید به این رویداد گوش دهید و در نتیجه یک اعلان (notification) نمایش دهید.

کد زیر را به فایل 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 احتمالاً جدید است. در یک فایل service worker، self به خود service worker ارجاع می‌دهد.)

وقتی یک پیام فشاری دریافت می‌شود، شنونده رویداد فراخوانی می‌شود و شما با فراخوانی showNotification() در ویژگی registration service worker، یک اعلان ایجاد می‌کنید. showNotification() به یک title نیاز دارد؛ همچنین می‌توانید یک شیء options برای تنظیم پیام بدنه، آیکون و نشان به آن بدهید. (نشان فقط در اندروید در زمان نوشتن این متن استفاده می‌شود.) 

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() است. این متد یک promise می‌گیرد تا مرورگر را قادر سازد تا service worker شما را تا زمانی که promise ارسال شده به آن حل شود، فعال و در حال اجرا نگه دارد.

برای اینکه کد بالا کمی قابل فهم‌تر باشد، می‌توانید آن را به صورت زیر بازنویسی کنید: 

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

حالا که رویداد push را پشت سر گذاشتید، بیایید یک رویداد push را آزمایش کنیم.

امتحانش کن.

با مدیریت رویداد push در سرویس ورکر، می‌توانید یک رویداد push جعلی ایجاد کنید تا ببینید هنگام دریافت پیام چه اتفاقی می‌افتد.

در برنامه وب خود، در پیام‌رسانی مشترک شوید و مطمئن شوید که User IS subscribed را در کنسول مشاهده می‌کنید. در پنل برنامه در DevTools، در زیر تب Service Workers ، روی دکمه «Push» کلیک کنید:

1ee499267eeccd1c.png

بعد از اینکه روی Push کلیک کردید، باید اعلانی مانند این را ببینید:

۳۷۹۱۰۵dfb0ea56d8.png

توجه: اگر این مرحله کار نکرد، سعی کنید سرویس ورکر خود را با استفاده از لینک Unregister در پنل DevTools Application لغو ثبت کنید، صبر کنید تا سرویس ورکر متوقف شود و سپس صفحه را مجدداً بارگذاری کنید.

۸. کلیک اعلان

کد تکمیل شده

اگر روی یکی از این اعلان‌ها کلیک کنید، متوجه خواهید شد که هیچ اتفاقی نمی‌افتد. می‌توانید با گوش دادن به رویدادهای notificationclick در service worker خود، کلیک‌های اعلان را مدیریت کنید.

با اضافه کردن یک شنونده 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();

سپس یک پنجره یا تب جدید باز می‌شود که آدرس اینترنتی https://developers.google.com/web را بارگذاری می‌کند. می‌توانید آن را تغییر دهید. 

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

event.waitUntil() تضمین می‌کند که مرورگر قبل از نمایش پنجره یا تب جدید، سرویس ورکر را خاتمه نمی‌دهد.

امتحانش کن.

دوباره سعی کنید یک پیام فشاری را در DevTools فعال کنید و روی اعلان کلیک کنید. اکنون خواهید دید که اعلان بسته شده و یک برگه جدید باز می‌شود.

۹. ارسال پیام‌های فوری

شما دیدید که برنامه وب شما قادر به نمایش اعلان با استفاده از DevTools است و نحوه بستن اعلان با یک کلیک را بررسی کردید. مرحله بعدی ارسال یک پیام فشار واقعی است.

معمولاً، این کار مستلزم ارسال یک اشتراک از یک صفحه وب به یک backend است. سپس backend با برقراری یک فراخوانی API به نقطه پایانی در اشتراک، یک پیام push را فعال می‌کند.

این مورد خارج از محدوده‌ی این codelab است، اما می‌توانید از سایت همراه ( web-push-codelab.glitch.me ) برای ایجاد یک پیام push واقعی استفاده کنید. متن اشتراک را در پایین صفحه خود قرار دهید:

bb202867962a0249.png

سپس این را در سایت همراه در قسمت متن Subscription to Send To قرار دهید:

a0dd93bc33a9e8cf.png

در قسمت «متن برای ارسال» ، هر رشته‌ای را که می‌خواهید با پیام ارسالی ارسال کنید، اضافه کنید.

روی دکمه ارسال پیام فوری کلیک کنید.

a5e8e89411ec034.png

سپس باید یک پیام ارسالی دریافت کنید. متنی که استفاده کرده‌اید در کنسول ثبت خواهد شد.

f6815a356d4f9aaa.png

این به شما فرصتی می‌دهد تا ارسال و دریافت داده‌ها را آزمایش کنید و در نتیجه اعلان‌ها را دستکاری کنید.

برنامه همراه فقط یک سرور گره است که از کتابخانه web-push برای ارسال پیام استفاده می‌کند. بررسی web-push-libs.org در GitHub برای دیدن کتابخانه‌های موجود برای ارسال پیام‌های push مفید است. این کتابخانه بسیاری از جزئیات مربوط به راه‌اندازی پیام‌های push را مدیریت می‌کند.

شما می‌توانید تمام کدهای مربوط به سایت همراه را اینجا ببینید.

۱۰. لغو اشتراک کاربر

کد تکمیل شده

تنها چیزی که وجود ندارد، قابلیت لغو اشتراک یک کاربر از push است. برای انجام این کار، باید 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()

این تابع یک promise را برمی‌گرداند که در صورت وجود 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() یک promise را برمی‌گرداند، زیرا تکمیل آن می‌تواند مدتی طول بکشد. شما آن promise را برمی‌گردانید تا then() بعدی در زنجیره منتظر پایان unsubscribe() بماند. همچنین در صورتی که فراخوانی unsubscribe() منجر به خطا شود، یک catch handler اضافه می‌کنید. پس از این، می‌توانید رابط کاربری خود را به‌روزرسانی کنید. 

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

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

  updateBtn();
})

امتحانش کن.

شما باید بتوانید در برنامه وب خود روی «فعال کردن پیام‌های ارسالی» یا «غیرفعال کردن پیام‌های ارسالی» کلیک کنید، و گزارش‌ها نشان می‌دهند که کاربر مشترک شده و اشتراک خود را لغو کرده است.

81a07119235b53da.png

۱۱. تمام شد

تبریک می‌گویم که این آزمایشگاه کد را به پایان رساندید!

این آزمایشگاه کد به شما نشان داده است که چگونه می‌توانید با افزودن اعلان‌های فشاری به برنامه وب خود، آن را راه‌اندازی و اجرا کنید. اگر می‌خواهید درباره قابلیت‌های اعلان‌های وب بیشتر بدانید، این اسناد را بررسی کنید .

اگر می‌خواهید اعلان‌های فوری را در سایت خود مستقر کنید، ممکن است علاقه‌مند به افزودن پشتیبانی برای مرورگرهای قدیمی یا مرورگرهای غیر استاندارد که از GCM استفاده می‌کنند، باشید. برای اطلاعات بیشتر اینجا را ببینید .

مطالعه بیشتر

پست‌های وبلاگ مرتبط