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

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

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

  • اشتراک‌های اعلان‌های فشاری را ردیابی می‌کند (یعنی سرور یک رکورد پایگاه داده جدیدی ایجاد می‌کند که مشتری برای اعلان‌های فشاری شرکت می‌کند، و زمانی که مشتری انصراف می‌دهد، رکورد پایگاه داده موجود را حذف می‌کند)
  • یک اعلان فشار به یک مشتری واحد ارسال می کند
  • یک اعلان فشار به همه مشتریان مشترک ارسال می کند

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

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

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

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

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

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

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

  • macOS: Brave، Edge، Safari
  • iOS

پشته برنامه

  • سرور در بالای Express.js ساخته شده است.
  • کتابخانه web-push Node.js تمام منطق اعلان فشار را کنترل می کند.
  • داده های اشتراک در یک فایل JSON با استفاده از lowdb نوشته می شود.

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

راه اندازی

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

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

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

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

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

  1. ترمینال Glitch را با کلیک روی Tools و سپس روی Terminal باز کنید.
  2. در ترمینال، npx web-push generate-vapid-keys اجرا کنید. مقادیر کلید خصوصی و کلید عمومی را کپی کنید.
  3. .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. برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید تمام صفحه .
  1. روی Register service worker در تب app کلیک کنید. در کادر وضعیت باید پیامی مشابه این را ببینید: 
Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/
  1. در برگه برنامه روی Subscribe کلیک کنید تا فشار دهید . مرورگر یا سیستم عامل شما احتمالاً از شما می پرسد که آیا می خواهید به وب سایت اجازه دهید برای شما اعلان های فشار ارسال کند. روی Allow (یا هر عبارتی معادلی که مرورگر/OS شما استفاده می‌کند) کلیک کنید. در کادر وضعیت باید پیامی مشابه این را ببینید: 
Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…
  1. با کلیک روی مشاهده منبع در رابط کاربری Glitch به کد خود بازگردید.
  2. با کلیک بر روی Tools و سپس روی Logs، Glitch Logs را باز کنید. شما باید /add-subscription ببینید و سپس برخی از داده ها را مشاهده کنید. /add-subscription آدرس اینترنتی است که وقتی مشتری می‌خواهد در اعلان‌های فشاری مشترک شود، درخواست POST را برای آن ارسال می‌کند. داده‌های زیر اطلاعات اشتراک مشتری است که باید ذخیره کنید.
  3. server.js باز کنید.
  4. منطق کنترل مسیر /add-subscription را با کد زیر به روز کنید: 
app.post('/add-subscription', (request, response) => {
  console.log('/add-subscription');
  console.log(request.body);
  console.log(`Subscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .push(request.body)
    .write();
  response.sendStatus(200);
});

اطلاعات اشتراک قدیمی را حذف کنید

  1. به برگه برنامه برگردید.
  2. روی لغو اشتراک از فشار کلیک کنید.
  3. یک بار دیگر به گزارش های خطا نگاه کنید. باید /remove-subscription و به دنبال آن اطلاعات اشتراک مشتری را ببینید.
  4. منطق کنترل کننده مسیر /remove-subscription را با کد زیر به روز کنید: 
app.post('/remove-subscription', (request, response) => {
  console.log('/remove-subscription');
  console.log(request.body);
  console.log(`Unsubscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .remove({endpoint: request.body.endpoint})
    .write();
  response.sendStatus(200);
});

ارسال اعلان ها

همانطور که در Send a Push message توضیح داده شد، سرور شما در واقع پیام های فشار را مستقیماً به مشتریان ارسال نمی کند. بلکه برای انجام این کار به یک سرویس فشار متکی است. سرور شما اساساً با درخواست خدمات وب (درخواست پروتکل فشار وب) به وب سرویس (سرویس فشار) متعلق به فروشنده مرورگری که کاربر شما از آن استفاده می کند، فرآیند ارسال پیام به مشتریان را آغاز می کند.

  1. منطق کنترل مسیر /notify-me را با کد زیر به روز کنید: 
app.post('/notify-me', (request, response) => {
  console.log('/notify-me');
  console.log(request.body);
  console.log(`Notifying ${request.body.endpoint}`);
  const subscription = 
      db.get('subscriptions').find({endpoint: request.body.endpoint}).value();
  sendNotifications([subscription]);
  response.sendStatus(200);
});
  1. تابع sendNotifications() را با کد زیر به روز کنید: 
function sendNotifications(subscriptions) {
  // TODO
  // Create the notification content.
  const notification = JSON.stringify({
    title: "Hello, Notifications!",
    options: {
      body: `ID: ${Math.floor(Math.random() * 100)}`
    }
  });
  // Customize how the push service should attempt to deliver the push message.
  // And provide authentication information.
  const options = {
    TTL: 10000,
    vapidDetails: vapidDetails
  };
  // Send a push message to each client specified in the subscriptions array.
  subscriptions.forEach(subscription => {
    const endpoint = subscription.endpoint;
    const id = endpoint.substr((endpoint.length - 8), endpoint.length);
    webpush.sendNotification(subscription, notification, options)
      .then(result => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Result: ${result.statusCode}`);
      })
      .catch(error => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Error: ${error} `);
      });
  });
}
  1. منطق /notify-all route handler را با کد زیر به روز کنید: 
