HTML5 of the actual combat desktop notification

The desktop notification feature enables a browser to notify a user of a message even if it is minimized. This is the most natural combination with Webim. However, browsers that currently support the desktop Notification feature are only chrome5+.

The basics of notifications can be referenced in the following documents:

Standard: Http://dev.w3.org/2006/webapi/WebNotifications/publish/Notifications.html

Usage Tutorial: http://www.html5rocks.com/en/tutorials/notifications/quick/

This article primarily records some of the experience of notification functionality when it is actually used in Web im.

　　

In the actual use of the process, should try to reduce the notification function to the user's interference, the maximum reduction of the presence of notification function, which need to solve the following several issues:

1. Ensure that only one notification appears when multiple messages are received;

2. When the user is in the page where IM appears (the page is in Focus state), no notification will appear;

3. When a user uses multi-tab to open multiple pages that exist IM, no notification will appear if one of the pages is in focus state;

In addition, there is a need to address a convenience issue

4. How to let the user click on the notification floating layer to locate the specific Chat window

　　1. Only one notification window pops up

This problem is better resolved because the notification object has a property named "Replaceid". When this property is specified, the window that pops up will be overwritten as long as the notification window pops up with the same replaceid. In the actual project, a Replaceid is assigned to all the popup windows. However, it is important to note that this override is only valid in the same domain.

　　2. Ensure the page focus does not pop up the notification window

The main question is whether the browser window is in the focus state, and there seems to be no better way than to listen to the onfocus and onblur events of window. In the project, this is the way to record the focus state of a window and then, when the message arrives, to determine whether a pop-up window is based on the focus state.

$ (window). bind (' blur ', This.windowblur). Bind (' Focus ', this.windowfocus);

It is important to note that the event registration event point should be as forward as possible, if the registration is too late, when the user opens the page and then leave the error will be very prone to state.

　　3. Identify the focus state with multiple tabs

State sharing between multiple pages can be achieved through local storage:

browser window focus when modifying the value of the specified key in the local store is "focus"

Modify the value of the specified key in the local store when the browser window blur "Blur"

It is important to note that when you switch from one tab to another tab under Chrome, Blur is likely to be written to the store after focus, so it needs to be processed asynchronously when you modify the focus state.

/*window on Focus Event */ The Blur event that always lets focus overwrite the other tab when the delay is used to resolve multiple tab transitions Note: If you don't have focus on the document before clicking tab, clicking Tab will not trigger the focus SetTimeout (function () { Storage.setitem (' kxchat_focus_win_state ', ' Focus '); }, 100); /*window on Blur event */ Storage.setitem (' kxchat_focus_win_state ', ' blur ');

After you implement the above state share, after the new message arrives, you only need to see if the value of ' kxchat_focus_win_state ' is blur in the local store, and if it is blur, the window pops up.

　　4. Event response for the notification window

The Notification window supports event responses such as onclick, and the scope of the response function belongs to the page that created the window. The following code:

var n = dn.createnotification ( Img Title Content ); Make sure there's only one reminder N.replaceid = This.replaceid; N.onclick = function () { Activates the browser window that pops up the notification window Window.focus (); Open IM Window Wm.openwinbyid (data); Close the Notification window N.cancel (); };

The Window object that is accessed in the onclick response function belongs to the currently created page, so it is convenient to interact with the current page. The above code is implemented by clicking the Pop-up window to jump to the corresponding browser window and open the IM window.

Specific implementations can enter the Http://www.kaixin001.com experience Webim in Chrome.

HTML5 of the actual combat desktop notification