مجله خبری هاست ایران » طراحی و توسعه » راهنمای ارسال پوش نوتیفیکیشن از اپلیکیشن‌های Django
  • mag-telegram.jpg
  • landing96-300-420.jpg
توسعه وب طراحی و توسعه

راهنمای ارسال پوش نوتیفیکیشن از اپلیکیشن‌های Django

راهنمای ارسال پوش نوتیفیکیشن از اپلیکیشن‌های Django

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

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

در این راهنما یک اپلیکیشن Django روی اوبونتو ۱۸.۰۴ می‌سازیم تا هرگاه فعالیتی نیازمند بازدید کاربر از اپلیکیشن‌ها وجود داشته باشد، پوش نوتیفیکیشن‌ها را برای او ارسال کند. برای ایجاد این نوع نوتیفیکیشن‌ها و اعلان‌های سریع باید از بسته Django-Webposh استفاده کرده و یک سرویس ورکر برای نمایش نوتیفیکیشن‌ها روی کلاینت ثبت و راه‌اندازی کنیم. اپلیکیشن فعال با چنین نوتیفیکیشن‌هایی باید به شکل زیر ظاهر شود:

Django-Webposh-final

پیش‌نیازها برای ارسال push notification

پیش از آغاز این راهنما باید موارد زیر را آماده کنیم:

  • یک سرور اوبونتو ۱۸.۰۴ با کاربر غیر روت (non-root) و فایروال فعال.
  • نصب pip و venv.
  • ایجاد یک پروژه Django به نام djangopush در دایرکتوری home و همچنین افزودن آدرس IP به دایرکتیو ALLOWED-HOSTS در فایل py.

مرحله اول – نصب Django-Webpush و دریافت Vapid Key

Django-Webpush بسته‌ای است که توسعه‌دهندگان را قادر می‌سازد پوش نوتیفیکیشن‌ها را با اپلیکیشن‌های Django ادغام و ارسال کنند. ما هم از این بسته برای تلنگر زدن و ارسال نوتیفیکیشن‌ها در اپلیکیشن خود استفاده می‌کنیم. در این مرحله باید Django-Webpush را نصب‌کرده و کلیدهای شناسایی داوطلبانه سرور اپلیکیشن (VAPID) را دریافت کنیم. این کلیدها برای شناسایی سرور و تضمین یکتا بودن هر درخواست ضروری هستند.

اطمینان حاصل کنید درون همان دایرکتوری پروژه ~/ djangopush که در بخش پیش‌نیازها ایجاد کردید، قرار دارید:

محیط مجازی را فعال کنید:

Pip را به تازه‌ترین نسخه به‌روزرسانی کنید:

Django-Webpush را نصب کنید:

پس از نصب بسته، آن را به فهرست اپلیکیشن‌های فایل settings.py خود اضافه کنید. ابتدا settings.py را بازکنید:

Webpush را به فهرست INSTALLED_APPS اضافه کنید:

فایل را ذخیره کنید و از ویرایشگر خارج شوید

حالا migrations را روی اپلیکیشن به اجرا درآورید تا تغییرات روی الگوی پایگاه داده‌ها (Schema) اعمال شوند:

خروجی اجرای migration موفقیت‌آمیز بدین شکل خواهد بود:

مرحله بعدی در تنظیم پوش نوتیفیکیشن وب دریافت کلیدهای VAPID است. این کلیدها سرور اپلیکیشن را شناسایی می‌کنند و می‌توان از آن‌ها برای کاهش پنهان‌کاری در پوش نوتیفیکیشن‌های آدرس‌های URL استفاده کرد؛ زیرا تعداد ثبت‌نام و عضویت را در هر سرور به‌خصوص محدود می‌کنند.

برای کسب کلیدهای VAPID به مسیر اپلیکیشن وب web-push-codelab بروید. در این بخش می‌توانید کلیدهایی را که به‌صورت خودکار ایجاد می‌شوند دریافت کنید. کلیدهای عمومی و اختصاصی را کپی کنید.