app.post('/notify-all', (request, response) => {
  console.log('/notify-all');
  response.sendStatus(200);
  console.log('Notifying all subscribers');
  const subscriptions =
      db.get('subscriptions').cloneDeep().value();
  if (subscriptions.length > 0) {
    sendNotifications(subscriptions);
    response.sendStatus(200);
  } else {
    response.sendStatus(409);
  }
});
  1. به برگه برنامه برگردید.
  2. برای فشار مجدد روی لغو اشتراک از فشار کلیک کنید و سپس روی Subscribe کلیک کنید. این فقط به این دلیل ضروری است که همانطور که قبلا ذکر شد، هر بار که کد را ویرایش می کنید، Glitch پروژه را مجدداً راه اندازی می کند و پروژه برای حذف پایگاه داده در هنگام راه اندازی پیکربندی می شود.
  3. روی Notify me کلیک کنید. شما باید یک اعلان فشار دریافت کنید. عنوان باید Hello, Notifications! و بدنه باید ID: <ID> که در آن <ID> یک عدد تصادفی است.
  4. برنامه خود را در مرورگرها یا دستگاه های دیگر باز کنید و سعی کنید برای ارسال اعلان ها مشترک آنها شوید و سپس روی دکمه Notify all کلیک کنید. شما باید در همه دستگاه های مشترک خود اعلان یکسانی دریافت کنید (یعنی شناسه در بدنه اعلان فشار باید یکسان باشد).

مراحل بعدی

،

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

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

  • اشتراک‌های اعلان‌های فشاری را ردیابی می‌کند (یعنی سرور یک رکورد پایگاه داده جدیدی ایجاد می‌کند که مشتری برای اعلان‌های فشاری شرکت می‌کند، و زمانی که مشتری انصراف می‌دهد، رکورد پایگاه داده موجود را حذف می‌کند)
  • یک اعلان فشار به یک مشتری واحد ارسال می کند
  • یک اعلان فشار به همه مشتریان مشترک ارسال می کند

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

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

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

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

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

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

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

  • macOS: Brave، Edge، Safari
  • iOS

پشته برنامه

  • سرور در بالای Express.js ساخته شده است.
  • کتابخانه web-push Node.js تمام منطق اعلان فشار را کنترل می کند.
  • داده های اشتراک در یک فایل JSON با استفاده از lowdb نوشته می شود.

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

راه اندازی

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

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

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

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

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

  1. ترمینال Glitch را با کلیک روی Tools و سپس روی Terminal باز کنید.
  2. در ترمینال، npx web-push generate-vapid-keys اجرا کنید. مقادیر کلید خصوصی و کلید عمومی را کپی کنید.
  3. .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. برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید تمام صفحه .
  1. روی Register service worker در تب app کلیک کنید. در کادر وضعیت باید پیامی مشابه این را ببینید: 
Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/
  1. در برگه برنامه روی Subscribe کلیک کنید تا فشار دهید . مرورگر یا سیستم عامل شما احتمالاً از شما می پرسد که آیا می خواهید به وب سایت اجازه دهید برای شما اعلان های فشار ارسال کند. روی Allow (یا هر عبارتی معادلی که مرورگر/OS شما استفاده می‌کند) کلیک کنید. در کادر وضعیت باید پیامی مشابه این را ببینید: 
Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…
  1. با کلیک روی مشاهده منبع در رابط کاربری Glitch به کد خود بازگردید.
  2. با کلیک بر روی Tools و سپس روی Logs، Glitch Logs را باز کنید. شما باید /add-subscription ببینید و سپس برخی از داده ها را مشاهده کنید. /add-subscription آدرس اینترنتی است که وقتی مشتری می‌خواهد در اعلان‌های فشاری مشترک شود، درخواست POST را برای آن ارسال می‌کند. داده‌های زیر اطلاعات اشتراک مشتری است که باید ذخیره کنید.
  3. server.js باز کنید.
  4. منطق کنترل مسیر /add-subscription را با کد زیر به روز کنید: 
