前言

在很多场景下，需要一种通知的交互方式来提醒用户，传统方式下可以在页面实现一个 Dialog，或通过修改网页的 title 来实现消息的通知。然而传统的实现存在着一定的不足，在网页最小化的情况下，无法查看任何通知，导致用户无法及时获取通知信息。

给力的 W3C 推出了 Notifications API，专注于 WEB 的通知。

Notifications

Notifications API 的 Notification 界面用于配置和显示用户的桌面通知。 这些通知的外观和特定功能因平台而异，但通常它们提供了一种向用户异步提供信息的方法。

此 API 在 WebWorker 环境下也可以使用。
注意：此 API 必须运行在 https 环境下，非 https 环境无法授权。

流程：

构造器

语法：

var myNotification = new Notification(title, options);

参数：

  • title：DOMString，定义通知的标题，该标题在触发时将显示在通知窗口的顶部。
  • options：
    • actions：NotificationActions 数组，表示在显示通知时用户可用的操作。 这些是用户可以选择的选项，以便在通知本身的上下文中对该动作起作用。 操作的名称将发送到服务工作者通知处理程序，以使其知道用户已选择的操作。数组的成员应该是对象文字。它可能包含以下值：（注意：此属性只在 serviceWorker 环境下有效。click 时可以通过 event.action 来获取）

      • action：DOMString，显示在通知上的 action 标志。
      • title：DOMString，显示在通知上的 action 标题。
      • icon：USVString，显示在 action 上的 icon URL。
    • badge：包含图像 URL 的U SVString，用于在没有足够空间显示通知本身时表示通知，例如 Android Notification Bar。 在 Android 设备上，徽章应能容纳高达4倍分辨率的设备，大约 96 x 96 像素，并且图像将自动屏蔽。
    • body：表示要在通知中显示的额外内容的字符串。
    • data：希望与通知关联的任意数据。这可以是任何数据类型，通event.currentTarget.data 来获取。
    • dir：显示通知的方向。 它默认为 auto，它只采用浏览器的语言设置行为，但你可以通过设置 ltr 和 rtl 的值来覆盖该行为（尽管大多数浏览器似乎忽略这些设置。）
    • icon：USVString，包含要在通知中显示的图标的URL。
    • lang：指定通知中使用的 lang。此字符串必须是有效的 BCP 47 语言标记。
    • renotify：Boolean，指定在新通知替换旧通知后是否应通知用户。 默认值为false，表示不会通知他们。
    • requirInteraction：表示通知应保持活动状态，直到用户单击或关闭它，而不是自动关闭。 默认值为 false。必须带 tag 才有效果。
    • silent：无论设备设置如何，都应该发出一个布尔值，指定通知是否应该是静音，即不应发出声音或振动。 默认值为 false，这意味着它不会是静默的。
    • tag：给定通知的 ID，允许您在必要时使用脚本查找，替换或删除通知。
    • timestamp：DOMTimeStamp 表示创建通知的时间。 它可用于指示通知实际的时间。 例如，这可能是在过去，当通知用于因设备离线而无法立即传递的消息时，或将来用于即将开始的会议时间。
    • vibrate：与通知显示一起运行的振动模式。 振动模式可以是具有少至一个成员的阵列。 值是以毫秒为单位的时间，其中偶数索引（0,2,4等）表示振动多长时间，奇数索引表示暂停多长时间。 例如，[300,100,400] 将振动 300ms，暂停 100ms，然后振动 400ms。

属性

静态属性：

  • permission：Notification.permission ，获取当前用户对通知的权限。值：

    • granted：用户已授权显示系统通知。
    • denied：用户已拒绝显示系统通知。
    • default：用户未做决定，程序表现为拒绝。

实例属性：（含义同构造器中的 option）

  • actions
  • badge
  • body
  • data
  • dir
  • lang
  • tag
  • icon
  • image
  • renotify
  • requireInteraction
  • silent
  • timestamp
  • vibrate