حالا برای اطلاعات VAPID خود یک ورودی تازه در settings.py بسازید. ابتدا این فایل را بازکنید:

سپس دایرکتیو تازه‌ای را به نام WEBPUSH_SETTINGS با کلیدهای عمومی و اختصاصی VAPID اضافه کنید و ایمیل خود را هم زیر AUTH_PASSWORD_VALIDATORS درج کنید:

فراموش نکنید که باید مقادیر پیش‌فرض your_vapid_public_key، your_vapid_privaye_key و admin@example.com را با مقادیر و اطلاعات خودتان تغییر دهید. ایمیل خود را به این منظور وارد می‌کنید تا هر زمان سرورهای پوش با مشکلی مواجه شدند، مطلع شوید.

در مرحله بعدی view‌هایی ایجاد می‌کنیم تا صفحه اصلی اپلیکیشن را برای کاربر به نمایش درآورند و پوش نوتیفیکیشن‌ها را هم به کاربران عضو (subscribed) ارسال کنند.

مرحله دوم – راه‌اندازی View

در این مرحله یک view ابتدای home با HttpResponse برای صفحه اصلی و همچنین یک view به نام send_push می‌سازیم. View ها درواقع تابع‌هایی هستند که پاسخ‌ها را از درخواست‌های وب بازگشت می‌دهند. Send_push از کتابخانه درون Django-Webpush برای ارسال نوتیفیکیشن‌هایی استفاده می‌کند که شامل داده‌های واردشده توسط کاربر درون صفحه خانه هستند.

به پوشه ~/ djangopush/djangopush بروید:

اجرا دستور ۱s درون این پوشه فایل‌های اصلی درون آن را برایتان به نمایش درمی‌آورد:

فایل‌های درون این پوشه به‌صورت خودکار توسط ابزار Django-admin که برای ایجاد پروژه در مرحله پیش‌نیازها از آن استفاده کردید، ایجاد می‌شوند. فایل settings.py شامل پیکربندی‌های پروژه مانند اپلیکیشن‌های نصب‌شده و پوشه استاتیک روت می‌شود. فایل urls,py شامل پیکربندی‌های URL درون پروژه است. در همین بخش باید مسیرهای مناسب را مطابق با view های ایجادشده تنظیم کنید.

یک فایل تازه در دایرکتوری ~/ djangopush/djangopush به نام views.py ایجاد کنید. این فایل باید شامل view های درون پروژه شود:

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

Home با decorator require_GET دکوریت شده است که view را به درخواست‌های GET محدود می‌سازد. View به‌طورکلی پاسخ را به هر درخواست مربوط ارجاع می‌دهد. این view یک تگ ساده HTML را به‌عنوان پاسخ بازمی‌گرداند.

View بعدی که باید ایجاد کنیم، send_push است که پوش نوتیفیکیشن‌های ارسال‌شده را به کمک بسته Django-webpush مدیریت می‌کند. این view هم به درخواست‌های POST محدودشده و به همین خاطر از محافظت در مقابل Cross Site Request Forgery) CSRF) معاف شده است. ایجاد این view شمارا قادر می‌سازد بتوانید آن را به کمک Postman یا هر خدمات RESTful دیگری مورد آزمون قرار دهید. البته در محیط production حتماً باید این decorators را حذف کنید تا view در مقابل CSRF آسیب‌پذیر نشود.

برای ایجاد send_push ابتدا ورودی زیر را اضافه کنید تا پاسخ‌های JSON فعال شوند و به تابع send_user_notification در کتابخانه webpush دسترسی پیدا کنید:

سپس decorators require_POST را اضافه کنید. این decorator از بدنه (متن) درخواست ارسالی توسط کاربر برای ایجاد و تلنگر زدن به پوش نوتیفیکیشن استفاده می‌کند.

ما از دو decorator برای send_push استفاده می‌کنیم: require_POST که view را تنها به درخواست‌های POST محدود می‌کند و csrf_exempt که view را از حفاظت CSRF معاف می‌کند.

