The main API extensions have been summarized earlier. The following extensions will only play the greatest role in dedicated occasions. Let’s take a brief look here. Without exception, IE does not support the following features. Application cache and server message are supported in other mainstream browsers. Desktop notifications are currently only supported by Chrome.
Application CacheMany times, we need to cache some pages that are not changed frequently to improve access speed; and for some applications, we also hope to use them offline. In HTML5, you can easily implement these functions through a technology called application caching.
In the implementation of application cache, HTML5 allows us to create a cached manifest file to easily generate an offline version of the application.
Implementation steps :1. Enable page caching, it is very simple. You only need to include the manifest attribute in the html of the document:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
Each page containing this manifest attribute will be cached when the user accesses it. If the manifest property is not specified, it will not be cached (unless the web page is directly specified in the manifest file). There is no unified standard for manifest file extension, and 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, which is text/cache-manifest. It must be configured on the web server used. For example: In Apache, you can add: AddType text/cache-manifest manifest in .htaccess.
3. Write manifest file
The manifest file is a simple text file that tells the browser what to cache (or what to cache).
The manifest file contains the following three parts:
• CACHE MANIFEST - The files under this list title will be cached after downloading.
• NETWORK - The file under this list title will require connection to the server and will not be cached.
• FALLBACK - Displays a specific page if the file under this list title is not accessible.
The complete file is shown in the following example:
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /offline.html
hint:
Representative comments starting with #.
* Can be used to represent all other resources or files. For example:
NETWORK:
*
It means that all resources or files will not be cached.
4. Update the cache
Once an app is cached, it will remain cached unless the following situation occurs:
• The user deleted the cache
• The manifest file is modified
• The application cache is modified by the program
So once the file is cached, in addition to artificial modifications, the browser will continue to display the cached version content, even if you modify the server file. In order to make the browser update the cache, you can only modify the manifest file.
: The line starting with # is a comment line, but it can have other uses. If your modification only involves one image or javascript function, those changes will not be recachedated. Update dates and versions in comments is a way to get your browser to recache your files
: Browsers can have many cached data with different size limits (some browsers allow 5M cached data).
<strong>Server Message</strong>
Another common scenario is: when the data on the server changes, how to let the client know? This was the previous practice: the page actively checks whether there are updates on the server. According to the previous introduction, we know that using WebSocket can achieve two-way communication. Here we introduce another new feature in HTML5: Server-Sent Events.
In HTML5, the object that hosts this feature is the EventSource object.
The steps for use are as follows:
1. Check the browser's support for EventSource objects, everyone knows this:
if(typeof(EventSource)!=="undefined")
{
// Yes! Server-sent events support!
// Some code...
}else {
// Sorry! No server-sent events support..
}
2. Server-side sending message code
Sending update messages on the server side is very simple: after setting the content-type header information to text/event-stream, you can send events. Take ASP code as an example:
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: >> Server Time" & now())
Response.Flush()
%>
3. Receive message code on the browser side
var source=new EventSource("demo_sse.php");
source.onmessage=function(event){
document.getElementById("result").innerHTML+=event.data+"
";
};
Code description:
• Create an EventSource object, specifying the page URL to send updates (here is demo_see.jsp)
• After each update is received, the onmessage event is triggered
• When the onmessage time is triggered, set the resulting data to the element with id=result
In addition to the onmessage event, the EventSource object also handles error onerror events, onopen events established by connections, etc.
Desktop Notifications - Quasi-HTML5 FeaturesThe desktop notification feature allows the browser to notify users of messages even if it minimizes the status. This is the most natural combination with WebIM. However, currently only Chrome is the browser that supports this feature. Pop-up windows are something that everyone hates, so you need to get the user's permission to enable this feature.
<script>
function RequestPermission(callback) {
window.webkitNotifications.requestPermission(callback);
}
function showNotification() {
//Term 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 your browser and you will see a message window that lasts for 5 seconds pop up in the lower right corner of the desktop.
This feature is very simple to use, but in actual operation, the interference of notification function to users should be minimized and the occurrence of notification function should be minimized.
Here 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 named replaceId. After specifying this property, as long as the notification window with the same replaceId pops up, it will overwrite the previously popped up window. In the actual project, all pop-up windows are assigned an identical replaceId. However, it should be noted that this coverage behavior is only valid in the same domain.
2. When the user is in the page where the IM appears (the page is in the Focus state), there will be no notification;
This problem is mainly to determine whether the browser window is in the Focus state. Currently, there seems to be no better way to monitor the onfocus and onblur events of the window. In the project, this way is used to record the Focus status of the window, and then determine whether the pop-up window is based on the Focus status when the message arrives.
$(window).bind( 'blur', this.windowBlur).bind( 'focus', this.windowFocus);
What you need to pay attention to when using this method is that the event registration point should be as high as possible. If the registration is too late, it is easy to cause status misjudgment when the user opens the page and leaves.
3. When a 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 focusing on the browser window, modify the value of the specified key in the local storage to focus.
• When the browser window Blur is modified to 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 in Chrome, Blur may be written to storage more than Focus, so it requires asynchronous processing when modifying the Focus state.
/*window on focus event*/
//Use delay is to solve the problem of switching between multiple tabs, always let Focus overwrite the Blur event of other tabs.
//Note: If you do not focus on the document before clicking Tab, clicking Tab will not trigger Focus.
setTimeout( function(){
Storage.setItem( 'kxchat_focus_win_state', 'focus' );
}, 100);
/*window on blur event*/
Storage.setItem( 'kxchat_focus_win_state', 'blur' );
After implementing 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, and if it is blur, the pop-up window will be popped up.
4. How to let users click on the notification floating layer to locate specific chat windows
The notification window supports event responses such as onclick, and the scope of function in the response function belongs to the page where the window was created. The following code:
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 can easily interact with the current page. The above code implements that clicking on the pop-up window will jump to the corresponding browser window and open the IM window.
: The related events in the page are often indefinitely time-series, so our code tries not to assume that the order of triggering certain events 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/