نصب وب پوش در React؛ SDK، سرویس‌ورکر و مدیریت چرخه صفحه
برای نصب وب پوش در یک سایت React، SDK عمومی سرویس را یک بار بارگذاری کنید و فایل سرویس‌ورکر را از ریشه دامنه ارائه دهید. رندر دوباره یک کامپوننت نباید باعث نصب مجدد SDK، ثبت چند شنونده یا نمایش چندباره درخواست مجوز شود. این مسیر مربوط به React وب است؛ React Native پیکربندی بومی متفاوتی دارد.
در این مقاله:
- فایل سرویس‌ورکر را در خروجی عمومی قرار دهید
- SDK را یک بار بارگذاری کنید
- مجوز را به تعامل کاربر وصل کنید
- مسیریابی و چرخه کامپوننت‌ها
- کلید خصوصی در React قرار نگیرد
- چک‌لیست انتشار
فایل سرویس‌ورکر را در خروجی عمومی قرار دهید
فایل pushfa-messaging-sw.js را از تنظیمات سرویس خود دانلود کنید. در پروژه‌ای که فایل‌های پوشه public بدون تغییر به ریشه خروجی می‌روند، فایل را همان‌جا قرار دهید. پس از انتشار، نشانی /pushfa-messaging-sw.js باید خود فایل جاوااسکریپت را برگرداند.
در برنامه‌های تک‌صفحه‌ای، fallback مسیریابی ممکن است برای هر مسیر ناشناخته، HTML برنامه را برگرداند. پاسخ ۲۰۰ کافی نیست: محتوا و نوع پاسخ فایل worker را بررسی کنید. فایل را پشت ورود، در مسیر یک کامپوننت یا داخل پوشه‌ای با scope نامناسب قرار ندهید. راهنمای نصب وب پوش شرایط HTTPS و ثبت worker را توضیح می‌دهد.
SDK را یک بار بارگذاری کنید
کد اتصال را از پنل همان سرویس بگیرید؛ کلید عمومی و نشانی نسخه SDK باید با تنظیمات آن سرویس هماهنگ باشند. در یک نصب ساده، تگ ماژول در HTML اصلی سایت قرار می‌گیرد. نمونه زیر فقط ساختار اتصال را نشان می‌دهد و باید با کد پنل جایگزین شود:
<script
src="https://sdk.pushfa.com/notification-v2.js?api_public_key=YOUR_PUBLIC_KEY"
type="module">
</script>از بارگذاری هم‌زمان چند نسخه یا افزودن همان تگ در هر صفحه خودداری کنید. اگر برنامه شما فایل را پویا بارگذاری می‌کند، یک راه‌انداز مرکزی و محافظ بارگذاری تکراری داشته باشید. نام بسته npm یا متد دلخواه را جای قرارداد واقعی SDK قرار ندهید.
مجوز را به تعامل کاربر وصل کنید
دکمه عضویت باید ارزش مشخصی مانند خبر موجودشدن کالا را توضیح دهد. تنظیم حالت درخواست و روش فراخوانی را از راهنمای نسخه SDK خود بگیرید. effect مربوط به اولین رندر، جای مناسبی برای درخواست ناگهانی مجوز نیست؛ در محیط توسعه، اجرای دوباره برخی effectها نیز می‌تواند ایراد راه‌اندازی تکراری را آشکار کند.
پذیرش مجوز، ایجاد اشتراک و ثبت آن در سرور را جداگانه بررسی کنید. در رابط، «عضویت فعال شد» را فقط پس از موفقیت جریان ثبت نشان دهید. برای رد درخواست یا نبود پشتیبانی هم حالت قابل فهم داشته باشید. تفاوت مجوز و اشتراک دلیل این تفکیک را توضیح می‌دهد.
مسیریابی و چرخه کامپوننت‌ها
SDK و worker به تغییر route داخلی وابسته نیستند. اگر برای نمایش پیام داخل رابط، شنونده‌ای اضافه می‌کنید، هنگام خروج کامپوننت همان شنونده را پاک کنید. پاک‌کردن شنونده رابط با حذف اشتراک پوش یا unregister کردن worker متفاوت است؛ ترک یک صفحه نباید خودکار عضویت کاربر را از بین ببرد.
وقتی کاربر از حساب خارج می‌شود یا حساب دیگری وارد می‌شود، ارتباط شناسه مشترک و هویت حساب را طبق قرارداد سرویس مدیریت کنید. توکن یک مرورگر را بدون بررسی به حساب‌های مختلف منتسب نکنید. مقصد کلیک نیز باید هم با بازشدن مستقیم URL و هم با مسیریابی داخل برنامه کار کند.
کلید خصوصی در React قرار نگیرد
متغیرهای محیطی‌ای که وارد bundle مرورگر می‌شوند، محل امن کلید خصوصی نیستند. کلید عمومی برای اتصال SDK استفاده می‌شود؛ ارسال مدیریتی با کلید خصوصی از backend انجام می‌شود. راهنمای ارسال سروری نمونه این جداسازی را دارد. هیچ اعتبارنامه Firebase Service Account را به مرورگر نفرستید.
چک‌لیست انتشار
- فایل worker در ریشه و با محتوای صحیح ارائه می‌شود.
- SDK فقط یک بار بارگذاری و شنونده‌های رابط درست مدیریت می‌شوند.
- مجوز پس از اقدام مرتبط کاربر درخواست می‌شود.
- تغییر route و رندر دوباره، درخواست عضویت را تکرار نمی‌کند.
- مقصد کلیک در بارگذاری مستقیم و حالت ورود و خروج کار می‌کند.
- روی دستگاه واقعی، دریافت پیش‌زمینه و پس‌زمینه جدا بررسی شده‌اند.
برای آیفون، شرط وب‌اپ نصب‌شده در صفحه اصلی را جدا ببینید. موفقیت نسخه دسکتاپ، مسیر iOS را تأیید نمی‌کند؛ راهنمای وب پوش آیفون مراحل مخصوص آن را پوشش می‌دهد.