این view داده‌های POST را می‌پذیرد و موارد زیر را به اجرا درمی‌آورد:

  • head: The title of the push notification.
  • body: The body of the notification.
  • id: The id of the request user.

Body درخواست را می‌پذیرد و با استفاده از بسته json، سند JSON را با استفاده از json.loads به‌صورت یک آبجکت پایتون سریال زدایی می‌کند (تبدیل رشته بایتی به رشته‌های بیتی). Json.loads یک سند ساختاریافته JSON را دریافت کرده و آن را به آبجکت پایتون تبدیل می‌کند.

این view از متن درخواست سه انتظار عمده زیر را دارد:

head: عنوان پوش نوتیفیکیشن

body: بدنه یا متن نوتیفیکیشن

id: id یا نشانه کاربر درخواست دهنده

اگر هرکدام از این مشخصه‌های موردتقاضا موجود نباشند، view یک JSONResponse را با وضعیت ۴۰۴ یعنی «یافت نشد» بازمی‌گرداند. اگر کاربر با کلید اصلی وجود داشته باشد، view یک user به کمک کتابخانه Django.shortcuts بازمی‌گرداند. اگر کاربر وجود نداشته باشد، خطای ۴۰۴ بازگردانده می‌شود.

این view همچنین از تابع send_user_notification درون کتابخانه webpush استفاده می‌کند. این تابع شامل مقادیر زیر می‌شود:

User: دریافت‌کننده پوش نوتیفیکیشن

Payload: اطلاعات نوتیفیکیشن که شامل head و body می‌شود.

Ttl: بیشینه مدت‌زمانی که نوتیفیکیشن باید در صورت آفلاین بودن کاربر ذخیره شود (برحسب ثانیه)

اگر هیچ خطایی رخ ندهد، view یک JSONResponse را با وضعیت ۲۰۰ «موفقیت‌آمیز» و به آبجکت داده بازمی‌گرداند. اگر خطای KeyError رخ دهد، view وضعیت ۵۰۰ «خطای داخلی سرور» را بازمی‌گرداند. خطای KeyError زمانی رخ می‌دهد که کلید درخواست شده از آبجکت به خصوصی اصلاً وجود نداشته باشد.

در مرحله بعدی مسیرهای متناظر URL برای مطابقت با view ایجاد می‌کنیم.

مرحله سوم – نگاشت آدرس‌های URL به View ها

Django امکان ایجاد آدرس‌های URL را که با استفاده از یک ماژول پایتون به نام URLconf به view ها متصل می‌شوند، فراهم می‌آورد. این ماژول عبارت‌های مسیر URL را به تابع‌های پایتون که همان view های شما هستند، نگاشت می‌کند. فایل پیکربندی URL معمولاً در هنگام ایجاد پروژه به‌صورت خودکار به وجود می‌آید. شما در این مرحله باید این فایل را به‌روزرسانی کنید تا شامل مسیرهای تازه‌ای برای view هایی که در مرحله قبلی ایجاد کرده بودید و همچنین اپلیکیشن Django-webpush شود. اپلیکیشن Django-webpush نقاط مقصد را برای ثبت‌نام و عضویت کاربران در جهت دریافت پوش نوتیفیکیشن فراهم می‌آورد.

فایل urls.py را بازکنید:

این فایل باید این‌گونه به نظر برسد:

قدم بعدی نگاشت آدرس‌های URL به view هایی است که قبلاً ایجاد کرده‌اید. ابتدا ورودی include را اضافه کنید تا مطمئن شوید که همه مسیرها برای کتابخانه Django-webpush به پروژه‌تان اضافه خواهند شد:

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

در اینجا فهرست urlpatterns آدرس‌های URL را برای بسته Django-webpush به ثبت می‌رساند و view های شمارا به URL های /send_push و /home نگاشت می‌کند.

حالا بهتر است view /home را مورد آزمون قرار دهیم تا مطمئن شویم که به‌درستی عمل می‌کند. ابتدا باید بررسی کنید که حتماً در دایرکتوری روت پروژه باشید:

با اجرای دستور زیر سرور را راه‌اندازی کنید:

به مسیر http://your_server_ip:8000 بروید تا صفحه خانه به نمایش درآید.

django_push_home

در این مرحله می‌توانید با اجرای دستور CTRL+C سرور را متوقف کنید. در ادامه به توضیح ایجاد قالب‌های نمونه و رندر کردن آن‌ها در view به کمک تابع render می‌پردازیم.

مرحله چهارم – ایجاد قالب‌های نمونه

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

یک پوشه به نام templates در دایرکتوری روت پروژه خود ایجاد کنید:

اگر در این مرحله دستور ۱s را در پوشه روت پروژه خود به اجرا درآورید، خروجی آن به این صورت به نمایش درمی‌آید:

حالا یک فایل به نام home.html در پوشه templates ایجاد کنید:

کدهای زیر را به فایل اضافه کنید تا فرم مخصوص ورود اطلاعات کاربر برای درخواست پوش نوتیفیکیشن ایجاد شود:

بخش body در این فایل شامل فرمی با دو فیلد متفاوت می‌شود. این فیلدها عناصر input و textarea هستند. input مسئول نگهداری بخش‌ head/title نوتیفیکیشن است و عنصر textarea هم body نوتیفیکیشن را در برمی‌گیرد.

در بخش head این فایل دو تگ meta وجود دارد که کلید عمومی VAPID و id کاربر را شامل می‌شود. این دو متغیر برای ثبت‌نام کاربر در جهت دریافت پوش نوتیفیکیشن الزامی هستند. بدین منظور به id کاربر نیاز دارید که می‌خواهید درخواست آژاکس را به سرور ارسال کنید و از این id برای شناسایی کاربر درروند استفاده می‌شود. اگر کاربر فعالی قبلاً ثبت‌نام کرده باشد، قالب پیش‌فرض تگ meta با id او را به‌عنوان محتوا ایجاد می‌کند.

در مرحله بعدی این روند به Django اطلاع می‌دهیم قالب‌هایمان کجا هستند. برای کار باید settings.py را ویرایش کرده و فهرست TEMPLATES را به‌روزرسانی کنید.

فایل settings.py را بازکنید:

کدهای زیر را به فهرست DIRS اضافه کنید تا مسیر دسترسی به دایرکتوری قالب‌هایتان مشخص شود:

سپس در فایل view.py خود home را به‌روزرسانی کنید تا قالب home.html را رندر کند. این فایل را بازکنید:

ابتدا برخی ورودی‌های دیگر را شامل پیکربندی settings (شامل همه تنظیمات پروژه از فایل settings.py می‌شود) و تابع render از Django.shortcuts را اضافه کنید:

حالا کدهایی را که به ابتدا به home اضافه کرده بودید حذف کرده و کدهای زیر را به آن اضافه کنید. این کدها مشخص می‌کنند قالبی که ایجاد کرده‌اید چگونه رندر می‌شوند:

کد فوق متغیرهای زیر را اختصاص می‌دهد:

  • Webpush_settings: همان مقدار انتسابی WEBPUSH_SETTINGS از پیکربندی settings است.
  • Vapid_key: این متغیر مقدار VAPID_PUBLIC_KEY را از آبجکت webpush_settings برای ارسال به کلاینت دریافت می‌کند. کلید عمومی و کلید خصوصی باهم مقایسه می‌شوند تا مشخص شود که کلاینت دارای کلید عمومی مجاز است پیام‌های پوش را از سرور دریافت کند.
  • User: این متغیر از درخواست‌های ورودی ایجاد می‌شود. هرگاه یک کاربر یک درخواست را به سرور ارسال می‌کند، جزئیات درباره آن کاربر به‌خصوص در بخش user ذخیره می‌شود.

تابع render یک فایل HTML و یک آبجکت context بازمی‌گرداند که شامل کاربر فعلی و کلید عمومی VAPID سرور می‌شود. این تابع سه مقدار متفاوت دریافت می‌کند. این مقادیر request، template که باید رندر شود و آبجکتی که شامل متغیرهای مورداستفاده درون قالب هستند.

