Mac上浏览器消息通知Notification一直不显示问题记录

浏览器消息通知使用起来很简单，我的测试代码如下：

<template>
  <div class="page">
    testNotofication
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, Ref } from '@vue/composition-api'

export default defineComponent({
  components: {
    //
  },
  props: {},
  setup(props, ctx) {
    function sendNotification() {
      new Notification("通知标题111：", {
        body: '通知内容',
        icon: 'https://pic1.zhuanstatic.com/zhuanzh/50b6ffe4-c7e3-4317-bc59-b2ec4931f325.png'
      })
    }
    onMounted(() => {
      setInterval(() => {
        if (window.Notification.permission == "granted") { // 判断是否有权限
          console.log('========权限', window.Notification.permission);
          sendNotification();
        } else if (window.Notification.permission !== "denied") { 
          window.Notification.requestPermission(function (permission) { // 没有权限发起请求
            sendNotification();
          });
        }
      }, 200)
    })

    return {
      //
    }
  }
})
</script>
<style lang="scss" scoped>
.page {

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding-bottom: 140px;
  }
}
</style>

代码看着没问题，然后在chrome上测试的时候就是不显示。又换了个safari浏览器后，看起来没问题。所以定位到不是代码的问题。

然后就以为是chrome版本问题，找了位同事，发现他和我的chrome版本一致，都是最新版chrome，他的就能正常弹出，我的就不行。

最后又重置了chrome设置，期间还检查了chrome浏览器的网站设置部分，也都没问题；然后又排查了chrome的扩展，以为是chrome某些插件导致的，禁用了所有的插件还是不行。

最后，像无头苍蝇一样乱撞了很久的我，静下心来思考了下，safari有自己的通知样式，火狐也有自己的通知样式，那这个通知是不是类似于app上的那些应用通知行为呢，而不是浏览器自身的通知行为。有没有可能和系统设置有关系呢？然后开始检查Mac系统设置，果然chrome没有被允许，勾选上之后重启chrome果然可以收到通知了。