چطور اعلان به اپ اضافه کنیم: درون‌برنامه‌ای، ایمیل و پوش
برای افزودن اعلان به یک وب‌اپ، با اعلان‌های درون‌برنامه‌ای شروع کنید: یک جدول اعلان در پایگاه داده و یک آیکون زنگوله که موارد خوانده‌نشده را نشان می‌دهد. برای چیزهایی که مردم باید وقتی دور هستند بدانند، ایمیل اضافه کنید، با یک ارائه‌دهنده ایمیل؛ و وب پوش را فقط وقتی اضافه کنید که هشدارهای به‌موقع مهم‌اند، چون به service worker، اجازه کاربر و روی آیفون، ذخیره اپ در صفحه اصلی نیاز دارد. هر کانالی که استفاده می‌کنید، همه اعلان‌ها را در یک جا روی سرور بسازید و بگذارید کاربران انتخاب کنند چه چیزی دریافت کنند.
این راهنما کانال‌ها را مقایسه می‌کند، یک معماری ساده نشان می‌دهد و درخواست‌هایی برای استفاده با یک ساز اپ هوش مصنوعی می‌دهد.
مقایسه کانال‌های اصلی
| کانال | کاربر را کی می‌رساند | تلاش راه‌اندازی | هزینه اجرا | بهترین کاربرد |
|---|---|---|---|---|
| درون‌برنامه‌ای (زنگوله، توست) | وقتی در حال استفاده از اپ شماست | کم | هیچ، جز پایگاه داده | فعالیت، منشن‌ها، تغییر وضعیت |
| ایمیل | هر وقت ایمیلش را چک کند | متوسط: ارائه‌دهنده، تنظیم دامنه | هزینه هر ایمیل از ارائه‌دهنده | رسید، خلاصه‌ها، هر چیز مهم |
| وب پوش | مرورگر یا وب‌اپ نصب‌شده، حتی وقتی بسته است | متوسط تا زیاد | معمولاً ارسال رایگان | هشدارهای حساس به زمان |
| پیامک | تقریباً همیشه | متوسط؛ قوانین رضایت اعمال می‌شود | هزینه هر پیام | یادآوری نوبت، هشدار فوری |
| ابزارهای چت (Slack، Teams) | وقتی سر کار هستند | کم تا متوسط | معمولاً رایگان | ابزارهای داخلی و هشدار تیمی |
بیشتر اپ‌ها به درون‌برنامه‌ای به‌علاوه ایمیل نیاز دارند. پوش و پیامک وقتی ارزش دارند که زمان‌بندی واقعاً مهم باشد، مثل یادآوری رزرو یا سفارشی که آماده است.
یک سیستم اعلان چطور کنار هم کار می‌کند
آن را ساده و متمرکز نگه دارید:
- اتفاقی می‌افتد. کامنتی ثبت می‌شود، پرداختی شکست می‌خورد، یک رزرو فردا است.
- سرور شما یک تابع را صدا می‌زند، مثلاً
notify(user, type, data). - آن تابع تنظیمات کاربر را چک می‌کند و یک ردیف در جدول
notificationsمی‌نویسد (برای زنگوله). - بعد به کانال‌های دیگری می‌فرستد که کاربر برای آن نوع فعال کرده است: ایمیل از طریق ارائه‌دهنده، پوش از طریق Push API.
- فرانت‌اند اعلان‌های خوانده‌نشده را نشان می‌دهد و وقتی باز شوند، آن‌ها را خوانده‌شده علامت می‌زند.
یک نقطه ورود واحد یعنی می‌توانید کانالی اضافه کنید، متن را عوض کنید، یا تنظیمات را رعایت کنید، بدون اینکه کل کد را بگردید.
چه چیزی را ذخیره کنیم
یک جدول اعلان معمولاً به این‌ها نیاز دارد: شناسه کاربر، نوع (مثلاً comment_reply)، عنوان و متن کوتاه، پیوند به صفحه مربوط، زمان ایجاد و زمان خوانده شدن. یک جدول تنظیمات جدا مشخص می‌کند هر کاربر برای هر نوع کدام کانال‌ها را می‌خواهد.
نمایش اعلان‌های جدید
- بارگذاری هنگام نمایش صفحه و polling هر ۳۰ تا ۶۰ ثانیه. ساده و قابل اعتماد.
- به‌روزرسانی لحظه‌ای با WebSocket یا server-sent events که سریع به نظر می‌رسد، اما قطعات متحرک بیشتری دارد. با polling شروع کنید، مگر اینکه نمایش فوری واقعاً مهم باشد.
اعلان‌های ایمیلی
ایمیل به یک ارائه‌دهنده ارسال و یک دامنه تأییدشده نیاز دارد؛ جزئیات در نحوه ارسال ایمیل از اپ آمده است. برای اعلان‌ها به‌طور مشخص:
- از سرور ارسال کنید، هرگز با کلید ارائه‌دهنده در مرورگر.
- رویدادهای پرتکرار را دسته‌بندی کنید. یک ایمیل با «۳ کامنت جدید» بهتر از سه ایمیل است.
- برای رویدادهای کم‌اولویت، خلاصه روزانه یا هفتگی پیشنهاد دهید.
- در ایمیل‌های غیرضروری، پیوند لغو اشتراک یا تنظیمات بگذارید. قوانین ایمیل بازاریابی بین کشورها فرق دارد؛ بررسی کنید چه چیزی برای شما اعمال می‌شود.
اعلان‌های وب پوش
وب پوش به سایت شما اجازه می‌دهد هشدارهایی بفرستد که مثل اعلان اپ دیده می‌شوند. طبق مستندات Push API در MDN، این‌طور کار می‌کند:
- سایت شما یک service worker ثبت می‌کند، یک اسکریپت که مرورگر می‌تواند در پس‌زمینه اجرا کند.
- بعد از موافقت کاربر، service worker از طریق
PushManager.subscribe()مشترک می‌شود. مرورگر یک subscription با endpoint و کلیدهای رمزنگاری برمی‌گرداند. - سرور شما آن subscription را ذخیره می‌کند و وقتی اتفاقی می‌افتد، پیامی به endpoint می‌فرستد که معمولاً با کلیدهای VAPID (یک جفت کلید که سرور شما را شناسایی می‌کند) امضا می‌شود.
- مرورگر service worker شما را اجرا می‌کند که اعلان را نشان می‌دهد، حتی اگر صفحه شما باز نباشد.
MDN همچنین یادآوری می‌کند که endpoint باید مخفی بماند، چون دانستن آن برای ارسال پیام به آن کاربر کافی است.
آیفون و آیپد
WebKit در iOS و iPadOS نسخه ۱۶.۴ وب پوش برای وب‌اپ‌ها اضافه کرد، با دو شرط از اعلام رسمی‌اش: سایت باید به صفحه اصلی اضافه شده باشد، و اجازه باید در پاسخ به یک کار کاربر مثل تَپ روی دکمه اشتراک، درخواست شود. پس روی آیفون، پوش فقط به کاربرانی می‌رسد که وب‌اپ شما را نصب کرده‌اند. برای معنی نصب یک وب‌اپ، اپ بومی در برابر PWA را ببینید.
درخواست اجازه به شکل درست
در اولین بازدید نپرسید. اول فایده را توضیح دهید («یک ساعت قبل از کلاس یادآوری بگیرید»)، بعد وقتی کاربر روی دکمه‌ای تَپ کرد، پنجره اجازه مرورگر را نشان دهید. اگر کسی رد کند، مرورگر ممکن است اجازه ندهد دوباره بپرسید، پس یک درخواست زودهنگام می‌تواند برای همیشه کاربر را از دست بدهد.
اعلان‌های زمان‌بندی‌شده به یک محرک نیاز دارند
«یادآوری ۲۴ ساعت قبل» یا «خلاصه هفتگی هر دوشنبه» به چیزی نیاز دارند که طبق زمان‌بندی اجرا شود. این یک مسئله job پس‌زمینه است که در نحوه اجرای job های پس‌زمینه پوشش داده شده است. یک الگوی رایج: یک زمان‌بند بیرونی هر چند دقیقه یک endpoint محافظت‌شده را صدا می‌زند و آن endpoint هر چه سررسیده شده است را می‌فرستد.
درخواست‌هایی برای ساز اپ هوش مصنوعی
با درون‌برنامه‌ای شروع کنید:
اعلان درون‌برنامه‌ای اضافه کن. یک جدول notifications بساز (user، type، title، body، link، created_at، read_at). یک تابع سروری notify(userId, type, data) اضافه کن که هر قابلیت آن را صدا بزند. یک آیکون زنگوله در هدر با شمارش خوانده‌نشده‌ها، یک منوی کشویی با ۲۰ مورد آخر و دکمه «علامت‌گذاری همه به‌عنوان خوانده‌شده» نشان بده. هر ۶۰ ثانیه برای اعلان‌های جدید polling انجام بده.
بعد تنظیمات و ایمیل:
تنظیمات اعلان اضافه کن: برای هر نوع (پاسخ کامنت، منشن، صورتحساب)، کاربر بتواند درون‌برنامه‌ای، ایمیل، هر دو یا هیچ‌کدام را انتخاب کند. notify() باید این تنظیمات را رعایت کند. ایمیل را از طریق [PROVIDER] با رازِ [ENV_NAME] فقط روی سرور ارسال کن. ایمیل‌های کامنت را گروه‌بندی کن تا هر کاربر حداکثر یک ایمیل در ۱۵ دقیقه بگیرد.
بعد، اگر لازم بود، پوش:
وب پوش اختیاری اضافه کن. یک service worker ثبت کن، کلیدهای VAPID بساز و کلید خصوصی را به‌عنوان راز ذخیره کن. یک دکمه «فعال‌سازی اعلان‌ها» در تنظیمات اضافه کن که فقط با کلیک اجازه بگیرد. هر اشتراک را برای هر کاربر و دستگاه ذخیره کن، پوش‌ها را از notify() بفرست وقتی کاربر انتخاب کرده، و اشتراک‌هایی را که سرویس پوش منقضی گزارش می‌کند حذف کن.
اشتباهات رایج
- پراکندگی اعلان‌ها در کد. هر قابلیت ایمیل خودش را به شکل متفاوتی می‌فرستد و تنظیمات نادیده گرفته می‌شوند. از یک تابع
notify()استفاده کنید. - درخواست اجازه پوش هنگام بارگذاری صفحه. اکثر مردم رد می‌کنند و ممکن است فرصت دیگری نداشته باشید.
- نبود تنظیمات. کاربرانی که نمی‌توانند هشدارهای مزاحم را خاموش کنند، همه را خاموش می‌کنند یا می‌روند.
- ارسال از مرورگر. کلیدهای ایمیل و پوش باید روی سرور باشند.
- پاک نکردن اشتراک‌های پوش مرده. اشتراک‌های منقضی انباشته می‌شوند و ارسال‌ها را هدر می‌دهند.
- جزئیات حساس در متن اعلان. صفحه قفل آن را نشان می‌دهد. «یک پیام جدید دارید» امن‌تر از خود پیام است.
- نبود سابقه از آنچه فرستاده شده. وقتی کاربری می‌گوید «ایمیل را نگرفتم»، لاگ‌ها با شناسه پیام ارائه‌دهنده کمک می‌کنند علت را پیدا کنید.
چک‌لیست
- یک تابع سروری
notify()که همه جا استفاده می‌شود - جدول اعلان با وضعیت خوانده‌شدن، و زنگوله با شمارش خوانده‌نشده‌ها
- تنظیمات کانال برای هر نوع، که
notify()آن را رعایت می‌کند - ایمیل از سرور با دامنه تأییدشده؛ دسته‌بندی یا خلاصه برای رویدادهای پرتکرار
- اجازه پوش فقط بعد از یک کار کاربر و با توضیح درخواست می‌شود
- پوش روی دسکتاپ و روی آیفون با وب‌اپ نصب‌شده در صفحه اصلی تست شده است
- اشتراک‌های پوش منقضی حذف می‌شوند
- هیچ محتوای حساسی در پیش‌نمایش پوش یا ایمیل نیست
- یادآوری‌های زمان‌بندی‌شده یک محرک قابل‌اعتماد دارند
اعلان‌ها در Mythex
Mythex برای اپ‌هایی که می‌سازید سرویس داخلی ایمیل یا پوش ندارد، پس ارائه‌دهنده ایمیل خودتان را می‌آورید و کلیدهای پوش خودتان را می‌سازید که به‌عنوان رازهای پروژه ذخیره می‌شوند. بخش درون‌برنامه‌ای فقط به پایگاه داده پروژه نیاز دارد که وقتی درخواستش کنید Mythex اضافه می‌کند. با درخواست‌های بالا بسازید، زنگوله و ایمیل‌ها را در Preview تست کنید، و پوش را روی آدرس HTTPS منتشرشده تست کنید، چون service worker و پوش به یک آدرس واقعی HTTPS نیاز دارند. دستور آماده‌ی مستندات ارسال ایمیل از اپ یک درخواست شروع دارد. Mythex زمان‌بندی job ها را مستند نکرده، پس یادآوری‌های زمان‌دار را با یک محرک بیرونی برنامه‌ریزی کنید، طبق نحوه اجرای job های پس‌زمینه.
پرسش‌ها
ساده‌ترین نوع اعلان برای افزودن به یک وب‌اپ کدام است؟
اعلان‌های درون‌برنامه‌ای: یک جدول اعلان در پایگاه داده و یک آیکون زنگوله که اعلان‌های خوانده‌نشده را نشان می‌دهد. به سرویس شخص ثالث نیاز ندارند. ایمیل قدم بعدی است و به یک ارائه‌دهنده ایمیل نیاز دارد.
آیا یک وب‌اپ می‌تواند اعلان پوش به آیفون بفرستد؟
بله، با محدودیت. WebKit در iOS و iPadOS نسخه ۱۶.۴ از Web Push برای وب‌اپ‌های صفحه اصلی پشتیبانی اضافه کرد. پس کاربر باید ابتدا وب‌اپ شما را به صفحه اصلی گوشی اضافه کند و درخواست اجازه باید بعد از یک تَپ، مثلاً روی دکمه «اشتراک»، انجام شود.
وقتی وب‌سایت بسته است، اعلان پوش کار می‌کند؟
بله. Push API پیام را به service worker سایت شما می‌رساند و مرورگر آن را وقتی پیام می‌رسد اجرا می‌کند، پس صفحه لازم نیست باز باشد. کاربر باید قبلاً اجازه داده باشد.
چطور جلوی آزار کاربران با اعلان‌ها را بگیرم؟
فقط درباره چیزهایی اطلاع دهید که کاربر به آن اهمیت می‌دهد، رگبار رویدادها را در یک پیام گروه‌بندی کنید، به مردم اجازه دهید برای هر نوع اعلان کانال مورد نظرشان را در تنظیمات انتخاب کنند، و اجازه پوش را فقط وقتی بخواهید که کاربر دیده که چرا مفید است.