Push.js:Javascript桌面通知库新手入门_库小白指南

Push.js是一个可以快速运行和接收的Javascript桌面通知库,它支持IE9+,以及现代浏览器如:Chrome, Safari, Firefox。它可以应用在网页消息推送方面,而且简单易用。安装我们可以使用npm快速安装。npm install push.js –save
使用运行push接收通知非常简单,以下代码就可以创建一个新的通知:Push.

Push.js:Javascript桌面通知库新手入门

Push.js是一个可以快速运行和接收的Javascript桌面通知库,它支持IE9+,以及现代浏览器如:Chrome, Safari, Firefox。它可以应用在网页消息推送方面,而且简单易用。

Push.js:Javascript桌面通知库新手入门_库小白指南

安装

我们可以使用npm快速安装。

npm install push.js --save

使用

运行push接收通知非常简单,以下代码就可以创建一个新的通知:

Push.create('Hello World!');

我们还可以传入参数对象,定制通知效果,

Push.create("Hello world!", {
    body: "Welcome to Helloweba.net",
    icon: '/icon.png',
    timeout: 4000,
    onClick: function () {
        window.focus();
        this.close();
    }
});

我们也可以使用Push.close()方法来手动关闭通知界面。

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

// Somewhere later in your code...

Push.close('foo');

选项和配置

以下是常用的选项配置:

body:通知的主体内容。

data:数据传递给ServiceWorker通知。

requireInteraction:如果设置成true的话,通知不会自动关闭,除非人工手动点击关闭。

icon:可以设置通知界面上大小为16×16或32×32像素的小图标。

link:当用户点击移动设备上的通知时,则会导航到对应的页面上。

tag:标记通知,后面关闭通知可以通过该标记来识别是要关闭哪条通知。

timeout:通知自动关闭的时间,毫秒。

onClick():回调,当点击通知界面的时候触发。

onClose():回调,当要关闭通知的时候触发。

onError():回调,当通知抛出错误的时候触发。

onShow():回调,当显示通知的时候触发。

Push.js还提供了一个.config()方法用于全局配置。

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 
    }
});

权限

基于浏览器的通知需要浏览器授予权限,就如同浏览器开启摄像头一样,当前浏览器会弹出询问窗口,当你通过允许后,才会正式调用通知库

海计划公众号
(0)
上一篇 2020/03/29 01:45
下一篇 2020/03/29 01:45