پس از ایجاد قالب نمونه و به‌روزرسانی home view می‌توانیم به مرحله بعدی برویم و Django را برای به کار گرفتن در فایل‌های استاتیک خود پیکربندی کنیم.

مرحله پنجم – عرضه فایل‌های استاتیک

اپلیکیشن‌های وب شامل جاوا اسکریپت، CSS و سایر فایل‌های تصویری می‌شوند که Django آن‌ها را فایل‌های استاتیک می‌نامد. Django شمارا قادر می‌سازد همه فایل‌های استاتیک درون هر اپلیکیشن پروژه خود را در یک لوکیشن واحد که ازآنجا عرضه می‌شوند، جمع‌آوری کنید. این راهکار Django.contrib.staticfiles نامیده شده است. در این مرحله تنظیمات را به‌روزرسانی کنید تا به Django بگویید که فایل‌های استاتیکتان کجا ذخیره می‌شوند.

Settings.py را بازکنید:

در settings.py ابتدا مطمئن شوید که STATIC_URL حتماً تعریف‌شده باشد:

سپس فهرستی را از دایرکتوری‌های منتسب به STATICFILES_DIRS در موقعیتی که Django به دنبال فایل‌های استاتیک می‌گردد، اضافه کنید:

حالا می‌توانید STATIC_URL را به فهرست مسیرهایی که در فایل urls.py شما مشخص‌شده‌اند اضافه کنید.

فایل را بازکنید:

کدهای زیر را اضافه کنید تا پیکربندی آدرس static وارد و فهرست urlpatterns هم به‌روزرسانی شود. تابع کمکی در اینجا از مشخصات STATIC_URL و STATIC_ROOT که به‌منظور عرضه در فایل‌های استاتیک پروژه در فایل settings.py فراهم کرده بودیم، استفاده می‌کند:

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

مرحله ششم – سبک بندی صفحه خانه

پس از اعمال تنظیمات فایل‌های استاتیک، می‌توانید یک استایل شیت خارجی ایجاد کرده و آن را برای تنظیم سبک صفحه خانه به فایل home.html لینک کنید. همه فایل‌های استاتیک شما در یک دایرکتوری static درون فولدر روت (root folder) پروژه ذخیره می‌شوند.

یک پوشه static و همچنین یک پوشه css درون پوشه Static ایجاد کنید:

یک فایل css را به نام styles.css درون پوشه css بازکنید:

سبک‌های زیر را برای صفحه خانه اضافه کنید:

پس‌ازآنکه استایل شیت ایجاد شد، می‌توانید آن را به کمک تگ‌های قالب static template به فایل home.html لینک کنید. فایل home.html را بازکنید:

بخش head را به‌روزرسانی کنید تا شامل لینکی به استایل شیت خارجی شود:

مطمئن شوید که در دایرکتوری اصلی پروژه خود باشید و سپس سرور را دوباره فعال کنید تا کارتان را بررسی کند:

وقتی صفحه http://your_server_ip:8000 را باز می‌کنید، باید به شکل زیر به نظر برسد:

همچنان می‌توانید با اجرای دستور CTTL+C سرور را غیرفعال کنید.

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

مرحله هفتم – ثبت سرویس ورکر و ثبت‌نام کاربران برای دریافت پوش نوتیفیکیشن

پوش نوتیفیکیشن‌های وب می‌توانند به کاربران اطلاع دهند به‌روزرسانی‌هایی در اپلیکیشن‌هایی که در آن‌ها ثبت‌نام کرده‌اند، رخ‌داده است یا حتی از آن‌ها دعوت کنند تا از اپلیکیشنی که قبلاً استفاده کرده‌اند مجدداً بهره ببرند. این نوع نوتیفیکیشن‌ها عمدتاً بر دو تکنولوژی عمده تکیه‌دارند. این دو نوع push API و Notification API نامیده شده‌اند. هر دو تکنولوژی مذکور همچنین به حضور سرویس ورکرها وابسته هستند.

