pushjs浏览器通知插件

官网 (opens new window)

# 安装

npm install push.js --save

bower install push.js --save

# 快速开始

# 简单的使用

Push.create('Hello World!')

# 设置更多的选项

Push.create("Hello world!", {
  body: "How's it hangin'?",
  icon: '/icon.png',
  timeout: 4000,
  tag: 'foo',
  onClick: function () {
    window.focus();
    this.close();
  }
});

1
2
3
4
5
6
7
8
9
10

# 关闭通知

Push.create('Hello World!', {
  tag: 'foo'
});

// Somewhere later in your code...
Push.close('foo');

1
2
3
4
5
6

或者赋值给某个变量

var promise = Push.create('Hello World!');

// Somewhere later in your code...

promise.then(function(notification) {
  notification.close();
});

1
2
3
4
5
6
7

# 清空所有通知

Push.clear();

# Permissions(权限)

Push使用一个常量数组来跟踪其当前的权限级别。这些常数如下:

Push.Permission.DEFAULT; // 'default'
Push.Permission.GRANTED; // 'granted'
Push.Permission.DENIED; // 'denied'

1
2
3

# 手动请求权限

Push.Permission.request(onGranted, onDenied);

onGranted:回调函数，权限被授予
onDenied:回调函数，权限被拒绝

# 是否有通知权限

Push.Permission.has(); // boolean

# 权限级别

Push.Permission.get();

# 选项

# 属性

属性	描述
body	通知内容
data	传递给 ServiceWorker 的数据
icon	可以是图标图像的URL，也可以是包含16x16和32x32像素图标图像的数组(见上面)。
link	当用户点击手机上的通知时，要导航到的相对URL路径(例如，如果你想让用户导航到你的页面http://example.com/page，那么相对URL (opens new window)就是页面)。如果页面已经在后台打开，那么浏览器窗口将自动聚焦。需要serviceWorker.js文件出现在服务器上才能工作。
requireInteraction	当设置为true时,通知将不会关闭,除非用户手动关闭或单击它
tag	用于标识通知的唯一标记。可用于稍后手动关闭通知。
timeout	时间以毫秒为单位,直到通知自动关闭
vibrate	一种移动设备的持续时间,接收到振动的通知。例如,[200,100]将首先振动200毫秒,暂停,然后持续100毫秒。只能在移动Chrome中使用。
silent	指定通知是否应该静音，即不应该发出声音或振动，无论设备设置。仅Chrome 43.0及以上版本支持。

# 回调

选项	描述
onClick()	单击通知的时候执行
onClose()	通知关闭的时候执行(废弃)
onError()	当通知抛出错误时执行
onShow()	显示通知时执行(废弃)

# 配置

全局配置选项可以通过Push.config()方法来设置。如果没有向它传递任何选项，则返回所有当前配置属性。如果一个配置对象被传递给函数，属性会自动与Push的当前配置合并。例如:

Push.config({
  serviceWorker: './customServiceWorker.js', // Sets a custom service worker script
  fallback: function(payload) {
    // Code that executes on browsers with no notification support
    // "payload" is an object containing the 
    // title, body, tag, and icon of the notification 
  }
});

1
2
3
4
5
6
7
8

默认情况下，serviceWorker和fallback是唯一可用的配置选项(更多可通过插件获得)。如果未指定，serviceWorker将自动在你的web服务器根目录中查找缩小版的service worker文件。因此，如果您的JavaScript在https://example.com/johndoe上执行，它将在https://example.com/serviceWorker.min.js (opens new window)上查找脚本。建议让你的service worker在这个位置可用，因为它提供了一个可以操作的全局作用域。

#javascript

上次更新: 2023/09/22, 16:54:32

← 常用Jquery插件 Nodejs 使用 nodemailer 发送邮件→