Vue移动端实现手机推送通知栏的方法（电脑端通用）

        在实现Vue手机端推送时收集了许多资料，最后得出结论，其实手机端和PC端是同一段代码，由于浏览器兼容的原因在电脑上能弹出通知的在手机上不一定能弹出，在手机端要使用Vue推送通知必须使用特定的浏览器，手机版安卓火狐是我测试可以弹出通知的浏览器，手机版谷歌却弹不出。顺带说一下我的测试环境，收集资料时会发现有些小伙伴在测试的时候在本地的环境是可以的部署到服务器的时候就不行了，这里必须使用的是https请求才可以获取权限！

 

 由于业务的需求我们需要在移动端实现网页推送消息的通知具体方法有以下两点，测试后两种方法都可实现，

 

 

1、方法一

        在需要的Vue的页面中在methods添加方法，直接调用即可，对于不支持的浏览器直接显示通知。具体需要的实现方法根据自己的需求实现

methods:{
  pushMessage(){
      if (window.Notification) {
        console.log("支持弹出框")
      } else {
        // 不支持
        console.log("不支持")
        alert("当前浏览器不支持弹出消息通知哦!")
      }
      if(window.Notification && Notification.permission !== "denied") {
        Notification.requestPermission(function(status) {
          if (status === "granted") {
            var n = new Notification('遵师维小宝', {
              body: '有用户提交报修故障了！',
            });
          } else {
            alert("当前的浏览器不支持消息通知！！!");
          }
        });
      }
    }

},
  mounted() {
    this.pushMessage()
  }
   

方法二:

附上官网：Installing | Push v1.0

在Vue中安装npm install push.js --save

在所需要的Vue页面引入使用

import Push from 'push.js'


export default {
  name: "recordAll",
  methods: {
    //推送弹框消息
    pushMessage(){
       Push.Permission.request();
      Push.create("遵师维小宝", {
        body: "我来了！！！",
        requireInteraction: true,
        //icon: '/icon.png',
         timeout: 600000,
      });
  
    },
  mounted(){
     this.pushMessage();
  },
}

写在最后，本人纯属小白，前端知识薄弱，希望本人经历能帮助各位同仁，不喜勿喷！！！