Vue中实现JavaScript桌面消息通知

时间的情敌

已于 2023-05-21 15:49:29 修改

阅读量960

点赞数

分类专栏： vue.js es6 文章标签： Vue push.js 浏览器API 消息通知权限请求

于 2022-06-13 18:19:32 首次发布

本文链接：https://blog.csdn.net/qq_34297387/article/details/125265107

版权

vue.js 同时被 2 个专栏收录

46 篇文章 3 订阅

订阅专栏

es6

15 篇文章 0 订阅

订阅专栏

最近有个需求，要求有新消息时，浏览器会有消息通知，在此，vue中使用了一个插件调用浏览器api实现消息通知：

安装依赖push.js插件：

npm install push.js --save

第一步：获取弹出消息的权限

页面：login.vue

import Push from 'push.js'

created(){
    Push.Permission.request();
},

第二步：推送桌面通知消息

页面：消息通知页面

import Push from 'push.js'

mounted（）{
    this.pushMessage('消息通知的内容');
},
methods: {

//推送弹框消息
pushMessage(message){
    Push.create("消息通知的标题", {
        body: message,
        requireInteraction: true,
        //icon: '/icon.png',
        timeout: 600000,
    });
},
}