Codelab: یک سرویس گیرنده اعلان فشار بسازید

کیت جفریز
Kate Jeffreys
کیس باسک
Kayce Basques
X GitHub

این آزمایشگاه کد، گام به گام، نحوه ساخت یک کلاینت اعلان فشاری را به شما نشان می‌دهد. در پایان این آزمایشگاه کد، کلاینتی خواهید داشت که:

  • کاربر را برای دریافت اعلان‌های فوری (Push Notifications) مشترک می‌کند.
  • پیام‌های فوری را دریافت می‌کند و آنها را به عنوان اعلان نمایش می‌دهد.
  • کاربر را از دریافت اعلان‌های فوری (push notifications) لغو اشتراک می‌کند.

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

کد سرور این آزمایشگاه کد از قبل کامل شده است. شما فقط کلاینت را در این آزمایشگاه کد پیاده‌سازی خواهید کرد. برای یادگیری نحوه پیاده‌سازی یک سرور اعلان فشار، به Codelab: Build a push notification server مراجعه کنید.

سازگاری با مرورگرها

این codelab با سیستم عامل‌ها و مرورگرهای ترکیبی زیر کار می‌کند:

  • ویندوز: کروم، اج
  • macOS: کروم، فایرفاکس
  • اندروید: کروم، فایرفاکس

این codelab با سیستم عامل‌های زیر (یا ترکیب سیستم عامل و مرورگر) کار نمی‌کند :

  • macOS: بریو، اج، سافاری
  • آی‌او‌اس

راه‌اندازی

برای قابل ویرایش کردن پروژه، روی «Remix to Edit» کلیک کنید.

تنظیم احراز هویت

قبل از اینکه بتوانید اعلان‌های پوش نوتیفیکیشن را فعال کنید، باید سرور و کلاینت خود را با کلیدهای احراز هویت تنظیم کنید. برای اطلاع از دلیل آن، به بخش «امضای درخواست‌های پروتکل وب پوش» مراجعه کنید. معمولاً، شما اطلاعات محرمانه را در یک فایل .env ، مشابه این، ذخیره می‌کنید.

VAPID_PUBLIC_KEY="BKiwTvD9HA…" VAPID_PRIVATE_KEY="4mXG9jBUaU…" VAPID_SUBJECT="mailto:[email protected]"
  1. public/index.js را باز کنید.
  2. به جای VAPID_PUBLIC_KEY_VALUE_HERE ، مقدار کلید عمومی خود را وارد کنید.

ثبت نام یک کارگر خدماتی

کلاینت شما برای دریافت و نمایش اعلان‌ها به یک سرویس ورکر نیاز دارد. بهتر است سرویس ورکر را در اسرع وقت ثبت کنید. برای اطلاعات بیشتر به بخش «دریافت و نمایش پیام‌های ارسالی به عنوان اعلان» مراجعه کنید.

  1. کد زیر را جایگزین کامنت // TODO add startup logic here کنید:

    if ('serviceWorker' in navigator && 'PushManager' in window) {   navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {     console.info('Service worker was registered.');     console.info({serviceWorkerRegistration});   }).catch(error => {     console.error('An error occurred while registering the service worker.');     console.error(error);   });   subscribeButton.disabled = false; } else {   console.error('Browser does not support service workers or push messages.'); }  subscribeButton.addEventListener('click', subscribeButtonHandler); unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);

  2. در Chrome، DevTools Console را باز کنید .

  3. شما باید پیام Service worker was registered. logged to the Console» را ببینید.

درخواست مجوز اعلان‌های فوری

شما هرگز نباید هنگام بارگذاری صفحه، درخواست مجوز برای ارسال اعلان‌های فوری (push notification) کنید. در عوض، رابط کاربری شما باید از کاربر بپرسد که آیا می‌خواهد اعلان‌های فوری دریافت کند یا خیر. پس از تأیید صریح آنها (مثلاً با کلیک روی یک دکمه)، می‌توانید فرآیند رسمی دریافت مجوز اعلان فوری از مرورگر را آغاز کنید.

  1. در public/index.js کد زیر را جایگزین کامنت // TODO در subscribeButtonHandler() کنید:

    // Prevent the user from clicking the subscribe button multiple times. subscribeButton.disabled = true; const result = await Notification.requestPermission(); if (result === 'denied') {   console.error('The user explicitly denied the permission request.');   return; } if (result === 'granted') {   console.info('The user accepted the permission request.'); }

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

  3. گزینه Allow (یا عبارت معادل آن که توسط مرورگر یا سیستم عامل شما استفاده می‌شود) را انتخاب کنید. در کنسول باید پیامی مبنی بر پذیرفته شدن یا رد شدن درخواست مشاهده کنید.

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