یک پوش (push) درواقع زمانی فراخوانده می‌شود که اطلاعات توسط سرور به سمت سرویس ورکر ارسال شوند و سرویس ورکر هم از API نوتیفیکیشن برای نمایش این اطلاعات استفاده می‌کند.

ما هم از کاربران خود برای push ثبت‌نام به عمل می‌آوریم و اطلاعاتی را از این روند ثبت‌نام به سمت سرور می‌فرستیم تا آن‌ها را ثبت‌نام کند.

در دایرکتوری static یک پوشه به نام js ایجاد کنید:

یک فایل به نام registers.js ایجاد کنید:

کدهای زیر را اضافه کنید تا پیش از اقدام برای ثبت، بررسی شود که آیا سرویس ورکرها توسط مرورگر کاربر پشتیبانی می‌شوند یا خیر:

در ابتدا تابع registers پیش از نصب بررسی می‌کند که آیا مرورگر کاربر از سرویس ورکرها پشتیبانی می‌کند یا خیر. این تابع پس از نصب سرویس ورکرها تابع initializeState را با داده‌های نصب فرامی‌خواند. اگر مرورگر از سرویس ورکرها پشتیبانی نکند، تابع showNotAllowed فراخوانده می‌شود.

سپس کد زیر را در تابع registers اضافه کنید تا پیش از ثبت‌نام کاربر بررسی کند که آیا او واجد شرایط دریافت پوش نوتیفیکیشن هست یا خیر:

تابع initializeState موارد زیر را بررسی می‌کند:

  • به کمک مقدار showNotified مشخص می‌کند که کاربر پوش نوتیفیکیشن را فعال کرده است یا خیر.
  • آیا کاربر اجازه نمایش نوتیفیکیشن‌ها را برای اپلیکیشن صادر کرده است یا خیر.
  • آیا مرورگر وب از PushManager API پشتیبانی می‌کند یا خیر. اگر پاسخ به هرکدام از این موارد منفی باشد، تابع showNotAllowed فراخوانده شده و روند ثبت‌نام لغو می‌شود.

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

وقتی مطمئن شدیم که کاربری واجد شرایط دریافت پوش نوتیفیکیشن است، قدم بعدی ثبت‌نام آن کاربر یا کاربران به کمک pushManager خواهد بود. کد زیر را بعد از تابع showNotAllowed اضافه کنید:

فراخواندن تابع pushManager.getSubscription داده‌ها را برای ثبت‌نام و عضویت فعال بازمی‌گرداند. زمانی که ثبت‌نام فعال وجود داشته باشد، تابع sendSubData با اطلاعات ثبت‌نام فراخوانی می‌شود.

وقتی هیچ ثبت‌نام فعالی وجود ندارد، کلید عمومی VAPID که به‌صورت base64 URL و امن کدگذاری شده است با تابع urlB64ToUint8Array به‌نوعی آرایه Uin8Array تبدیل می‌شود. سپس pushManager.subscribe با کلید عمومی VAPID و مقدار userVisible به‌عنوان گزینه‌های اختیاری فراخوانی می‌شود.

پس از ثبت‌نام موفقیت‌آمیز کاربران، قدم بعدی ارسال داده‌های ثبت‌نام به سمت سرور خواهد بود. داده‌ها به نقطه پایانی webpush/save_information که توسط بسته Django-webpush فراهم‌شده است ارسال می‌شوند. کدهای زیر را پس از تابع subscribe وارد کنید:

نقطه پایانی save_information اطلاعاتی را درباره وضعیت ثبت‌نام، داده‌های ثبت‌نام و مرورگر درخواست می‌کند. در آخر تابع registers() را فراخوانی می‌کنیم تا روند ثبت‌نام کاربر را آغاز کند.

فایل کامل شده به این شکل به نظر می‌رسد:

سپس یک تگ script برای فایل registers.js در home.html اضافه کنید. فایل زیر را بازکنید:

