HTML 5 Notifications API Desktop Reminder interface

Source: Internet
Author: User

Google Chrome browser supports the HTML5 notifications API, which allows you to create native hints, similar to OS X's Growl hints.

It is to be noted that you need to check that the user has provided your site license to use this API. If not, you must request permission, that is, require the user to manually press the Allow button.

Instance

The code is as follows Copy Code

<! DOCTYPE html>
<!--http://dhtmlexamples.com/2011/01/28/creating-os-notifications-in-html5/-->
<title>creating OS Notifications in html5</title>
<body>
<form>
<input type= "button" value= "Hey, do you want to show notifications" "Onclick=" init (); "/>
<input type= "button" value= "Send OS Notification" onclick= "notify ();"/>
</form>
<script type= "Text/javascript" >
Const Auto_close_delay_seconds = 5;
function init () {
if (window.webkitnotifications) {
Window.webkitNotifications.requestPermission ();
}
}
function Notify () {
var icon = "Accept.png";
var title = "[" + New Date (). tolocaletimestring () + "] This notification'll close in" + Auto_close_delay_seconds + "se Conds ";
            var body =  "Lorem ipsum dolor sit amet, Consectetur adipiscing elit. Vivamus ID magna ut sapien sodales ultricies eget nec metus. Pellentesque molestie nunc nec Leo iaculis eu dictum ante. Sed adipiscing condimentum sapien a scelerisque. Quisque luctus elit vel odio semper. Nunc sit amet neque Justo. Phasellus ullamcorper dui vel risus varius, vitae aliquet purus. Fusce felis nibh, volutpat ac ornare at, ullamcorper eget. Nunc euismod iaculis Porta. In Hac habitasse Platea dictumst. Proin a sem sed neque tincidunt scelerisque eget in Elit. Ut quis felis quis tortor sollicitudin sollicitudin ID quis. Nunc porttitor diam ID leo lobortis Aliquet. Nam scelerisque molestie dolor, Placerat hendrerit Urna Union. Praesent nec Massa enim. Donec nec Urna dignissim nunc fringilla luctus. Nunc pretium urna et diam accumsan fermentum. Vivamus condimentum lectus vitae mi vulputate pulVinar. Curabitur adipiscing ultrices Arcu. Vestibulum luctus malesuada erat sit amet rutrum. Nam feugiat lectus quis libero adipiscing laoreet. ";
if (window.webkitnotifications) {
if (window.webkitNotifications.checkPermission () = = 0) {
var popup = window.webkitNotifications.createNotification (icon, title, body);
Popup.ondisplay = function (event) {
settimeout (function () {
Event.currentTarget.cancel ();
}, Auto_close_delay_seconds * 1000);
}
Popup.show ();
} else {
Window.webkitNotifications.requestPermission ();
Return
}
}
}
</script>
</body>

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.