您可能感兴趣的内容

  • 如何渲染几万条数据并不卡住界面?入门基础教程_渲染入门攻略

    如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条 都渲染出来,而应该一次渲染部分 DOM,那么就可以通过 requestAnimationFrame 来 每 16 ms 刷新一次。代码

    <meta name="viewport"

    2020/03/23
  • nodejs核心模块有哪些?使用指南_模块基础入门

    nodejs核心模块有哪些?使用指南 核心模块是 Node.js的心脏,它由一些精简而高效的库组成,为 Node.js 提供了基本的API。下面本篇文章就来给大家介绍一部分最常用的…

    2020/03/20
  • Js通过.或者[]访问对象属性的语法、性能等区别入门教程_对象菜鸟教程网

    在JavaScript中可以使用 . 或者 [ ] 来访问对象的属性,但是对象中方法只能通过 . 来获取,例如:function Person() {this.name=” 张三 “; // 定义一个属性 namethis.say=function(){ // 定义一个方法say()return “我的名字是 ” + this.name ;}
    }
    var a

    2020/04/05
  • cells在Javascript中有什么作用?小白知识_表格基础知识教程

    在Javascript中,cells可以获取表格中某一行所有单元格的集合,可以通过索引获取集合中的指定td单元格。下面本篇文章就来给大家介绍一下Javascript的cells,希望对大家有所帮助。cells可以获取表格中某一行所有单元格的集合,可以通过索引获取集合中的指定单元格,即返回表格中所有

    元素。语法:tableObject.

    2020/03/20
  • 实现a元素href URL链接自动刷新或新窗口打开基础入门_窗口基础入门

    一、需求描述希望实现这样一个功能:点击一个链接,如果这个链接浏览器已经打开过,则刷新已经打开的链接窗口;如果这个链接没有打开过,则使用新窗口打开这个链接页面。这是一个非常好的体验增强功能,可以有效避免浏览器选项卡中打开重复多余的页面。关键是如何实现呢? 其实很简单,并不需要JS的参与,HTML本身特性就可以实现这样的需求。二、你可能不知道的target属性特

    2020/03/23
  • javascript如何判断对象是否相等?小白知识_对象菜鸟教程

    JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕。下面我们就来看一下如何判断对象是否相等。判断对象相等的步骤:1、先判断俩者是不是对象2、是对象后俩者长度是否一致3、判断俩个对象的所有key值是否相等相同4、判断俩个对象的相应的key对应的值是否相同5、来一个递归判断里面的对象循环1-4步骤判断对象是否相

    2020/03/20
  • 前端网页的懒加载攻略教程_预加载基础教程

    作为网页内容的一部分,图像和视频通常要消耗很多资源加载。要提高网页应用的性能,如何避免资源浪费在加载图像和视频上就很重要了。但是,很多时候我们都不愿意减少网页上的媒体资源,所以我们经常无从下手。幸运的是,我们有懒加载这个绝招,它可以帮助我们减少加载时间和降低负载,而不在内容上偷工减料。 什么是懒加载?懒加载是一种在页面加载时延迟加载一些非关键资源的技术,换

    2020/04/03
  • 在网站建设的时候需要考虑哪些因素?使用指南_网站入门基础

    网站制作公司数不胜数,每家公司使用域名、服务器的提供商也是不同,制作网站使用代码语言、模板、自主研发的系统都是各不相同。网站整体的设计要好,这个设计,一是指网站的代码设计,最好采用PHP+MySQL的形式,像目前建站比较流行的Dedecms,Wordpress,都是基于这种开源程序,兼容性比较好。而是指网站风格设计,不要求紧贴潮流,起码也要简洁大方,不会轻易

    2020/04/03
  • Cycle.js基础知识函数式和响应式的 js 框架

    Cycle.js基础入门 官方网址:http://cyclejs.cn/ GitHub:https://github.com/cyclejs/cyclejs/ 简介描述:函数式和响…

    2020/03/05
  • css中calc()函数小白常识_函数入门百科

    calc()函数css3中函数:用于动态计算长度值。(注意事项:运算符前后都需要保留一个空格,例如:width: calc(100% – 10px))任何长度值都可以使用calc()函数进行计算;calc()函数支持 “+”, “-“, “*”, “/” 运算;calc()函数使用标准的数学运算优先级规则案例:
    <h

    2020/03/30
  • 改变this的指向菜鸟知识_this菜鸟指南

    this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象。比如,function test() {this.x = 1;
    }
    this 是当前执行上下文中的一部分。this永远指向函数的调用者。随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。1.this指向的形式

    2020/03/31
  • tink小白教程_npm 出品的下一代包管理器

    tink小白教程 GitHub:https://github.com/npm/tink 简介描述:npm 出品的下一代包管理器 npm 出品的下一代包管理器 ,能够更好处理 nod…

    2020/03/06
  • vue实现输入框的模糊查询(节流函数的应用场景)基础入门_输入框小白知识

    首先,我们来理解一下:节流函数首先是节流,就是节约流量、内存的损耗,旨在提升性能,在高频率频发的事件中才会用到,比如:onresize,onmousemove,onscroll,oninput等事件中会用到节流函数;输入框的模糊查询功能原理分析所谓模糊查询就是不需要用户完整的输入或者说全部输入信息即可提供查询服务,也就是用户可以在边输入的同时边看到提示的信息

    2020/03/24
  • progressbar.js基础知识教程_漂亮,实用的响应式 SVG 进度条插件

    progressbar.js基础知识教程 官方网址:https://kimmobrunfeldt.github.io/progressbar.js/ GitHub:https://…

    2020/03/06
  • CSS实现DIV从隐藏到展示的过渡效果小白入门_效果使用攻略

    CSS中有很多功能强大的方法,其中过渡属性transition就很牛叉。你不用写一行JavaScript代码,随便写点css就可以实现一个动画效果。下面结合我在W3C网站上看到的实例,举个栗子说明下(⊙o⊙)…上面是一个过渡动画的demo,效果是不是很帅啊!
    .animated_div{font-size: 12px;width:50px;he

    2020/03/26
  • 20个让你效率更高的CSS代码技巧小白知识_技巧基础入门

    在本文中,我们想与您分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合。有一些是面向CSS初学者的,有一些知识点是进阶型的。希望每个人通过这篇文章都能学到对自己有用的知识。好了,我们开始。1.注意外边距折叠与其他大多数属性不同,上下的垂直外边距margin在同时存在时会发生外边距折叠。这意味着当一个元素的下边缘接触到另一个元素的上边缘时,只会保

    2020/03/29