Browser desktop notifications)

Source: Internet
Author: User

Recently, we are working on the background management system of the company. When there is a task, we need to notify the client. However, the client may be doing something else, and the browser may be minimized, this makes it very difficult to see notifications. It is found that some browsers can use noitfications. A prompt box is displayed in the notification area of the desktop and displayed at the beginning of the desktop, which is very convenient to see. I will simply encapsulate it to make it suitable for common use scenarios.
The function is similar to webqq Message notification.

Project address: https://github.com/rentiansheng/notification

Introduction to chrome desktop notifications

Used for Network Office reminders in other B/S.
Send notifications when the page is minimized
The content is displayed in the lower right corner of the screen.

Dependency
  1. PC Chrome browser.
  2. Mobile Android dolphin Browser
Notes

The notification permission is based on the site (or domain name). Only one permission is required for the pages below the same site.
Suppose you do not disable it. Will not show pass

Set-> privacy settings select the following content settings-> notification
You cannot obtain the permission again.
The permission can be viewed in the same menu as that in the browser.

Set-> privacy settings select the following content settings-> notification

Suppose you close or refresh the page. The previous notifications cannot be controlled.

Use
  1. Reference the notify. JS File



    <script src="notifiy.js"></script>
  2. Browser configuration

    Check whether the browser supports the desktop notification function



    Notifier.HasSupport();


    Get desktop notification permission



    Notifier.RequestPermission();
  3. Set the notification display mode (optional. Do not set the default mode for the consumer)



    Notifier. modelall (); // default mode. All are displayed. In Linux, there are generally three. The window is displayed in the notification area. Notifier. modelupdate (); // update mode, where the last notification is located, notifier. modelcount (c); // limit the number of notifications displayed on the current page. It is assumed that the number of notifications is three (the number of notifications can be changed through limit C ). When the limit is exceeded, the earliest notification is disabled. notifier. modeltimeout (CT); // The timeout mode disappears. It is displayed that you voluntarily disappear for a certain period of time.
  4. Send notification



    Notifier. Y (icon, title, message); // display desktop notifications. icon: Image address title: Notification title message: Notification content
  5. Closing Method



    Notifier. clse (type); // type = 1 close the previous notifier that was opened earliest with another value. closepre (); // close the notifier notification that has been opened recently. closelast (); // close the notifier of the earliest display notification. closeall (); // close all notifications
  6. Other methods



    Notifier. getpermission (); // obtain the permission to use the notification. The value 0 indicates that permission 1 has been obtained and permission 2 is required. notifier is forbidden. isgetpermission (); // whether the user permission for the notification has been obtained notifier. disable (); // whether to disable notifications

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.