HTML5桌面通知（Web通知）实例解析

本文主要介绍了HTML5桌面通知（Web通知）的例子，它对HTML5网站的建设非常有用！朋友的需要可以参考。

HTML5桌面通知（Web通知）对于在输入新消息时实现桌面通知效果非常有用。下面简要介绍HTML5的新属性。

这是一个很好的演示：HTML5 Web通知演示

从上面的演示中，我们可以得到您需要的基本核心代码，如下所示：

复制代码代码如下所示：
var =窗口通知。通知window.moznotification window.webkitnotification | | | |；

Notification.requestPermission (function (permission) {)
/ / console.log（许可）；
}）；

函数显示（）{
var实例=新通知（
测试标题
主体：测试消息
}
）；

instance.onclick =函数（）{
做某事
}；
instance.onerror =函数（）{
做某事
}；
instance.onshow =函数（）{
做某事
}；
instance.onclose =函数（）{
做某事
}；

返回false；
}

其中：notification.requestpermission代码的功能是请求用户。

通过上面的例子，我们有了基本的想法，当文档第一次加载时，它向用户请求权限，在获得许可后，它是如此容易。

复制代码代码如下：window.addeventlistener（载荷、函数（）{（）{
如果我们有通知的许可，我们先检查一下
如果（通知notification.permission！=已授予）{
notification.requestpermission（功能（状态）{）
如果（notification.permission！=状态）{
notification.permission =地位；
}
}）；
}
}）；

Firefox下的验证已经通过，但它始终不会在Chrome中出现，我们稍后会找到这样一个段落。

复制代码如下：不是bug，特性。

桌面通知只能通过用户操作触发。键入
Javaｓｃｒｉｐｔ控制台与嵌入的原始Javaｓｃｒｉｐｔ代码具有相同的效果。
页面（没有用户操作）。但是，将Javaｓｃｒｉｐｔ输入到位置栏中，
表示用户操作（用户有意访问Javaｓｃｒｉｐｔ链接）。
启用通知，可能的网站，往往使用href =Javaｓｃｒｉｐｔ：代替
OnClick = 。

我敢肯定这是非问题。

用户必须在Chrome中手动触发，否则，Chrome浏览器将忽略js。

但在我们的网站上肯定不能添加按钮或链接来做出明确的用户授权。好吧，其实它不是一件事，我们可以点用户经常在这个许可下的按钮，Chrome是一个有用的终身授权。除非你进入禁止他设置。

为了集成，代码如下所示：

复制代码代码如下：功能showmsgnotification（标题、味精）{
var =窗口通知。通知window.moznotification window.webkitnotification | | | |；

如果（通知notification.permission =理所当然）{
var实例=新通知（
标题，{
主体：味精，
图标：image_url
}
）；

instance.onclick =函数（）{
做某事
}；
instance.onerror =函数（）{
做某事
}；
instance.onshow =函数（）{
做某事
/ / console.log (instance.close);
setTimeout（instance.close，3000）；
}；
instance.onclose =函数（）{
做某事
}；
} else if（通知notification.permission！=拒绝）{
notification.requestpermission（功能（状态）{）
如果（notification.permission！=状态）{
notification.permission =地位；
}
用户说好，如果
如果（状态=已授予）{
var实例=新通知（
标题，{
主体：味精，
图标：image_url
}
）；

instance.onclick =函数（）{
做某事
}；
instance.onerror =函数（）{
做某事
}；
instance.onshow =函数（）{
做某事
setTimeout（instance.close，3000）；
}；
instance.onclose =函数（）{
做某事
}；

{ }人
返回false
}
}）；
其他{ }
返回false；
}

}