事件

onclick

点击显示通知框时触发的事件。

Notification.onclick = function(event) { ... };

可以通过 preventDefault() 阻止焦点显示到 notification 打开的 tab 上。
通过 event.currentTarget 来获取属性。

onclose

通知关闭时，触发此事件。
必须调用 Notification.close() 才能触发此事件。

Notification.onclose = function() { ... };

onerror

用作错误事件的事件处理程序。发生错误时，将调用指定的函数。如果为null，则没有错误处理程序生效。

Notification.onerror = EventListener;

onshow

通知出现的时候，触发此事件。

Notification.onshow = function() { ... };

方法

静态方法：

  • requestPermission()：请求通知权限。返回 Promise，类型为 Notification.permission。

当前 permission 为 default 时，出现授权通知：

注意：在 PC 中，当出现授权通知时，如果不做任何选择，而是点击右上角的关闭x，连续三次这种操作后，系统会自动设置为 denied。

当前 permission 为 granted 时，直接返回 Promise，执行 then 后的代码。后续不需要在申请权限。

当前 permission 为 denied 时，直接返回 Promise，执行 catch 后面的代码。后续一直是拒绝状态，不再弹出授权框。此时 serviceWorker pushManager 不可用，订阅会抛出错误。此状态下，只能通过用户自己去修改权限。

实例方法：

  • close()：Notification 实例调用，关闭通知，触发 onclose 事件。

实例

点击通知 打开指定页面

Notification.requestPermission().then(() => {var n = new Notification('天气预报', {body: '今天天气晴朗，详情请点击~',icon: 'https://img.alicdn.com/tfs/TB1XPvwUVzqK1RjSZFvXXcB7VXa-1024-1024.png',requireInteraction: true,data: {nav: 'https://baidu.com'}});n.onclick = event => {n.close();if(event.currentTarget.data.nav) {window.open(event.currentTarget.data.nav);}};
}).catch(() => {alert('通知权限已禁止，请设置打开权限');
})

通知按钮交互

actions 必须在 serviceWorker 中使用。

navigator.serviceWorker.ready.then(swReg => {Notification.requestPermission().then(() => {swReg.showNotification('好友请求', {body: '美女向你打招呼~',icon: 'https://img.alicdn.com/tfs/TB1qyPtU3HqK1RjSZFEXXcGMXXa-640-859.png',requireInteraction: true,actions: [{action: 'yes',title: '加好友',}, {action: 'no',title: '拒绝'}]});})
})

sw 环境处理代码：

