Home > Tutorials > Html Tutorials

Web Communications, webcommunications

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Web Communications, webcommunications

Those who have used QQ, Gtalk, and so on should have been harassed by their message reminders. In fact, this is not a big deal for desktop applications. However, the same technology is migrated to another platform, such as Web applications, it's not that simple, so W3C hasn't finalized it yet, and the support of various browser vendors is also different.

Today, when there are no projects at hand, I tried Web Notifications. Yes, the legendary Web Notifications can also be simply described as message reminders, in terms of its forms, it is quite rich in W3C definitions. Next, let's take a look at the official documents (most of the documents below are translated from W3C or the official website of the browser, so you can rest assured that their reliability is high. But some of the professional words are not translated.) Finally, let's look at a simple example.

Definition

 

Ambient notification:No user operation is required to automatically pop up or disappear the message window; Interactive notification:Users can pass information through the operation and application message window; Persistent notification:A message window that is displayed until the user releases it; Notification platform:The desktop message window is separated from the UA Message Platform. For example, Growl in MacOS, NotifyOSD in Linux, and notification API in Windows; Simple notification:A simple message reminder consisting of one icon, one line, or two lines of text; Web notification:A message reminder determined by a fundamental Web application, such as HTML and SVG;

 

 

Here we will share the following 5th types: Simple notification. We can define it as a "Simple message reminder" and follow the original version: Web Notifications.

 

Example

As this document has not yet been finalized, as mentioned above, several browsers currently support different versions. After searching for relevant materials and testing, currently, only the Chrome version is available, so the article will be updated continuously.

Chrome

The prerequisite is to first Update Google Chrome to version 10.0 or later; enable the desktop message function ("Under the Hood"-> "Privacy"-> "Content settings"-> "Notifications ", select "Allow all sites to show desktop categories ".)

1 <! DOCTYPE html>
2 3 4 <meta charset = "UTF-8"/>
5 <title> Web communications </title>
6 7
8 <body>
9 </body>
10 <script type = "text/javascript">
11 var myNotifications = window. webkitNotifications;
12 if (myNotifications. checkPermission () = 1 ){
13 myconfigurications. requestPermission ();
14} else if (myications ications. checkPermission () === 0 ){
15 var notification = myications ications. createNotification ('images/message.jpg ', 'new Message received', 'the html5 has send you an email .');
16 notification. ondisplay = function () {setTimeout ('notification. cancel () ', 5000 );}
17 notification. show ();
18} else {
19 alert ('permission has been denied .');
20}
21 </script>

Open this page in the browser and you will see a message window lasting 5 seconds in the lower right corner of the desktop. For example:

 

Chrome provides a simple management function for this window. When you click the "function management" icon, you will find "Disable desktop pop-up message window", "Settings" (jump to the communications management mentioned above), and "manage the display position of this window ".

In this example, the message window function is not enabled. What should I do? You may have noticed "myications ications. requestPermission ()" in the Code. The function of this Code is to request permissions from the user. Now let's try setting the browser's "Notifications" permission to "Ask me when a site wants to show desktop notifications (recommended)" And then refresh this window, I found that there was no pop-up window at all, and there was no pop-up window requesting permissions from the user. Why? (See Issue 31736). The following figure shows the 13th replies:Not a Bug, Feature. desktop configurications can only be triggered via a user action. typing into the JavaScript console has the same effect as raw javascript code embedded into the web page (no user action ). typing the javascript into the location bar, however, represents a user-action (the user is intentionally visiting a javascript link to enable communications, probably for sites that tend to use href = "javascript: "instead of onclick = "". i'm pretty sure this is a non-issue.

This is not a Bug. Desktop messages can only be triggered by users. Running in Javascript runtime windows, addresses, and directly running in Javascript is not a user's active behavior, the solution is to let the user trigger the relevant Code. For example, by using a hyperlink, You need to point the href or onclick attribute of the link to your code snippet.

In this case, the above Code is changed to the following:

1 <! DOCTYPE html>
2 3 4 <meta charset = "UTF-8"/>
5 <title> The Essential Guide to HTML5 </title>
6 7
8 <body>
9 <a href = "javascript: popNotifications ();"> click me </a>
10 </body>
11 <script type = "text/javascript">
12 function popNotifications (){
13 var myNotifications = window. webkitNotifications;
14 if (myNotifications. checkPermission () = 1 ){
15 myconfigurications. requestPermission ();
16} else if (myications ications. checkPermission () === 0 ){
17 var notification = myications ications. createNotification ('images/list1.jpg ', 'new Message Received ed', 'the html5 has send you an email .');
18 notification. ondisplay = function () {setTimeout ('notification. cancel () ', 5000 );}
19 notification. show ();
20} else {
21 alert ('permission has been denied .');
22}
23}
24 </script>
25 Now, run the new page. When you click "Click me", the request permission prompt is displayed,

 

Click "Allow" and click "Click me" again. The message window is displayed. This is not exactly what we need. Haha, it has been completely successful. However, it is worth looking back at the browser settings after the permission is granted, such:

The browser has added our website to the Notifications White List (marked in red). That is to say, in the future, all desktop message windows from this website no longer need to request permissions to pass directly.

PS: Other browser versions will be updated in the future.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
genesys communications midco communications riedel communications communications api vocera communications nextiva communications bridgewave communications
Related Article
What is the META tag in HTML? Introduction to META Tag proper...
An article that allows you to read basic HTML rules and Web p...
How does HTML set the background color? HTML background color...
HTML5 new label--nav label Introduction
What are the canvases and SVG in HTML5? What is the differenc...
How do I use the HTML5 feature of the Rel property in the?

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More