app.post('/add-subscription', (request, response) => {
  console.log('/add-subscription');
  console.log(request.body);
  console.log(`Subscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .push(request.body)
    .write();
  response.sendStatus(200);
});

اطلاعات اشتراک قدیمی را حذف کنید

  1. به برگه برنامه برگردید.
  2. روی لغو اشتراک از فشار کلیک کنید.
  3. یک بار دیگر به گزارش های خطا نگاه کنید. باید /remove-subscription و به دنبال آن اطلاعات اشتراک مشتری را ببینید.
  4. منطق کنترل کننده مسیر /remove-subscription را با کد زیر به روز کنید: 
app.post('/remove-subscription', (request, response) => {
  console.log('/remove-subscription');
  console.log(request.body);
  console.log(`Unsubscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .remove({endpoint: request.body.endpoint})
    .write();
  response.sendStatus(200);
});

ارسال اعلان ها

همانطور که در Send a Push message توضیح داده شد، سرور شما در واقع پیام های فشار را مستقیماً به مشتریان ارسال نمی کند. بلکه برای انجام این کار به یک سرویس فشار متکی است. سرور شما اساساً با درخواست خدمات وب (درخواست پروتکل فشار وب) به وب سرویس (سرویس فشار) متعلق به فروشنده مرورگری که کاربر شما از آن استفاده می کند، فرآیند ارسال پیام به مشتریان را آغاز می کند.

  1. منطق کنترل مسیر /notify-me را با کد زیر به روز کنید: 
app.post('/notify-me', (request, response) => {
  console.log('/notify-me');
  console.log(request.body);
  console.log(`Notifying ${request.body.endpoint}`);
  const subscription = 
      db.get('subscriptions').find({endpoint: request.body.endpoint}).value();
  sendNotifications([subscription]);
  response.sendStatus(200);
});
  1. تابع sendNotifications() را با کد زیر به روز کنید: 
function sendNotifications(subscriptions) {
  // TODO
  // Create the notification content.
  const notification = JSON.stringify({
    title: "Hello, Notifications!",
    options: {
      body: `ID: ${Math.floor(Math.random() * 100)}`
    }
  });
  // Customize how the push service should attempt to deliver the push message.
  // And provide authentication information.
  const options = {
    TTL: 10000,
    vapidDetails: vapidDetails
  };
  // Send a push message to each client specified in the subscriptions array.
  subscriptions.forEach(subscription => {
    const endpoint = subscription.endpoint;
    const id = endpoint.substr((endpoint.length - 8), endpoint.length);
    webpush.sendNotification(subscription, notification, options)
      .then(result => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Result: ${result.statusCode}`);
      })
      .catch(error => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Error: ${error} `);
      });
  });
}
  1. منطق /notify-all route handler را با کد زیر به روز کنید: 
app.post('/notify-all', (request, response) => {
  console.log('/notify-all');
  response.sendStatus(200);
  console.log('Notifying all subscribers');
  const subscriptions =
      db.get('subscriptions').cloneDeep().value();
  if (subscriptions.length > 0) {
    sendNotifications(subscriptions);
    response.sendStatus(200);
  } else {
    response.sendStatus(409);
  }
});
  1. به برگه برنامه برگردید.
  2. برای فشار مجدد روی لغو اشتراک از فشار کلیک کنید و سپس روی Subscribe کلیک کنید. این فقط به این دلیل ضروری است که همانطور که قبلا ذکر شد، هر بار که کد را ویرایش می کنید، Glitch پروژه را مجدداً راه اندازی می کند و پروژه برای حذف پایگاه داده در هنگام راه اندازی پیکربندی می شود.
  3. روی Notify me کلیک کنید. شما باید یک اعلان فشار دریافت کنید. عنوان باید Hello, Notifications! و بدنه باید ID: <ID> که در آن <ID> یک عدد تصادفی است.
  4. برنامه خود را در مرورگرها یا دستگاه های دیگر باز کنید و سعی کنید برای ارسال اعلان ها مشترک آنها شوید و سپس روی دکمه Notify all کلیک کنید. شما باید در همه دستگاه های مشترک خود اعلان یکسانی دریافت کنید (یعنی شناسه در بدنه اعلان فشار باید یکسان باشد).

مراحل بعدی