فرآیند اشتراک شامل تعامل با یک سرویس وب است که توسط فروشنده مرورگر کنترل می‌شود و سرویس پوش (push service) نام دارد. پس از دریافت اطلاعات اشتراک پوش نوتیفیکیشن، باید آن را به یک سرور ارسال کنید و سرور آن را در یک پایگاه داده برای مدت طولانی ذخیره کند.

  1. کد هایلایت شده زیر را به subscribeButtonHandler() اضافه کنید:

    subscribeButton.disabled = true; const result = await Notification.requestPermission(); if (result === 'denied') {   console.error('The user explicitly denied the permission request.');   return; } if (result === 'granted') {   console.info('The user accepted the permission request.'); } const registration = await navigator.serviceWorker.getRegistration(); const subscribed = await registration.pushManager.getSubscription(); if (subscribed) {   console.info('User is already subscribed.');   notifyMeButton.disabled = false;   unsubscribeButton.disabled = false;   return; } const subscription = await registration.pushManager.subscribe({   userVisibleOnly: true,   applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY) }); notifyMeButton.disabled = false; fetch('/add-subscription', {   method: 'POST',   headers: {     'Content-Type': 'application/json'   },   body: JSON.stringify(subscription) });

گزینه userVisibleOnly باید true باشد. ممکن است روزی بتوان پیام‌ها را بدون نمایش اعلان‌های قابل مشاهده برای کاربر ( پوشش‌های بی‌صدا ) ارسال کرد، اما مرورگرها به دلیل نگرانی‌های مربوط به حریم خصوصی، این قابلیت را اجازه نمی‌دهند.

مقدار applicationServerKey به یک تابع کاربردی متکی است که یک رشته base64 را به Uint8Array تبدیل می‌کند. این مقدار برای احراز هویت بین سرور شما و سرویس push استفاده می‌شود.

لغو اشتراک از اعلان‌های فوری

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

  • کد زیر را جایگزین کامنت // TODO در unsubscribeButtonHandler() کنید: 
const registration = await navigator.serviceWorker.getRegistration(); const subscription = await registration.pushManager.getSubscription(); fetch('/remove-subscription', {   method: 'POST',   headers: {     'Content-Type': 'application/json'   },   body: JSON.stringify({endpoint: subscription.endpoint}) }); const unsubscribed = await subscription.unsubscribe(); if (unsubscribed) {   console.info('Successfully unsubscribed from push notifications.');   unsubscribeButton.disabled = true;   subscribeButton.disabled = false;   notifyMeButton.disabled = true; }

دریافت پیام فوری و نمایش آن به عنوان اعلان

همانطور که قبلاً ذکر شد، شما به یک سرویس ورکر نیاز دارید تا دریافت و نمایش پیام‌هایی که از سرور شما به کلاینت ارسال شده‌اند را مدیریت کند. برای جزئیات بیشتر به بخش «دریافت و نمایش پیام‌های ارسال شده به عنوان اعلان» مراجعه کنید.

  1. public/service-worker.js را باز کنید و کد زیر را جایگزین کامنت // TODO در رویداد push مربوط به service worker کنید:

    let data = event.data.json(); const image = 'logo.png'; const options = {   body: data.options.body,   icon: image } self.registration.showNotification(   data.title,   options );

  2. به برگه برنامه برگردید.

  3. روی «به من اطلاع بده » کلیک کنید. باید یک اعلان فوری دریافت کنید.

  4. آدرس اینترنتی (URL) تب برنامه خود را در سایر مرورگرهای پشتیبانی‌شده باز کنید. از طریق گردش کار اشتراک، روی «اطلاع‌رسانی به همه» کلیک کنید. باید در همه آنها اعلان فشاری یکسانی دریافت کنید.

شما می‌توانید اعلان را به روش‌های زیادی سفارشی کنید. برای کسب اطلاعات بیشتر، به پارامترهای ServiceWorkerRegistration.showNotification() مراجعه کنید.

باز کردن یک URL وقتی کاربر روی یک اعلان کلیک می‌کند

در دنیای واقعی، احتمالاً از اعلان به عنوان راهی برای جذب مجدد کاربر و ترغیب او به بازدید از سایت خود استفاده خواهید کرد. برای انجام این کار، باید سرویس ورکر خود را کمی بیشتر پیکربندی کنید.

  1. کد زیر را جایگزین کامنت // TODO در هندلر رویداد notificationclick سرویس ورکر کنید:

    event.notification.close(); event.waitUntil(self.clients.openWindow('https://web.dev'));

  2. به برگه برنامه برگردید، یک اعلان دیگر برای خودتان ارسال کنید و سپس روی اعلان کلیک کنید. مرورگر شما باید یک برگه جدید باز کند و https://web.dev بارگذاری کند.

مراحل بعدی