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

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

Kayce Basques

Matt Gaunt

اعلان‌های فشاری چیستند؟

پیام‌های فشاری شما را قادر می‌سازند تا حتی زمانی که کاربران از وب‌سایت شما استفاده نمی‌کنند، اطلاعات را به آنها ارائه دهید. به این پیام‌ها پیام‌های فشاری می‌گویند زیرا می‌توانید اطلاعات را حتی زمانی که کاربران فعال نیستند، به آنها "فشار" دهید. برای درک بیشتر این مفهوم، فناوری فشاری را با فناوری کشش (Pull) مقایسه کنید.

اعلان‌ها (Notifications) اطلاعات مختصری را به کاربر ارائه می‌دهند. وب‌سایت‌ها می‌توانند از اعلان‌ها برای اطلاع‌رسانی به کاربران در مورد رویدادهای مهم و حساس به زمان یا اقداماتی که کاربر باید انجام دهد، استفاده کنند. ظاهر و حس اعلان‌ها بین پلتفرم‌ها متفاوت است:

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

چرا از اعلان‌های فشاری استفاده کنیم؟

• برای کاربران، اعلان‌های فوری راهی برای دریافت اطلاعات به‌موقع ، مرتبط و دقیق هستند.
• برای شما (صاحب وب‌سایت)، اعلان‌های فوری راهی برای افزایش تعامل کاربر هستند.

اعلان‌های فشاری چگونه کار می‌کنند؟

در سطح بالا، مراحل کلیدی برای پیاده‌سازی اعلان‌های فوری عبارتند از:

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

بقیه این صفحه این مراحل را با جزئیات بیشتری توضیح می‌دهد.

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

ابتدا، وب‌سایت شما باید اجازه کاربر را برای ارسال اعلان‌های فوری دریافت کند. این کار باید با یک حرکت کاربر، مانند کلیک کردن روی دکمه بله در کنار « Do you want to receive push notifications? فعال شود. پس از تأیید، تابع Notification.requestPermission() را فراخوانی کنید. سیستم عامل یا مرورگر دستگاه کاربر احتمالاً نوعی رابط کاربری را برای تأیید رسمی اینکه کاربر می‌خواهد اعلان‌های فوری را دریافت کند، ارائه می‌دهد. این رابط کاربری در پلتفرم‌های مختلف متفاوت است.

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

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

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

ارسال پیام فوری

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

• چه داده‌هایی را در پیام قرار دهیم.
• به کدام کلاینت پیام ارسال شود.
• دستورالعمل‌هایی در مورد نحوه‌ی ارسال پیام توسط سرویس پوش. برای مثال، می‌توانید مشخص کنید که سرویس پوش پس از 10 دقیقه دیگر اقدام به ارسال پیام نکند.

معمولاً شما درخواست پروتکل web push را از طریق سروری که کنترل می‌کنید، ارسال می‌کنید. البته، سرور شما مجبور نیست خودش درخواست خام وب سرویس را بسازد. کتابخانه‌هایی وجود دارند که می‌توانند این کار را برای شما انجام دهند، مانند web-push-libs . اما مکانیسم اساسی، درخواست وب سرویس از طریق HTTP است.

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

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

با این حال، باید مطمئن شوید که درخواست پروتکل web push را به سرویس push صحیح ارسال می‌کنید. داده‌های PushSubscription که مرورگر در طول فرآیند اشتراک به شما بازگردانده است، این اطلاعات را فراهم می‌کند. یک شیء PushSubscription به شکل زیر است:

{
  "endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
  "expirationTime": null,
  "keys": {
    "p256dh": "BGyyVt9FFV…",
    "auth": "R9sidzkcdf…"
  }
}

دامنه endpoint اساساً سرویس ارسال پیام است. مسیر endpoint ، اطلاعات شناسه کلاینت است که به سرویس ارسال پیام کمک می‌کند تا دقیقاً مشخص کند که پیام را به کدام کلاینت ارسال کند.

keys برای رمزگذاری استفاده می‌شوند که در ادامه توضیح داده خواهد شد.

