Raid on HTML5 Javascript API Extension 5—Other Extensions (Application Cache/Server Message/Desktop Notification)

The main API extensions have been summarized before. The following extensions will only play their greatest role in special occasions. Let’s take a brief look at them here. The following features are not supported by IE without exception. Application caching and server-side messaging are supported in other major browsers. Desktop notifications are currently only supported by Chrome.
Application Cache
Many times, we need to cache some pages that do not change frequently to improve access speed; and for some applications, we also want to be able to use them offline. In HTML5, you can easily implement these functions through a technology called "application caching".
In the implementation of application caching, HTML5 allows us to create a cache manifest file to easily generate an offline version of the application.
Implementation steps:
1. Enable caching of the page. It is very simple. You only need to include the manifest attribute in the html of the document:

Copy code

The code is as follows:

...

Every page containing this manifest attribute will be cached when the user accesses it. If the manifest attribute is not specified, it will not be cached (unless the page is specified directly in the manifest file). There is no unified standard for the manifest file extension. The recommended extension is ".appcache".
2. Configure the MIME type of the manifest file on the server side
A manifest file needs to be supported by the correct MIME-type. This file type is "text/cache-manifest". Must be configured on the web server used. For example: In Apache, you can add: AddType text/cache-manifest manifest in .htaccess.
3. Write a manifest file
The manifest file is a simple text file that tells the browser what content to cache (or what content not to cache). The
manifest file contains the following three sections:
• CACHE MANIFEST - Files under this list header will be cached after downloading.
• NETWORK - Files under this list title will require a connection to the server and will not be cached.
• FALLBACK - Displays a specific page if the files under this list title are inaccessible.
A complete file is shown in the example below:

Copy the code

The code is as follows:

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login. asp
FALLBACK:
/html5/ /offline.html

Tip:
# starts with a comment.
* can be used to represent all other resources or files. For example:

Copy code

The code is as follows:

NETWORK:
*

means that all resources or files will not be cached.
4. Update the cache
Once an application is cached, it will remain cached unless the following happens:
• The user deletes the cache
• The manifest file is modified
• The application cache is modified by the program
So once the file is cached, except for human modifications, the browser will continue to display the cached version content, even if you modify the server file. In order for the browser to update the cache, you can only modify the manifest file.
: Lines starting with "#" are comment lines, but can be used for other purposes. If your modification only involves an image or JavaScript function, those changes will not be re-cached. Updating the date and version in the comments is one way to get the browser to re-cache your file
: Browsers can have many different size limits for cached data (some browsers allow 5M cached data).

Copy code

The code is as follows:

Server message
Another commonly used scenario is: when the data on the server changes, how do you let the client know? This was done in the past: the page took the initiative to query the server for updates. According to the previous introduction, we know that two-way communication can be achieved using WebSocket. Here we introduce another new feature in HTML5: Server-Sent Events.
In HTML5, the object carrying this feature is the EventSource object.
The steps are as follows:
1. Check the browser’s support for the EventSource object. Everyone knows this:

Copy code
The code is as follows:

if(typeof(EventSource)!== "undefined")
{
// Yes! Server-sent events support!
// Some code.....
}else {
// Sorry! No server-sent events support..
}

2. Server-side message sending code
Server-side sending update message is very simple: after setting the content-type header information to "text/event-stream" , you can send the event. Take the ASP code as an example:

Copy the code
The code is as follows:

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: >> Server Time" & now())
Response. Flush()
%>

3. Browser-side message receiving code

Copy code
The code is as follows:

var source=new EventSource("demo_sse.php");
source.onmessage=function(event){
document.getElementById(" result").innerHTML =event.data "
";
};

Code description:
• Create an EventSource object and specify the page URL to send updates (here is demo_see.jsp)
• Every time an update is received, the onmessage event is triggered
• When the onmessage time is triggered, the obtained data is set to the element with id="result"
The EventSource object is in addition to the onmessage event In addition, there are onerror events for error processing, onopen events for connection establishment, etc.
Desktop notification - quasi-HTML5 feature
The desktop notification function allows the browser to notify users of messages even when it is minimized. This is the most natural combination with WebIM. However, the only browser that currently supports this feature is Chrome. Pop-up windows are something that everyone hates, so turning this feature on requires the user's permission.

