• مدیر سایت
• آگوست 10, 2019

راهنمای جامع Notification API

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

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

Notification API چیست و چرا اهمیت دارد؟

Notification API یک رابط برنامه‌نویسی تحت وب (Web API) است. این API به صفحات وب اجازه می‌دهد تا اعلان‌ها (نوتیفیکیشن‌ها) را در سطح سیستم‌عامل کاربر نمایش دهند. این یعنی پیام شما خارج از پنجره مرورگر و مستقیماً روی دسکتاپ کاربر ظاهر می‌شود. این ویژگی یک کانال ارتباطی مستقیم و مؤثر با کاربر ایجاد می‌کند.

اهمیت این ابزار زمانی مشخص می‌شود که بدانید می‌توانید کاربران را حتی زمانی که صفحه شما فعال نیست، دوباره با محتوای خود درگیر کنید. بنابراین، این یک روش عالی برای اطلاع‌رسانی‌های مهم، بازگرداندن کاربران غیرفعال و بهبود چشمگیر تجربه کاربری (UX) است.

مزیت‌های کلیدی استفاده از Notification API ✅

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

• 🚀 افزایش تعامل کاربر (User Engagement): با ارسال اعلان‌های به‌موقع، کاربران را تشویق می‌کنید تا به وب‌سایت شما بازگردند و با محتوای جدید تعامل داشته باشند.
• 🔔 اطلاع‌رسانی فوری: می‌توانید پیام‌های حیاتی، اخبار فوری یا پیشنهادات زمان‌دار را در لحظه به دست کاربر برسانید؛ بدون اینکه منتظر بمانید تا ایمیل خود را چک کند.
• 📈 بهبود نرخ بازگشت کاربر: نوتیفیکیشن‌ها یک یادآوری ملایم برای کاربرانی هستند که ممکن است سایت شما را فراموش کرده باشند. این کار به سادگی آن‌ها را به بازدید مجدد ترغیب می‌کند.
• 💡 تجربه کاربری بهتر: اگر به درستی استفاده شود، به کاربر حس ارزشمند بودن می‌دهد. برای مثال، اطلاع از وضعیت سفارش یا پاسخ به یک تیکت پشتیبانی، تجربه بسیار خوبی ایجاد می‌کند.
• 🌐 عدم نیاز به اپلیکیشن نیتیو: شما می‌توانید بسیاری از قابلیت‌های یک اپلیکیشن موبایل، مانند ارسال اعلان، را مستقیماً از طریق وب‌سایت خود ارائه دهید.

کاربردهای خلاقانه Notification API در دنیای وب

قدرت واقعی این API در کاربردهای متنوع آن نهفته است. تقریباً هر وب‌سایتی می‌تواند از آن برای اهداف مختلفی بهره ببرد.

• 🛒 فروشگاه‌های اینترنتی: ارسال نوتیفیکیشن برای یادآوری سبد خرید رها شده، اطلاع‌رسانی تخفیف‌های ویژه یا موجود شدن یک محصول پرطرفدار.
• 💬 شبکه‌های اجتماعی و پیام‌رسان‌ها: اعلام دریافت پیام جدید، درخواست دوستی یا واکنش به یک پست، دقیقاً مانند کاری که فیسبوک یا لینکدین انجام می‌دهند.
• 📊 ابزارهای مدیریت پروژه: یادآوری سررسید یک وظیفه (Task)، اختصاص یک کار جدید به کاربر یا دریافت یک دیدگاه از همکاران.
• 📰 وب‌سایت‌های خبری: ارسال فوری آخرین و مهم‌ترین اخبار (Breaking News) برای کاربرانی که به آن حوزه علاقه‌مند هستند.
• 🎟️ سیستم‌های رزرواسیون: یادآوری زمان پرواز، قرار ملاقات یا زمان شروع یک رویداد آنلاین.

راهنمای گام به گام پیاده‌سازی Notification API

پیاده‌سازی این API بسیار ساده‌تر از چیزی است که فکر می‌کنید. بیایید مراحل آن را با هم مرور کنیم. ما در این راهنما از جاوا اسکریپت خالص (Vanilla JavaScript) استفاده می‌کنیم تا کدها برای همه قابل درک باشند.

گام اول: بررسی پشتیبانی مرورگر

قبل از هر کاری، باید مطمئن شویم که مرورگر کاربر از Notification API پشتیبانی می‌کند. این کار با یک شرط ساده انجام می‌شود.

if (!("Notification" in window)) {
  console.log("مرورگر شما از قابلیت نوتیفیکیشن پشتیبانی نمی‌کند.");
}

این کد بررسی می‌کند که آیا شیء Notification در شیء window وجود دارد یا خیر.

گام دوم: دریافت مجوز از کاربر (Permission)

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