تگ script را پیش از تگ پایانی عنصر body اضافه کنید:

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

مرحله هشتم – ایجاد یک سرویس ورکر

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

ازآنجاکه می‌خواهیم حیطه سرویس ورکر همه وسعت دامنه باشد، باید آن را در روت یا ریشه اپلیکیشن نصب کنیم. رویکرد ما ایجاد فایلی به نام sw.js در پوشه templates است که بعداً آن را به‌عنوان یک view هم به ثبت می‌رسانیم.

فایل را ایجاد کنید:

کد زیر را که به سرویس ورکر دستور می‌دهد رویدادهای push را ردیابی کند، اضافه کنید:

بدین ترتیب سرویس ورکر برای بروز رویداد push منتظر می‌ماند. در تابع callback داده‌های event به متن تبدیل می‌شوند. ما از رشته‌های پیش‌فرض title و body در صورتی استفاده می‌کنیم که داده‌های رویداد فاقد آن‌ها باشد. تابع showNotification عنوان نوتیفیکیشن، header و همچنین آبجکت options را به‌عنوان مقادیر مختلف دریافت می‌کند. آبجکت options شامل چندین مشخصه برای پیکربندی گزینه‌های انتخابی بصری در نوتیفیکیشن‌ها می‌شود.

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

فایل urls.py را بازکنید:

یک گزاره ورودی و مسیر تازه در فهرست urlpatterns اضافه کنید تا view مبتنی بر کلاس ایجاد شود:

View های مبتنی بر کلاس مانند TemplateView شما را قادر می‌سازند view های منعطف باقابلیت استفاده مجدد ایجاد کنید. در این مورد خاص، روش TemplateView.as_view سرویس ورکر تازه ایجادشده را به‌عنوان یک قالب و Application/x-javascript را به‌عنوان content_type این قالب انتقال می‌دهد و مسیری را برای سرویس ورکرها ایجاد می‌کند.

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

مرحله نهم – ارسال پوش نوتیفیکیشن

کاربران به‌واسطه فرم موجود د صفحه خانه می‌توانند درحالی‌که سرور شما فعال است، پوش نوتیفیکیشن ارسال کنند. شما هم می‌توانید با استفاده از هر نوع سرویس RESTful مانند Postman پوش نوتیفیکیشن ارسال کنید. وقتی‌که کاربر از فرم موجود در صفحه خانه پوش نوتیفیکیشن ارسال می‌کند، داده شامل head و body و همچنین id کاربر دریافت‌کننده خواهد بود. داده باید به شکل زیر ساختار پیدا کند:

برای ردیابی رویداد submit در فرم و ارسال داده واردشده توسط کاربر به سمت سرور باید یک فایل به نام site.js در دایرکتوری ~/ djangopush/static/js ایجاد کنیم.

فایل را بازکنید:

ابتدا باید یک شنونده رویداد submit به فرم اضافه کنید تا امکان دریافت مقادیر ورودی فرم را فراهم آورد و همچنین id کاربر را هم در تگ meta قالب ذخیره کند:

تابع pushForm در فرم مقادیر input، textarea و button را دریافت می‌کند. این تابع همچنین اطلاعات را شامل نام جایگزین user_id و id کاربر که درون content ذخیره‌شده است از تگ meta می‌گیرد. تابع مذکور قادر است با این اطلاعات یک درخواست POST به نقطه پایانی /send_push روی سرور ارسال کند.

برای ارسال درخواست روی سرور از Fetch API استفاده می‌کنیم. از Fetch کمک می‌گیریم؛ زیرا اغلب مرورگرها از آن پشتیبانی می‌کنند و برای اجرا به کتابخانه‌های خارجی نیاز ندارد. زیر کدهایی که اضافه کرده‌اید باید تابع pushForm را به‌روزرسانی کنید تا شامل کدی لازم برای درخواست AJAX شود:

اگر مقادیر موردنیاز head، body و id موجود باشند، درخواست را ارسال کرده و دکمه ثبت را به‌صورت موقت غیرفعال می‌کنیم.