self.addEventListener("notificationclick", function(event) {console.log("notificationclick", event);event.notification.close();if(event.action == 'yes') {// ***} else if(event.action == 'no') {// xxx}
});

兼容性

博客名称：王乐平博客

CSDN博客地址：http://blog.csdn.net/lecepin

本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

PWA(Progressive Web App)入门系列：Notification相关推荐

  1. PWA(Progressive Web App)入门系列：（一）PWA简介

    前言 PWA做为一门Google推出的WEB端的新技术,好处不言而喻,但目前对于相关方面的知识不是很丰富,这里我推出一下这方面的入门教程系列,提供PWA方面学习. 什么是PWA PWA全称Progre ...

  2. PWA(Progressive Web App)入门系列：（三）PWA关键技术Manifest

    前言 前面说过,让Web App能够达到Native App外观体验的主要实现技术就是PWA中的manifest技术,本章会详细说明manifest的实现,及各个参数的具体含义,还将了解如何定义Web ...

  3. PWA(Progressive Web App)入门系列：安装 Web 应用

    前言 在传统的 Web 应用中,通常只能通过在浏览器的地址栏里输入相应的网址才能进行访问,或者把网页地址创建到桌面上通过点击,然后在浏览器里打开. 传统模式下,图标.启动画面.主题色.视图模式.屏幕方 ...

  4. PWA(Progressive Web App)入门系列：Sync 后台同步

    前言 当我们在一些地下停车场,或者在火车上.电梯等无法避免的信号不稳定的场所,使用网站应用处理一些表单操作或者上传数据的操作时,面临的将是网络连接错误的响应,使用户的操作白费. 而此刻 PWA 的 S ...

  5. PWA(Progressive Web App)入门系列：Push

    前言 很多时候,原生应用会通过一些消息推送来唤起用户的关注,增加驻留率.网页该怎么做呢?有没有类似原生应用的推送机制?推送功能又能玩出什么花样呢? Push API Push API 给与了 Web ...

  6. PWA(Progressive Web App)入门系列：Cache Storage Cache

    前言 目前浏览器的存储机制有很多,如:indexedDB.localStorage.sessionStorage.File System API.applicationCache 等等,那为什么又制定 ...

  7. PWA(Progressive Web App)入门系列：（四）Promise

    前言 这一章说一下ES6的Promise对象.为什么要在PWA系列的文章中讲Promise呢?因为PWA中的许多技术API中都是以Promise返回的方式返回的,为了对后续章节中PWA技术API更好的 ...

  8. PWA(Progressive Web App)入门系列：（二）相关准备

    前言 在上一章中,对PWA的相关概念做了基本介绍,了解了PWA的组成及优势.为了能够更快的进入PWA的世界,这一章主要对在PWA开发中,需要注意的问题,运行的环境及调试工具做介绍说明. 浏览器要求 因 ...

  9. PWA(Progressive Web App)入门系列：Fetch Request Headers Response Body

    前言 在 WEB 中,对于网络请求一直使用的是 XMLHttpRequest API 来处理,XMLHttpRequest 也很强大,传统的 Ajax 也是基于此 API 的.那么为什么 W3C 标准 ...

最新文章

  1. 最小生成树、拓扑排序、单源最短路径
  2. tcpdump dns流量监控
  3. OK,让我们开始吧!
  4. 设计模式——建造者模式
  5. 英语中的介词详细解释
  6. 2016 10 26考试 NOIP模拟赛 杂题
  7. 以太坊私链环境搭建和发币全过程
  8. linux下imp导入oracle数据库,Oracle数据库Linux下的导入IMP
  9. AAtitit 项目管理 提升开发效率的项目流程方法模型 哑铃型  橄榄型 直板型titi
  10. 大数据笔记（三十一）——SparkStreaming详细介绍，开发spark程序
  11. Nature杂志总编辑：如何培养一个有价值的研究者
  12. opencv如何隐藏窗口
  13. php mysql 连接池_php 如何实现 数据库 连接池
  14. python 微信群发_用python写一个微信群发工具（基于itchat库）
  15. python贪吃蛇报告_python实现贪吃蛇游戏
  16. Kafka 入门与实践
  17. 如何在视频中添加水印？给视频添加水印方法
  18. 网易我的世界服务器看不到聊天信息,网易禁止文字？我的世界：文字消失“不可逆”的6种解决办法...
  19. 一位微软技术大牛，工作8年的职业经验分享
  20. apfs扩容_向APFS文件系统转进：看iOS 10.3如何为iPhone扩容存储空间

热门文章

  1. WinForm UI设计与开发思路（转）
  2. leetcode 1579. 保证图可完全遍历（并查集）
  3. leetcode 649. Dota2 参议院（贪心算法）
  4. 了解如何使用Flutter构建iOS和Android应用
  5. python 使用c模块_您可能没有使用（但应该使用）的很棒的Python模块
  6. 移动应用程序和网页应用程序_如何开发感觉像本机移动应用程序的渐进式Web应用程序...
  7. ios注销所有通知_您一直想了解的有关iOS中通知的所有信息
  8. 数据结构和算法练习网站_视频和练习介绍了10种常见数据结构
  9. git 命令git 地址_这是我上周使用的所有Git命令及其作用。
  10. SP703 SERVICE - Mobile Service[DP]