html5__Notifications API 桌面通知

MDN地址

google 文檔 https://developers.google.cn/web/fundamentals/push-notifications/

const koa2 = require(`koa2`);
const Router = require(`koa-router`);
const router = new Router();
const app = new koa2();

const Index = router.get(`/`, async (ctx, next) => {
  await next()
  ctx.status = 200;
  ctx.type = `html`;
  ctx.body = `
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
    function good(){
    var notification = new Notification("hello to..", {
      dir: 'ltr',
      body: '測試 web Notification API',
      tag: 'test',
      icon: 'https://pic.cnblogs.com/avatar/1053296/20171128213246.png'
    });
    notification.onclick = function(e) {
      console.log( e);
      console.log('每當用戶點擊通知時被觸發');
      this.close();
      window.open('http://www.cnblogs.com/ajanuw/')
    }
    notification.onshow = function() {
      console.log('通知顯示的時候被觸發');
    }
    notification.onerror = function() {
      console.log('當通知遇到錯誤時被觸發');
    }
    notification.onclose = function() {
      console.log('用戶關閉通知時被觸發');
    }
}
  function run() {
    if ('Notification' in window) {
      // 查看是否有權限
      if (Notification.permission == 'granted') {
        good()
      } else if(Notification.permission == 'denied' || Notification.permission == 'default') {
        // 主動提出須要權限
        Notification.requestPermission(permission => {
          if (permission == 'granted') {
            good()
          }
        })
      }

    }
  }
  run();
</script>
    `
}).routes();

app.use(Index);

app.listen(1995);