Push notificationها

Push notificationها روشی جذاب برای تعامل با کاربران هستند. به کمک قدرت service workerها، حتی وقتی برنامه شما در کانون توجه نیست نیز می‌توان notification را به دستگاه تحویل داد.

service worker مربوط به Angular امکان نمایش push notificationها و مدیریت رویداد کلیک روی notification را فراهم می‌کند.

برای آشنایی بیشتر با APIهای مرورگر درگیر، Push API و استفاده از Notifications API را ببینید.

payload مربوط به notification

برای فراخوانی push notification، پیامی با payload معتبر push کنید. برای راهنمایی به SwPush مراجعه کنید.

Devtools -> Application -> Service Workers را باز کنید و از ورودی Push برای ارسال payload از نوع JSON مربوط به notification استفاده کنید.

مدیریت کلیک روی notification

رفتار پیش‌فرض رویداد notificationclick، بستن notification و اطلاع دادن به SwPush.notificationClicks است.

با افزودن ویژگی onActionClick به شیء data و ارائه entry به نام default می‌توانید عملیات دیگری را برای اجرا هنگام notificationclick مشخص کنید. این ویژگی به‌خصوص زمانی مفید است که هنگام کلیک روی notification هیچ client بازی وجود ندارد.

{
  "notification": {
    "title": "New Notification!",
    "data": {
      "onActionClick": {
        "default": {"operation": "openWindow", "url": "foo"}
      }
    }
  }
}

عملیات

service worker مربوط به Angular از عملیات زیر پشتیبانی می‌کند:

actionها

actionها راهی برای سفارشی کردن نحوه تعامل کاربر با notification فراهم می‌کنند.

با ویژگی actions می‌توانید مجموعه‌ای از actionهای موجود را تعریف کنید. هر action به‌شکل دکمه‌ای نمایش داده می‌شود که کاربر برای تعامل با notification می‌تواند روی آن کلیک کند.

افزون بر این، با استفاده از ویژگی onActionClick روی شیء data می‌توانید هر action را به عملیاتی پیوند دهید که هنگام کلیک روی دکمه متناظر انجام شود:

{
  "notification": {
    "title": "New Notification!",
    "actions": [
      {"action": "foo", "title": "Open new tab"},
      {"action": "bar", "title": "Focus last"},
      {"action": "baz", "title": "Navigate last"},
      {"action": "qux", "title": "Send request in the background"},
      {"action": "other", "title": "Just notify existing clients"}
    ],
    "data": {
      "onActionClick": {
        "default": {"operation": "openWindow"},
        "foo": {"operation": "openWindow", "url": "/absolute/path"},
        "bar": {"operation": "focusLastFocusedOrOpen", "url": "relative/path"},
        "baz": {"operation": "navigateLastFocusedOrOpen", "url": "https://other.domain.com/"},
        "qux": {"operation": "sendRequest", "url": "https://yet.another.domain.com/"}
      }
    }
  }
}

مطالب بیشتر درباره service workerهای Angular

ممکن است مطالب زیر نیز برایتان مفید باشند: