push.js
npm安装方式
npm install push.js --save
script引入方式
<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.11/push.min.js"></script>
- 获取用户许可(用户需要先授予权限才能发送通知)
import Push from 'push.js'
created(){
Push.Permission.request();
},
- 创建通知
要显示通知,我们只需调用 Push.create 方法,该方法需要一个标题和一个包含各种有用首选项和回调的可选对象:
// 开始调用 Push.create 方法, Hello world! 是通知的标题
Push.create("Hello world!", {
// body 选项是通知的内容
body: "How's it hangin'?",
// icon 选项是通知的图片
icon: './icon.png',
// timeout 选项是通知停留时间
timeout: 4000
});
// 下面方法是实践可用
methods:{
pushMessage(message){
Push.create("询配来消息了哦", {
body: '收到信消息了哦',
requireInteraction: false,
//icon: '/icon.png',
timeout: 3000,
});
},
},
mounted(){
this.pushMessage('消息通知的内容');
},