在线工具条对接

概述

七鱼在线工具条是七鱼提供的一款在线客服工具，接入方可以将在线工具条嵌入到自己的网站中，实现在线客服功能。

七鱼侧提供 Api 接口，方便接入方可以和七鱼客服工作台实现交互。

客服工具条新消息提醒

背景

浏览器的系统消息使用的是原生的 Notification api, 工具条是跨域的 iframe 内嵌到浏览器页面内，因此内部直接调用 Notification 会不生效， 导致工具条没有系统通知的功能。

针对 iframe 内嵌的工具条场景，需要七鱼侧通过 postMessage 的方式通知接入方，接入方再调用 Notification 接口弹出系统通知。

对接方案

七鱼侧的业务代码内在需要提示系统消息的地方全部对外使用 postMessage 的方式通讯

  const options = {
      body: message,
      id: sessionId,
      icon: ICON_URL,
      rurl: `${kefuPathPrefix}/?id=${sessionId}`,
   };

  window.parent.postMessage({
      method: 'showNotification',
      params: {
          title: title,
          config: config
      }
  }, '*');

工具条的客户接入方监听内部的消息，并识别对应的方法是 showNotification 就直接调用系统通知弹出来即可

以下实例代码处理了监听通知过来之后弹系统消息、系统消息排队、超时关闭、点击关闭、以及点击消息窗口获焦的逻辑，可作为接入参考

  window.addEventListener('message', (evt) => {
  const data = evt.data;
  const nQueue = [];
  if (data?.method === 'showNotification') {
          const cache = {
              id:config.id,
              notify: new Notification(data.title, data.config)
          };
          // remove first notify
          if (nQueue.length>=3){
              var cch = nQueue.shift();
              if (cch){
                  cch.notify.close();
              }
          }
          nQueue.push(cache);
          cache.timer = window.setTimeout(
              () => {
                  cache.notify.close();
              },20000
          );
         cache.notify.onclose = () => {
              window.clearTimeout(cache.timer);
              const index = nQueue.indexOf(cache);
              if (index>=0){
                  nQueue.splice(index,1);
              }
          };

          cache.notify.onclick = () => {
              window.focus();
              cache.notify.close();
          };
      }
  });