پیام فشار را رمزگذاری کنید

داده‌هایی که به یک سرویس پوش ارسال می‌کنید باید رمزگذاری شوند. این امر مانع از آن می‌شود که سرویس پوش بتواند داده‌هایی را که برای کلاینت ارسال می‌کنید مشاهده کند. به یاد داشته باشید که فروشنده مرورگر تصمیم می‌گیرد از چه سرویس پوشی استفاده کند و آن سرویس پوش می‌تواند از نظر تئوری ناامن یا غیرایمن باشد. سرور شما باید از keys ارائه شده در PushSubscription برای رمزگذاری درخواست‌های پروتکل پوش وب خود استفاده کند.

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

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

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

• شما کلید خصوصی و عمومی را به عنوان یک کار یکباره تولید می‌کنید. ترکیب کلید خصوصی و عمومی به عنوان کلیدهای سرور برنامه شناخته می‌شود. همچنین ممکن است آنها را با نام کلیدهای VAPID ببینید. VAPID مشخصاتی است که این فرآیند احراز هویت را تعریف می‌کند.
• وقتی شما یک کلاینت را برای دریافت اعلان‌ها از کد جاوا اسکریپت خود ثبت نام می‌کنید، در واقع کلید عمومی خود را ارائه می‌دهید. وقتی سرویس ارسال اعلان، یک endpoint برای دستگاه ایجاد می‌کند، کلید عمومی ارائه شده را با endpoint مرتبط می‌کند.
• وقتی یک درخواست پروتکل web push ارسال می‌کنید، مقداری اطلاعات JSON را با کلید خصوصی خود امضا می‌کنید.
• وقتی سرویس پوش درخواست پروتکل وب پوش شما را دریافت می‌کند، از کلید عمومی ذخیره شده برای تأیید اعتبار اطلاعات امضا شده استفاده می‌کند. اگر امضا معتبر باشد، سرویس پوش می‌داند که درخواست از سروری با کلید خصوصی منطبق ارسال شده است.

سفارشی‌سازی نحوه‌ی ارسال پیام‌های فوری

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

• مدت زمان زنده ماندن (TTL) یک پیام، که مشخص می‌کند سرویس ارسال پیام چه مدت باید برای ارسال آن تلاش کند.
• فوریت پیام، که در مواردی که سرویس ارسال پیام (push) با ارسال پیام‌های با اولویت بالا، در حال حفظ عمر باتری کلاینت است، مفید است.
• موضوع یک پیام، که هرگونه پیام در انتظار دریافت از همان موضوع را با آخرین پیام جایگزین می‌کند.

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

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

1. کلاینت آنلاین می‌شود و سرویس ارسال، پیام ارسال را ارسال می‌کند.
2. پیام منقضی می‌شود.

وقتی مرورگر کلاینت یک پیام ارسالی (push) دریافت می‌کند، داده‌های پیام ارسالی را رمزگشایی کرده و یک رویداد push event) را به سرویس ورکر شما ارسال می‌کند. سرویس ورکر اساساً کد جاوا اسکریپتی است که می‌تواند در پس‌زمینه اجرا شود، حتی زمانی که وب‌سایت شما باز نیست یا مرورگر بسته است. در کنترل‌کننده رویداد push سرویس ورکر خود، ServiceWorkerRegistration.showNotification() را برای نمایش اطلاعات به عنوان یک اعلان فراخوانی می‌کنید.

کجا برویم؟

• مرور کلی اعلان‌های وب
• نحوه کار پوش
• عضویت کاربر
• تجربه کاربری مجوزها
• ارسال پیام با کتابخانه‌های Web Push
• پروتکل فشار وب
• مدیریت پیام‌ها
• نمایش یک اعلان
• رفتار اعلان
• الگوهای رایج اعلان‌ها
• سوالات متداول در مورد اعلان‌های فشاری
• مشکلات رایج و گزارش اشکالات

آزمایشگاه‌های کد

• یک کلاینت اعلان فشاری بسازید
• ساخت سرور اعلان‌های فوری