Desktop Notification也称为Web Notification,是在Web页面之外,以弹出桌面对话框的形式通知用户发生了某事件。Web Notification于2015.9.10成为W3C推荐标准,网址https://www.w3.org/TR/notifications/。每个通知对话框都包括title, direction, language和origin。通知对话框还可以有body, tag, icon URL和icon image。

通知必须获得用户的授权才能够显示,从而避免非用户期望的通知干扰用户。对通知的授权有三种,分别由字符串”default”(用户未显式授权,同denied), ”denied”, ”granted”表示。

由于通知的显示与浏览器的实现有关,与用户的授权有关,所以在使用桌面通知之前,往往要检查浏览器和用户的授权,示例如下:

function checkNotification(){

if (!("Notification" in window)) {

alert("This browser does not support desktop notification");

}

// check whether notification permissions have alredy been granted

else if (Notification.permission === "granted") {

// If it's okay let's create a notification

new Notification("Granted!");

}

// Otherwise, ask the user for permission

else if (Notification.permission !== 'denied') {

Notification.requestPermission(function (permission) {

// If the user accepts, let's create a notification

if (permission === "granted") {

new Notification("Request granted!");

}

});

}

}

Chrome浏览器的chrome.notifications.* API能够基于模板创建桌面通知,并在操作系统右下角的托盘中显示通知。

要在Chrome浏览器扩展中使用通知,首先要在manifest.json文件中声明notifications的权限如下:

{

"permissions": [

"notifications"

],

}

chrome.notifications.TemplateType是枚举类型,枚举值如下:

枚举值

注释

"basic"

默认模板

icon, title, message, expandedMessage位于两个button之上

"image"

icon, title, message, expandedMessage, image位于两个button之上

"list"

icon, title, message, items位于两个button之上

"progress"

icon, title, message, progress位于两个button之上

chrome.notifications. PermissionLevel是枚举类型,枚举值如下:

枚举值

注释

"granted"

默认值,用户授权显示通知

"denied"

用户未授权显示通知

chrome.notifications.NotificationOptions对象的属性如下:

属性名

类型

必选/可选

注释

type

TemplateType

可选

通知的类型,

chrome.notifications.create()创建通知时必选

title

string

可选

通知的标题,

chrome.notifications.create()创建通知时必选

message

string

可选

通知的主体内容,

chrome.notifications.create()创建通知时必选

contextMessage

string

可选

通知的备选内容

buttons

array of object

可选

该数组最多2个元素,分别代表2个button。

每个button对象都有title和iconUrl两个属性(string类型),其中iconUrl属性可选

appIconMaskUrl

string

可选

应用图标URL的掩码,用以规范URL

iconUrl

string

可选

图标的URL

imageUrl

string

可选

"image"类型的通知的图片的URL

priority

integer

可选

优先级,有效范围[-2,2],默认0

eventTime

double

可选

通知的时间戳,单位ms

items

array of object

可选

该数组中的每个元素代表一个通知。

每个通知对象都有title和message两个属性(string类型)

progress

integer

可选

当前的进度,有效范围[0,100]

isClickable

boolean

可选

通知窗口是否响应点击事件

chrome.notifications API中的常用方法:

· 创建并显示通知

chrome.notifications.create(

string notificationId,

NotificationOptions options,

function(string notificationId) {...}

)

其中属性说明如下:

属性名

类型

必选/可选

注释

notificationId

string

可选

通知的标识符。

如果未设置或设置为””,则自动生成唯一标识符;

如果设置的值与已有的通知相同,则替换已有的通知

options

NotificationOptions

必选

通知的具体内容

· 更新已有的通知

chrome.notifications.update(

string notificationId,

NotificationOptions options,

function (boolean wasUpdated) {...}

)

其中属性与create()类似。

· 清除指定的通知

chrome.notifications.clear(string notificationId, function(boolean wasCleared) {...})

· 获取所有通知

chrome.notifications.getAll(function(object notifications) {...})

最后介绍Chrome扩展中background与notification之间的互操作问题。

在处理通知的JavaScript脚本文件中,可以访问background页面的方法如下:

chrome.extension.getBackgroundPage().doThing();

在background页面的JavaScript脚本文件中,可以访问通知的JavaScript脚本文件中的方法如下:

chrome.extension.getViews({type:"notification"}).forEach(function(notificationWindow) {

notificationWindow.doOtherThing();

});

