需求描述

简单讲就是轮询列表,当发现最新的清算信息时候,需要弹出chrome通知

image.pngtask

  • 业务权限问题
  • 向用户发起授权通知
  • 查看官网暴露的api是否能满足业务需求

初步实现

image.png

代码

  1. import { useVotes } from "./useVotes";
  2. import { useWallet } from "./useWallet";
  4. export function useNotice() {
  5.   /**
  6.    * @description: chrome, firfox, edge通知
  7.    * @param {*} hash
  8.    * @return {*}
  9.    */
  10.   function noticeLiquidation(hash) {
  11.     let { wallet } = useWallet();
  12.     let { myVotes } = useVotes();
  13.     if (!("Notification" in window)) {
  14.       console.log(
  15.         "%c%s",
  16.         "color: #99adcc",
  17.         "This browser does not support desktop notification"
  18.       );
  19.       return;
  20.     }
  21.     if (!hash) {
  22.       console.log("hash is null");
  23.       return;
  24.     }
  25.     if (!wallet.isConnected) {
  26.       console.log("wallet.isConnected is fail ,noticeLiquidation is closed");
  27.       return;
  28.     }
  30.     if (!myVotes?.isRuler) {
  31.       console.log("not a ruler,noticeLiquidation is closed", myVotes);
  32.       return;
  33.     }
  35.     let orgin =
  36.       process.env === "production"
  37.         ? "https://dpl.shorter.finance/app/liquidations/" + hash
  38.         : window.location.origin + "/app/liquidations/" + hash;
  39.     let newMessage = `PLease click the following url to check liquidation detail. ${orgin}`;
  40.     console.log("%c%s", "color: #408059", newMessage, Notification.permission);
  41.     if (Notification.permission === "granted") {
  42.       new Notification("New Liquidation item coming", {
  43.         tag:  "message",
  44.         body: newMessage,
  45.         icon: "https://gitee.com/web-kubor/oss/raw/master/uPic/favicon.png"
  46.       });
  47.     } else if (Notification.permission !== "denied") {
  48.       Notification.requestPermission().then(permission => {
  49.         if (permission === "granted") {
  50.           new Notification("New Liquidation item coming", {
  51.             tag:"message",
  52.             body: newMessage,
  53.             icon: "https://gitee.com/web-kubor/oss/raw/master/uPic/favicon.png"
  54.           });
  55.         }
  56.       });
  57.     }
  58.   }
  59.   return {
  60.     noticeLiquidation
  61.   };
  62. }

问题来了

  • 授权没问题,消息弹出没问题, 但是点击弹出消息,预期是直接跳转目标页面,但是这里跳转到了网站的默认主页面
  • 无论是否有消息,每次只提示一次

问题定位

  • 点击事件是由chrome自主的默认行为,并没有触发,我们newMessage变量中传入的网址,也就是说,我们要自己添加事件,同时阻止默认行为
  • 通过查阅文档, tag属性相当于id标记消息,来确保不会重复弹出

解决问题

  • 加入onclick事件
  • tag加入时间戳 ```javascript import { useVotes } from “./useVotes”; import { useWallet } from “./useWallet”;

export function useNotice() { /**

  • @description: chrome, firfox, edge通知
  • @param {*} hash

  • @return {} /

    function noticeLiquidation(hash) { let { wallet } = useWallet(); let { myVotes } = useVotes(); if (!(“Notification” in window)) { console.log( “%c%s”, “color: #99adcc”, “This browser does not support desktop notification” ); return; } if (!hash) { console.log(“hash is null”); return; } if (!wallet.isConnected) { console.log(“wallet.isConnected is fail ,noticeLiquidation is closed”); return; }

    if (!myVotes?.isRuler) { console.log(“not a ruler,noticeLiquidation is closed”, myVotes); return; } let theLink = process.env === “production” ? “https://dpl.shorter.finance/app/liquidations/“ + hash : window.location.origin + “/app/liquidations/“ + hash; let body = PLease click the following url to check liquidation detail. ${hash}; let title = “New Liquidation item coming” let iconURL = “https://gitee.com/web-kubor/oss/raw/master/uPic/favicon.png“ console.log(“%c%s”, “color: #408059”, body); if (Notification.permission === “granted”) { createNotification(title, body, theLink, iconURL) } else if (Notification.permission !== “denied”) { Notification.requestPermission().then(permission => { if (permission === “granted”) {

    1.  createNotification(title, body, theLink, iconURL)

    } }); } }

    /**

  • @description: 创建chrome通知
  • @param {*} title
  • @param {*} body
  • @param {*} theLink 跳转链接
  • @param {*} iconURL

  • @return {} / function createNotification(title, body, theLink, iconURL) { let notification = new Notification(title, { body: body, tag: “message-“ + Date.now(), icon: iconURL, }) notification.onclick = function(event) { event.preventDefault(); // prevent the browser from focusing the Notification’s tab window.open(theLink, ‘_blank’); } setTimeout(notification.close.bind(notification), 7000); }

    return { noticeLiquidation }; }

```