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

کیت جفریس
Kate Jeffreys
کیسی باسکی

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

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

این نرم افزار کد روی کمک به یادگیری شما از طریق انجام دادن تمرکز دارد و در مورد مفاهیم زیاد صحبت نمی کند. بررسی کنید اعلان‌های فشار چگونه کار می‌کنند؟ برای یادگیری مفاهیم فشار اعلان

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

برای مشاهده کد کامل ، push-notifications-client-codelab-complete ( source ) را بررسی کنید.

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

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

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

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

  • macOS: Brave، Edge، Safari
  • iOS

راه اندازی

یک کپی قابل ویرایش از کد دریافت کنید

ویرایشگر کدی که در سمت راست این دستورالعمل‌ها مشاهده می‌کنید، در سراسر این کد، رابط کاربری Glitch نامیده می‌شود.

  1. روی Remix to Edit کلیک کنید تا پروژه قابل ویرایش باشد.

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

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

  1. در رابط کاربری Glitch روی Tools و سپس روی Terminal کلیک کنید تا ترمینال Glitch باز شود.
  2. در ترمینال Glitch، npx web-push generate-vapid-keys اجرا کنید. مقادیر کلید خصوصی و کلید عمومی را کپی کنید.
  3. در رابط کاربری Glitch .env را باز کنید و VAPID_PUBLIC_KEY و VAPID_PRIVATE_KEY را به‌روزرسانی کنید. VAPID_SUBJECT را روی mailto:test@test.test تنظیم کنید. همه این مقادیر باید در گیومه های دوتایی پیچیده شوند. پس از انجام به‌روزرسانی‌ها، فایل .env شما باید شبیه به این باشد:
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. ترمینال Glitch را ببندید.
  1. public/index.js را باز کنید.
  2. مقدار کلید عمومی خود را جایگزین VAPID_PUBLIC_KEY_VALUE_HERE کنید.

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

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

  1. کامنت // TODO add startup logic here با کد زیر جایگزین کنید:
// 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);
  1. برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید تمام صفحه .
  1. «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
  2. روی تب Console کلیک کنید. باید پیام Service worker was registered. وارد کنسول شده است.

درخواست مجوز اعلان فشار

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

  1. در رابط کاربری Glitch روی View Source کلیک کنید تا به کد خود بازگردید.
  2. در public/index.js کامنت // TODO در subscribeButtonHandler() را با کد زیر جایگزین کنید:
// TODO
// 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.');
}
  1. به برگه برنامه برگردید و روی Subscribe کلیک کنید تا فشار دهید . مرورگر یا سیستم عامل شما احتمالاً از شما می پرسد که آیا می خواهید به وب سایت اجازه دهید برای شما اعلان های فشار ارسال کند. روی Allow (یا هر عبارتی معادلی که مرورگر/OS شما استفاده می‌کند) کلیک کنید. در کنسول باید پیامی را ببینید که نشان می دهد درخواست پذیرفته شده یا رد شده است.

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

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

  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 تبدیل می کند. این مقدار برای احراز هویت بین سرور شما و سرویس فشار استفاده می شود.

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

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

  1. کامنت // TODO در unsubscribeButtonHandler() با کد زیر جایگزین کنید: 
// TODO
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 worker's service با کد زیر جایگزین کنید:
// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);
  1. به برگه برنامه برگردید.
  2. روی Notify me کلیک کنید. شما باید یک اعلان فشار دریافت کنید.
  3. URL برگه برنامه خود را در مرورگرهای دیگر (یا حتی دستگاه‌های دیگر) باز کنید، روند کار اشتراک را طی کنید و سپس روی Notify all کلیک کنید. شما باید همان اعلان فشار را در تمام مرورگرهایی که مشترک شده‌اید دریافت کنید. برای مشاهده لیستی از ترکیبات مرورگر/سیستم عاملی که کار می کنند یا کار نمی کنند، به سازگاری مرورگر مراجعه کنید.

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

هنگامی که کاربر روی یک اعلان کلیک می کند، یک URL باز کنید

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

  1. کامنت // TODO در کنترل کننده رویداد notificationclick سرویس‌کار با کد زیر جایگزین کنید:
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
  1. به برگه برنامه برگردید، اعلان دیگری برای خود ارسال کنید و سپس روی اعلان کلیک کنید. مرورگر شما باید یک برگه جدید باز کند و https://web.dev را بارگیری کند.

مراحل بعدی