ساده ترین راه برای نمایش Notification (هشدار دهنده) های مرورگر

بخش: توسعه وب 366 بار مشاهده شده چهارشنبه ۹ فروردین ۹۶ 0 نظر ارسال شده
ساده ترین راه برای نمایش Notification  (هشدار دهنده) های مرورگر

API برای مرورگر (Browser) دسکتاپ و موبایل این امکان را فراهم می کند که بتوانند   Notification هایی با محتوای سفارشی را نمایش دهند. در گذشته این امکان وجود نداشت ولی در حال حاضر API با بسیاری از نسخه های مرورگرها سازگار است و بر روی بسیاری از وب سایت ها و اپلیکیشن ها پیاده سازی شده است.

در اینجا قصد داریم سریعترین راه برای راه اندازی Notification  های دسکتاپ با استفاده از کتابخانه Push.js را نمایش دهیم.

راه اندازی پروژه

ما می خواهیم یک اپلیکیشن نمایشی ساده  بسازیم که ابتدا درخواست مجوز(Permission)  می کند و سپس Notification  را بر روی Button click (دکمه قابل کلیک) ارسال می کند. برای سادگی ما تنها در یک فایل index.html با اسکریپت های درون خطی کار خواهیم کرد. منبع کامل در GitHub در دسترس است.

اولین کار این است که کتابخانه Push.js را اضافه کنیم. کتابخانه Push.js هم می تواند از طریق npm  و یا یک فایل محلی بارگذاری شود، اما ساده ترین راه برای پیاذه سازی CDN است.

<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.11/push.min.js"></script>

کتابخانه Push.js برای کار با Notification  های وب  لازم نیست، اما آن یک API ای ارایه می دهد که کار با آن در مقایسه با Notification  های API بومی (native Notification API ) آسان تر  است. Push.js  می تواند مجوز (Permission) ، سرویس به کاربران و هم چنین تناقضات Cross-browser ( Cross-Browse در واقع به این معناست که کد های HTML و CSS و کد های  Side Client  نوشته شده در یک وب سایت، به شکلی نوشته شوند که در تمامی مرورگرها  به یک فرم دیده شده و قابل اجرا باشند از مرورگرهای متداول می توان به نسخه های اینترنت اکسپلورر یا IE مایکروسافت ، فایرفاکس موزیلا ، کروم گوگل ، سافاری اپل ، اپرا و ... اشاره کرد.) را مدیریت کند.

درخواست Permission (مجوز)

کاربران ابتدا باید به ما اجازه بدهند تا ما بتوانیم Notification  را برای انها ارسال کنیم . این از طریق یک گفتگوی درون مرورگری که احتمالا قبلا دیده اید انجام می شود.

permission request

دیالوگ درخواست مجوز

وقتی ما می خواهیم اولین Notification را ارسال کنیم Push.js به طور خودکار درخواست مجوز می کند. اما، در بسیاری از موارد ما می خواهیم به صورت دستی از قبل از کاربران درخواست مجوز کنیم:

Push.Permission.request();

این کار یک کفتگوی درون مرورگری را باز می کند که کاربر را وادار به پذیرش و یا رد Notification ارسال شده می کند. اگر اجازه قبلا داده شده و یا رد شده باشد، کد بالا نادیده گرفته می شود.

ایجاد یک Notification

برای نمایش یک Notification ما به سادگی روش Push.createt فراخوانی کرده، که انتظار می رود یک عنوان (Title) و یک شی اختیاری (Optional Object) همه انواع تنظیمات مفید و تماس های مجدد را نگهداری کند:

Push.create('Hi there!', {
    body: 'This is a notification.',
    icon: 'icon.png',
    timeout: 8000,               // Timeout before notification closes automatically.
    vibrate: [100, 100, 100],    // An array of vibration pulses for mobile devices.
    onClick: function() {
        // Callback for when the notification is clicked. 
        console.log(this);
    }  
});

شما می توانید تمامی گزینه های در دسترس را از اینجا مشاهده کنید.

در نسخه ی نمایشی ما یک Notification بر روی Button click نمایش می دهیم،  اما تعامل با کاربر نیاز نیست. Notification های جدید می تواند هر زمانی ایجاد شود، از جمله زمانی کهTab  فعال نباشد.

notification

Notification مرورگر در کروم دسکتاپ

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

سازگاری مرورگر

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

نکته قابل توجه دیگر این است که به منظور نمایش Notification در اندروید، اپلیکیشن وب باید روی HTTPS میزبانی شود.

مطالب بیشتر

API Notification در دنیای مرورگرها چیزهای جدیدی هستند و ما انتظار داریم که بیشتر با انها سرو کار داشته باشیم خصوصا از زمانی که Progressive Web Apps بسیار محبوب شده اند. اگر می خواهید بیشتر در این باره بدانید می توانید به موارد زیر رجوع کنید:

https://developer.mozilla.org/en-US/docs/Web/API/Push_API

https://medium.com/m/global-identity?redirectUrl=https://blog.tylernickerson.com/push-js-an-introduction-49291ac986e8#.hlxc13ir2

https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/good-notification

گروه تحقیقات سافت اسکیل
گروه تحقیقات سافت اسکیل

گروه تحقیقات سافت اسکیل به منظور افزایش سطح دانش جامعه، سعی در ترجمه، تالیف و تولید محتوای با کیفیت در زمینه های مختلف نرم افزاری دارد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

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

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...