نحوه ارسال Push Notification با جاوا اسکریپت

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

اعلان های جاوا اسکریپت راهی برای ارسال پیام به کاربران شما در زمان واقعی است. می‌توانید از آن‌ها برای اطلاع‌رسانی در مورد به‌روزرسانی‌های وب‌سایت، پیام‌های چت جدید، ایمیل‌ها یا هر فعالیت رسانه‌های اجتماعی استفاده کنید. همچنین می‌توانید از اعلان‌ها برای یادآوری‌های تقویم (مانند یک جلسه نزدیک در Google Meet یا Zoom) استفاده کنید.

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

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

برای ایجاد یک اعلان، باید کلاس Notification را برای ایجاد یک شیء فراخوانی کنید. این به شما امکان دسترسی به ویژگی ها و روش های مختلفی را می دهد که می توانید برای پیکربندی اعلان خود از آنها استفاده کنید. اما قبل از ایجاد اعلان، ابتدا باید از کاربر اجازه درخواست کنید.

جاوا اسکریپت زیر اجازه ارسال اعلان های کاربر را درخواست می کند. تماس requestPermission پیامی را برمی‌گرداند که نشان می‌دهد آیا مرورگر اجازه اعلان‌ها را می‌دهد یا خیر:

const button = document.querySelector('button')
  button.addEventListener("click", ()=> {
  Notification.requestPermission().then(permission => {
    alert(permission)
  })
})

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

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

ارسال اعلان های اولیه

شما با ایجاد یک شی اعلان با کلمه کلیدی جدید، یک اعلان فشار ایجاد می کنید. برای آشنایی عمیق با برنامه نویسی شی گرا، می توانید به راهنمای ما در مورد نحوه ایجاد کلاس در جاوا اسکریپت مراجعه کنید.

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

const button = document.querySelector('button')
button.addEventListener("click", ()=> {
  Notification.requestPermission().then(perm => {
    if(perm === 'granted') {
      new Notification("Example notification")
    }
  })
})

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

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

ویژگی های اعلان های پیشرفته

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

دارایی بدن

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

const button = document.querySelector('button')
button.addEventListener("click", ()=> {
  Notification.requestPermission().then(perm => {
    if(perm === 'granted') {
      new Notification("Example notification", {
       body: "This is more text",
     })
    }
  })
})

اگر این کد را اجرا کنید، متن اصلی در اعلان فشار زیر سرصفحه اعلان مثال نشان داده می شود.

ویژگی داده

اغلب اوقات ممکن است بخواهید داده های سفارشی را به اعلان ها اضافه کنید. شاید بخواهید در صورت رد شدن مجوز، پیام خطای خاصی را نمایش دهید یا داده هایی را که از یک API دریافت کرده اید ذخیره کنید. برای همه این موارد، می‌توانید از ویژگی داده برای افزودن داده‌های سفارشی به اعلان خود استفاده کنید.

button.addEventListener("click", ()=> {
  Notification.requestPermission().then(perm => {
    if(perm === 'granted') {
      const notification = new Notification("Example notification", {
       body: "This is more text",
       data: {hello: "world"}
     })
    
     alert(notification.data.hello)
    }
  })
})

شما می توانید به داده ها از ویژگی داده مانند آنچه در بلوک کد بالا نشان داده شده است (در داخل alert()) دسترسی داشته باشید.

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

const notification = new Notification("Example notification", { 
  body: "This is more text",
  data: {hello: "world"} 
})

notification. addEventListener("close", e => {
  console.log(e.target.data.hello)
})

این یک راه عالی برای انتقال داده ها در صورت نیاز به انجام کاری زمانی است که شخصی یک اعلان را می بندد یا روی آن کلیک می کند. جدا از رویداد بسته (که هنگام بستن اعلان اجرا می شود)، باید این شنوندگان رویداد را در ذهن خود نگه دارید:

• show: زمانی اجرا می شود که اعلان نشان داده شود.
• click: زمانی اجرا می شود که کاربر در هر نقطه ای از اعلان کلیک کند.
• خطا: زمانی اجرا می شود که اجازه جاوا اسکریپت برای ارسال اعلان ها را رد کنید.

نماد ویژگی

ویژگی icon برای افزودن یک نماد به اعلان فشار است. با فرض اینکه شما یک نماد نماد به نام logo.png در فهرست فعلی دارید، می توانید از آن در اعلان های خود مانند این موارد استفاده کنید:

const notification = new Notification("Example notification", { 
  icon: "logo.png"
})

اگر برای پیوند دادن به فایل های خود مشکل دارید، باید عملکرد URL های نسبی و URL های مطلق را بدانید.

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

برچسب ویژگی

هنگامی که ویژگی برچسب را در اعلان خود تنظیم می کنید، اساساً به اعلان یک شناسه منحصر به فرد می دهید. اگر دو اعلان یک برچسب داشته باشند، نمی توانند با هم وجود داشته باشند. در عوض، جدیدترین اعلان، اعلان قدیمی‌تر را بازنویسی می‌کند.

مثال دکمه قبلی ما (بدون برچسب) را در نظر بگیرید. اگر بخواهید سه بار پشت سر هم روی دکمه کلیک کنید، سه اعلان ظاهر می شود و آنها روی هم قرار می گیرند. حالا فرض کنید تگ زیر را به اعلان اضافه کرده اید:

const notification = new Notification("Example notification", { 
  body: "This is more text",
  tag: "My new tag"
})

اگر دوباره روی دکمه کلیک کنید، فقط یک کادر اعلان ظاهر می شود. هر کلیک بعدی اعلان قبلی را بازنویسی می کند، بنابراین صرف نظر از اینکه چند بار روی دکمه کلیک می کنید فقط یک اعلان نشان داده می شود. اگر می خواهید داده های پویا (مانند Math.random()) را به بدنه اضافه کنید، مفید است:

const notification = new Notification("Example notification", { 
  body: Math.random()
  icon: "logo.png",
  tag: "My body tag"
})

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

نمونه ای از Push Notification با استفاده از جاوا اسکریپت

مثال زیر هر زمانی که تمرکز خود را روی صفحه خود از دست می دهید (یعنی زمانی که صفحه را می بندید یا یک برگه جدید باز می کنید) را تشخیص می دهد. در این مورد، کد یک اعلان ارسال می کند و از شما می خواهد که برگردید:

let notification
document.addEventListener("visibility-change", ()=> {
  if(document.visibilityState === "hidden") {
    notification = new Notification("Come back please", {
      body: "Don't leave just yet :("
      tag: "Come Back"
    })
  } else {
    notification.close()
  }
})

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

درباره جاوا اسکریپت بیشتر بیاموزید

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

منبع مقاله