【译】杂谈：HTML 5的消息通知机制

付伦发布于2019-08-01 14:44 / 1806人阅读

摘要：原文译文的消息通知机制译者已经被应用到开发中。所以先要征求用户的许可而不是直接显示通知。然后，获取用户许可之后，我们可以显示两种类型的信息最后执行通知代码。

原文：HTML 5 Notification

译文：HTML 5 的消息通知机制

译者：dwqs

HTML 5 已经被应用到Web开发中。跟平常一样，任何一个软件新版本的发布都期待一些新的特性，这对HTML 5也不例外。为了仅仅通过HTML提高用户交互，HTML 5已经提供了很多新的API。

是不是非常有趣呢？并且HTML 5已经和CSS 3结合的非常棒了。

因此，我也开始写一系列与HTML 5的API相关的文章来介绍API的使用和功能，例如Geolocation, Notification, File, 等等，第一篇文章是和Notification API相关。

首先要意识到是，HTML 5的特性和API仅能在支持HTML 5的浏览器中正常使用，如果浏览器不支持HTML 5，就不能使用HTML 5在网页中实现任何一个功能了。现在就来了解一下notification API吧。

什么是HTML 消息通知？

HTML消息通知是指我们可以告诉用户一个确定的事件行为，即使此时用户在浏览器的另一个选项卡。这个通知对于New Mail, New Tweet等事件是非常有用的。

怎么使用？

要使用Notification API，有几个步骤：首先，要从用户那里获取显示通知的许可，只有当用户允许时，才能显示通知给用户。所以先要征求用户的许可而不是直接显示通知。然后，

获取用户许可之后，我们可以显示两种类型的信息：

    Normal/Default Notification
    HTML Notification

最后执行通知代码。

我已经创建了一个显示通知的JavaScript函数，注意：函数仅限用于这篇文章，因为有很多种方式可以按照每个人的需求去扩展。

HTML：

Show Normal Notification


Show HTML Notification


JavaScript

// Function to show Notification
function createNotification(type)
{
   if(type ==  "")
     type = "normal";

   if(type != "html")
   {
    var title ="You have received HTML 5 Notification";
    var msg="Content Goes Here......";
    var notification = window.Notifications.createNotification("1.png", title, msg);
   }
   else
   {
     var notification = window.Notifications.createHTMLNotification("content.html");
   }
   notification.show();
}

// Binding the Click event on buttons.

$(document).ready(function ()
{        
  if (window.webkitNotifications)
  {
   window.Notifications = window.webkitNotifications;
   $("#show_notification").click(function ()
   {
     if (window.Notifications.checkPermission() == 0)
     {
       createNotification("normal");
     }
     else
     {
       window.Notifications.requestPermission();
     }
   });

   $("#show_html_notification").click(function ()
   {
    if (window.Notifications.checkPermission() == 0)
    {
       createNotification("html");
    }
    else
    {
       window.Notifications.requestPermission();
    }
   });
  }    
  else
  {
   alert("HTML 5 Notifications are not supported on this browser/OS.");
  }
});

Demo

查看Demo： live demo （ps：用Web Kit浏览器打开，此文写于2012.04）

总结

HTML 5 notification适用于像Google Chrome一样的Web Kit浏览器，对于HTML 5 notification，Mozilla Firefox有其自己的私有属性。我将在其它文章中介绍。

原文首发：http://www.ido321.com/1130.html

GPU云服务器云服务器 IOS消息通知机制消息机制消息发送机制消息推送机制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49555.html

微信小程序开发教程(基础篇)4-关于回调函数，匿名函数，闭包的杂谈

摘要：而回调函数通常只是提供给其它模块进行调用，为了简化编码，后续的等脚本语言中提供了对匿名函数的支持。当使用回调函数时，通常会涉及到一些上下文的传递。严格来说，这不能算是一篇微信小程序教程，不过会使用到上一篇中的app.js代码作为示例，姑且充个数吧。回调函数回调函数，对于初入编程这一行的同学可能会有些难以理解，毕竟回调函数的使用和程序顺序执行的直观流程是相悖的。想象你定了一个外卖...

shixinzhang 2019-08-20 12:25 评论0 收藏0
杂谈：前端Web通信

摘要：作为开发同学的小伙伴客户端的浏览器，有点小调皮还做了一个同源策略的限制，当我们的数据请求遇到不同源的情况下跨域，我们就得尝试其它的通信方法，不能一条道走到黑。 showImg(https://segmentfault.com/img/bVburZO?w=600&h=450); Web2.0以来，Ajax的出世，解决了传统表单提交页面跳转，闪烁白屏等问题。使得Web页面可以实现局部更新，...

Betta 2019-08-23 10:29 评论0 收藏0
从setTimeout-setInterval看JS线程

摘要：提出标准，允许脚本创建多个线程，但是子线程完全受主线程控制，且不得操作。所以，这个新标准并没有改变单线程的本质。事件循环主线程线程只会做一件事，就是从消息队列里面取消息执行消息，再取消息再执行。工作线程是生产者，主线程是消费者。最近项目中遇到了一个场景，其实很常见，就是定时获取接口刷新数据。那么问题来了，假设我设置的定时时间为1s，而数据接口返回大于1s，应该用同步阻塞还是异步？我们...

elliott_hu 2019-08-22 15:22 评论0 收藏0