فایل کامل شده باید به این شکل ظاهر شود:

در آخر فایل site.js را به home.html اضافه کنید:

تگ script را اضافه کنید:

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

مرحله دهم – ایجاد تونل امن برای آزمودن اپلیکیشن

سرویس ورکرها برای فعال شدن عملکرد روی همه سایت‌ها به‌جز localhost به ارتباط امن نیاز دارند؛ زیرا در غیر این صورت ممکن است ارتباط کاربران به سرقت برود یا جعل شود. به همین خاطر، ما به کمک ngrok یک تونل امن ارتباطی ایجاد می‌کنیم.

پنجره ترمینال دوم را ایجاد کنید و بررسی کنید که حتماً در دایرکتوری home باشید:

اگر کار خود را روی نسخه به‌روزرسانی شده و تازه ۱۸.۰۴ سرور آغاز کرده‌اید، باید unzip را نصب کنید:

Ngrok را دانلود کنید:

Ngrok را به /user/local/bin انتقال دهید تا به دستور ngrok از ترمینال زیر دسترسی پیدا کنید:

در اولین پنجره ترمینال بررسی کنید که حتماً در دایرکتوری پروژه‌تان باشید و سپس سرور را فعال کنید.

شما باید این مرحله را پیش از ایجاد تونل امن برای اپلیکیشن خود اجرا کنید.

در پنجره دوم ترمینال خود به پوشه پروژه‌تان بروید و محیط مجازی‌تان را فعال کنید:

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

حالا می‌توانید خروجی زیر را که شامل اطلاعاتی درباره آدرس URL امن ngrok می‌شود، مشاهده کنید:

Ngrok_secure_url را از کنسول خروجی کپی کنید. حالا باید آن را به فهرست ALLOWED_HOSTS در فایل settings.py خود اضافه کنید.

یک پنجره ترمینال دیگر بازکرده و به پوشه پروژه خود بروید. حالا محیط مجازی را فعال کنید:

فایل settings.py را بازکنید:

فهرست ALLOWED_Hosts را با تونل امن ngrok به‌روزرسانی کنید:

به صفحه امن ادمین بروید. باید وارد صفحه با آدرس https://ngrok_secure_url/admin/. این صفحه به شکل زیر خواهد بود:

ngrok_login

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

در مرورگر خود به آدرس https://ngrok_secure_url بروید. حالا اعلانی ظاهر می‌شود که از شما برای به نمایش درآوردن نوتیفیکیشن‌ها کسب اجازه می‌کند. allow را انتخاب کنید تا به مرورگرتان اجازه دهید که پوش نوتیفیکیشن‌ها را دریافت کند و به اجرا درآورد:

allow_push_two

ثبت یک فرم کامل شده باید نوتیفیکیشنی شبیه به تصویر زیر را به نمایش درآورد:

Django-Webposh-final

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

اگر در پایان این مرحله نوتیفیکیشن دریافت کردید، یعنی اپلیکیشن شما همان‌طور که انتظار می‌رفته است عمل می‌کند.

شما اپلیکیشن وبی ایجاد کرده‌اید که پوش نوتیفیکیشن را روی سرور تحریک می‌کند و به کمک سرویس ورکرها نوتیفیکیشن‌ها را دریافت می‌کند و به نمایش درمی‌آورد. شما همچنین مراحل را برای کسب کلیدهای VAPID گذرانده‌اید که برای ارسال پوش نوتیفیکیشن از سرور اپلیکیشن کاملاً ضروری هستند.

کلام آخر

در این راهنمای مفصل آموختید که چگونه می‌توان کاربران را برای دریافت پوش نوتیفیکیشن ثبت‌نام کرد؛ سرویس ورکرها را نصب کرد و همچنین پوش نوتیفیکیشن‌ها را به کمک API نوتیفیکیشن به نمایش درآورد.

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

ابزار بهینه سازی وب هاست ایران

افزودن دیدگاه

کلیک برای ثبت دیدگاه