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

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

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

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

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

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

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

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

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

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

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

پشته برنامه

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

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

راه‌اندازی

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

  1. در ترمینال، npx web-push generate-vapid-keys را اجرا کنید. مقادیر کلید خصوصی و کلید عمومی را کپی کنید.
  2. .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"
    
  3. public/index.js را باز کنید.

  4. به جای VAPID_PUBLIC_KEY_VALUE_HERE ، مقدار کلید عمومی خود را وارد کنید.

مدیریت اشتراک‌ها

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

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

اطلاعات اشتراک جدید را ذخیره کنید

  1. در تب برنامه، روی ثبت نام سرویس ورکر کلیک کنید. در کادر وضعیت، باید پیامی مشابه این را ببینید:

    Service worker registered. Scope: https://example.com
    
  2. در برگه برنامه، روی «اشتراک برای ارسال اعلان» کلیک کنید. مرورگر یا سیستم عامل شما ممکن است از شما بپرسد که آیا می‌خواهید وب‌سایت برای شما اعلان‌های فوری ارسال کند یا خیر.

  3. روی «مجاز» (یا عبارت معادل آن که توسط مرورگر یا سیستم عامل شما استفاده می‌شود) کلیک کنید. در کادر وضعیت، باید پیامی مانند این را ببینید:

    Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…
    
  4. ترمینال را باز کنید تا گزارش‌ها را ببینید. باید /add-subscription و به دنبال آن مقداری داده را ببینید. /add-subscription آدرسی است که کلاینت هنگام درخواست اشتراک در دریافت اعلان‌های فوری، درخواست POST را به آن ارسال می‌کند. داده‌هایی که در ادامه می‌آیند، اطلاعات اشتراک کلاینت هستند که باید ذخیره کنید.

  5. server.js باز کنید.

  6. منطق کنترل‌کننده مسیر /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);
});