Chrome浏览器扩展开发系列之十:桌面通知Notification的更多相关文章

  1. Chrome浏览器扩展开发系列之十四

    Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging 时间:2015-10-08 16:17:59      阅读:1361      评论:0      收藏:0    ...

  2. Chrome浏览器扩展开发系列之十四:本地消息机制Native messagin

    Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging 2016-11-24 09:36 114人阅读 评论(0) 收藏 举报  分类: PPAPI(27)  通过将浏览器 ...

  3. Chrome浏览器扩展开发系列之十九:扩展开发示例

    翻译总结了这么多的官网内容,下面以一款博主开发的“沪深股票价格变化实时追踪提醒”软件为例,介绍Chrome浏览器扩展程序的开发,开发环境为Eclipse IDE+Chrome Browser. “沪深 ...

  4. Chrome浏览器扩展开发系列之十六:扩展中可用的Chrome浏览器API

    除了Chrome浏览器支持的chrome.* API之外,Chrome浏览器扩展还可以使用Chrome浏览器为Web页面或Chrome app提供的APIs.对于Chrome浏览器2支持的API,还可 ...

  5. Chrome浏览器扩展开发系列之十八:扩展的软件国际化chrome.i18n API

    i18n是internationalization 的简写,这里将讨论软件国际化的问题.熟悉软件国际化的朋友应该知道,软件国际化要求,页面中所有用户可见的字符串都必须置于资源属性文件中.资源属性文件中 ...

  6. Chrome浏览器扩展开发系列之十五:跨域访问的XMLHttpRequest对象

    XMLHttpRequest对象是W3C的标准API,用于访问服务器资源.XMLHttpRequest对象支持多种文本格式,如XML和JSON等.XMLHttpRequest对象可以通过HTTP和HT ...

  7. Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging

    通过将浏览器所在客户端的本地应用注册为Chrome浏览器扩展的“本地消息主机(native messaging host)”,Chrome浏览器扩展还可以与客户端本地应用之间收发消息. 客户端的本地应 ...

  8. Chrome浏览器扩展开发系列之十二:Content Scripts

    Content Scripts是运行在Web页面的上下文的JavaScript文件.通过标准的DOM,Content Scripts 可以操作(读取并修改)浏览器当前访问的Web页面的内容. Cont ...

  9. Chrome浏览器扩展开发系列之十一:NPAPI插件的使用

    在Chrome浏览器扩展中使用HTML和JavaScript非常容易,但是如何重用已有的非JavaScript遗留系统代码呢?答案是将NPAPI插件绑定到Chrome浏览器扩展,从而实现在Chrome ...

随机推荐

  1. 018 关联映射文件中<class>标签中的lazy(懒加载)属性

    Lazy(懒加载): 只有在正真使用该对象时,才会创建这个对象 Hibernate中的lazy(懒加载): 只有我们在正真使用时,它才会发出SQL语句,给我们去查询,如果不使用对象则不会发SQL语句进 ...

  2. python的列表(二)

    1.遍历整个列表  #for 循环 # >>> name_list['faker', 'dopa', 'gogoing', 'uzi']  >>> for LOL_ ...

  3. 【面向对象设计原则】之依赖倒置原则(DIP)

    依赖倒转原则(Dependency Inversion  Principle, DIP):抽象不应该依赖于细节,细节应当依赖于抽象.换言之,要针对抽象(接口)编程,而不是针对实现细节编程. 开闭原则( ...

  4. 前端向后台的华丽转身 — PHP基础篇

    这一次,本K带大家来看一下关于PHP中数组.字符串的一些注意事项和函数(方法). 一.PHP中的数组 (一)PHP中的数组简介 数组类型是PHP两种复合数据类型之一.根据下标的不同,可以将PHP中的数 ...

  5. 源码分析 Large-Margin Softmax Loss for Convolutional Neural Networks

    作者在Caffe中引入了一个新层,一般情况在Caffe中引入一个新层需要修改caffe.proto,添加该层头文件*.hpp,CPU实现*.cpp,GPU实现*.cu,代码结果如下图所示: caffe ...

  6. Catalog Service - 解析微软微服务架构eShopOnContainers(三)

    上一篇我们说了Identity Service,因为其基于IdentityServer4开发的,所以知识点不是很多,今天我们来看下Catalog Service,今后的讲解都会把不同的.重点的拿出来讲 ...

  7. 【easyui】Tab的tools按钮刷新当前tab

    点击刷新按钮,刷新当前Tab选项卡 /** * Name 选项卡初始化 */ $('#home-tabs').tabs({ tools: [{ iconCls: 'icon-reload', bord ...

  8. python基础操作_集合_三元运算

    #使用操作文件的时候,可以使用with函数#with open('E:\info.txt','a+') as fr#fr这个值可以是任意值# :#for line in fr:'''with open ...

  9. JavaScript概念总结:作用域、闭包、对象与原型链

    1 JavaScript变量作用域 1.1 函数作用域 没有块作用域:即作用域不是以{}包围的,其作用域完成由函数来决定,因而if /for等语句中的花括号不是独立的作用域. 如前述,JS的在函数中定 ...

  10. .Net中的AOP系列之《AOP实现类型》

    返回<.Net中的AOP>系列学习总目录 本篇目录 AOP是如何跑起来的 运行时编织 复习代理模式 动态代理 编译时编织 后期编译(PostCompiling) 来龙去脉 运行时编织 VS ...