Copy code
The code is as follows:

<script> function RequestPermission (callback) { window.webkitNotifications.requestPermission(callback); } function showNotification() { //Determine whether the browser supports notification through window.webkitNotifications if (!! window.webkitNotifications) { if (window.webkitNotifications.checkPermission() > 0) { RequestPermission(showNotification); } else { var notification =window.webkitNotifications.createNotification("[ imgurl]","Title","Body"); notification.ondisplay = function() { setTimeout('notification.cancel()', 5000); } notification.show (); } } } </script>

Open this page in the browser, and you will see a pop-up message in the lower right corner of the desktop. 5 second message window.
This feature is very simple to use, but during actual operation, the interference of the notification function to the user should be minimized and the occurrence of the notification function should be minimized.
The following are some experiences of online experts in making this application:
1. Make sure that only one notification appears when multiple messages are received;
This problem is easier to solve because the notification object has A property called "replaceId". After specifying this attribute, as long as a notification window with the same replaceId pops up, the previous pop-up window will be overwritten. In the actual project, all pop-up windows are assigned the same replaceId. However, it should be noted that this overwriting behavior is only valid in the same domain.
2. When the user is on the page where IM appears (the page is in Focus state), no notification will appear;
This problem is mainly to determine whether the browser window is in Focus state. Currently, in addition to monitoring the onfocus and onblur of the window Apart from the incident, there seems to be no better way. In the project, this method is used to record the Focus status of the window, and then when the message arrives, it is judged whether to pop up the window based on the Focus status.

Copy code
The code is as follows:

$(window).bind( 'blur ', this.windowBlur).bind( 'focus', this.windowFocus);

What needs to be noted when using this method is that the event point of event registration should be as early as possible. If the registration is too late, it will be easy to misjudge the status when the user opens the page and then leaves.
3. When the user uses multiple tabs to open multiple pages with IM, no notification will appear as long as one page is in the Focus state;
State sharing between multiple pages can be achieved through local storage:
• When the browser window is Focus, modify the value of the specified key in the local storage to "focus"
• When the browser window is Blur, modify the value of the specified key in the local storage to "blur".
It should be noted that when switching from one Tab to another Tab in Chrome, Blur may be written to the storage after Focus, so asynchronous processing is required when modifying the Focus state.

Copy code
The code is as follows:

/*window on focus event*/
//The delay is used to solve the problem of always letting Focus cover the Blur event of other Tabs when switching between multiple Tabs
//Note: If there is no Focus on the document before clicking Tab, clicking Tab will not Trigger Focus's
setTimeout( function(){
Storage.setItem( 'kxchat_focus_win_state', 'focus' );
}, 100);
/*window on blur event*/
Storage.setItem( 'kxchat_focus_win_state', 'blur' );

After realizing the above state sharing, after the new message arrives, you only need to check whether the value of 'kxchat_focus_win_state' in the local storage is blur. If The pop-up window is only for blur.
4. How to allow users to click on the notification floating layer to locate a specific chat window
The notification window supports onclick and other event responses, and the scope of the response function belongs to the page that created the window. The following code:

Copy code
The code is as follows:

var n = dn.createNotification (
img,
title,
content
);
//Make sure there is only one reminder
n.replaceId = this.replaceId;
n.onclick = function() {
//Activate the browser window that pops up the notification window
window.focus();
//Open the IM window
WM.openWinByID( data );
//Close the notification window
n.cancel();
};

The window object accessed in the onclick response function belongs to the currently created page, so it is easy to interact with the current page. The above code realizes that clicking on the pop-up window will jump to the corresponding browser window and open the IM window.
: Related events on the page often have uncertain timing, so our code should try not to assume that the order in which certain events are triggered is certain. For example, the above blur and focus events

Practical reference:
Official document: http://www.w3schools.com/html5/
A Chinese tutorial for html5: http: //www.gbin1.com/tutorials/html5-tutorial/