1. granted: کاربر اجازه را صادر کرده است.
2. denied: کاربر درخواست را رد کرده است.
3. default: کاربر هنوز تصمیمی نگرفته است (پنجره درخواست بسته شده).

بهترین روش برای درخواست مجوز، استفاده از Promise است که در نسخه‌های جدید این API پشتیبانی می‌شود.

Notification.requestPermission().then(permission => {
  if (permission === "granted") {
    console.log("مجوز برای ارسال نوتیفیکیشن دریافت شد.");
    // حالا می‌توانید نوتیفیکیشن را نمایش دهید
  } else {
    console.log("کاربر اجازه ارسال نوتیفیکیشن را نداد.");
  }
});

نکته مهم: این درخواست را زمانی به کاربر نمایش دهید که یک دلیل منطقی وجود داشته باشد؛ مثلاً پس از کلیک روی دکمه «مرا از اخبار مطلع کن».

گام سوم: ساخت و نمایش نوتیفیکیشن

پس از دریافت مجوز، ساخت یک نوتیفیکیشن بسیار ساده است. کافی است یک نمونه جدید از شیء Notification بسازید. این شیء دو پارامتر اصلی می‌گیرد: title و یک آبجکت options.

const title = "یک عنوان جذاب!";
const options = {
  body: "اینجا متن اصلی نوتیفیکیشن قرار می‌گیرد.",
  icon: "URL_TO_YOUR_ICON.png", // آدرس آیکون
  dir: "rtl", // برای متون فارسی
  lang: "fa-IR", // زبان فارسی
  tag: "unique-tag-for-notification" // برای جلوگیری از نمایش نوتیفیکیشن‌های تکراری
};

const notification = new Notification(title, options);

یک مثال جامع و کاربردی

حالا تمام مراحل بالا را در یک کد کامل و عملی ترکیب می‌کنیم. فرض کنید یک دکمه در صفحه HTML خود داریم:

<button id="notifyBtn">یک نوتیفیکیشن به من نشان بده!</button>

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

document.getElementById('notifyBtn').addEventListener('click', () => {
  // ۱. بررسی پشتیبانی مرورگر
  if (!("Notification" in window)) {
    alert("مرورگر شما از نوتیفیکیشن پشتیبانی نمی‌کند.");
    return;
  }

  // ۲. بررسی وضعیت مجوز فعلی
  if (Notification.permission === "granted") {
    // اگر مجوز قبلا داده شده، نوتیفیکیشن را نمایش بده
    showNotification();
  } else if (Notification.permission !== "denied") {
    // در غیر این صورت، درخواست مجوز کن
    Notification.requestPermission().then(permission => {
      if (permission === "granted") {
        showNotification();
      }
    });
  }
});

function showNotification() {
  const title = "پیام جدید از وب‌سایت ما 📣";
  const options = {
    body: "شما با موفقیت توانستید یک نوتیفیکیشن ارسال کنید!",
    icon: "https://p.api.ir/icon.png", // آدرس یک آیکون نمونه
    dir: "rtl",
    lang: "fa-IR"
  };

  const notification = new Notification(title, options);

  // می‌توانید برای نوتیفیکیشن رویداد کلیک تعریف کنید
  notification.onclick = () => {
    window.open("https://p.api.ir"); // با کلیک، یک لینک باز شود
  };
}

ثبت‌نام و دریافت API Key از پلتفرم‌ها

اگرچه Notification API به تنهایی برای نمایش اعلان در زمانی که سایت باز است عالی عمل می‌کند، اما برای ارسال Push Notification (یعنی ارسال اعلان حتی زمانی که مرورگر بسته است) به یک Service Worker و یک پلتفرم واسط نیاز دارید. این پلتفرم‌ها به شما کمک می‌کنند تا کاربران را مدیریت کرده و پیام‌ها را به صورت انبوه ارسال کنید.

برای شروع، کافی است به یک پلتفرم ارائه‌دهنده خدمات پوش نوتیفیکیشن مانند api.ir مراجعه کنید. مراحل کلی به این صورت است:

1. در لینک p.api.ir ثبت‌نام کنید.
2. یک پروژه جدید تعریف کرده و API Key خود را دریافت نمایید.
3. دستورالعمل‌های پلتفرم را برای ادغام Service Worker در سایت خود دنبال کنید.

جمع‌بندی و گام بعدی 🎯

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

حالا نوبت شماست! آیا تا به حال از این API در پروژه‌های خود استفاده کرده‌اید؟ تجربیات و چالش‌های خود را در بخش نظرات با ما به اشتراک بگذارید.

• برچسب ها:
• api اعلان مرورگر
• وب سرویس اعاتن مرورگر
• وب سرویس پاپ اپ