如何在Outlook网页版持久化通知？解决通知丢失与图标异常问题

一、网页端切换/刷新后通知消失 #

Outlook网页端的会话机制和桌面端存在差异，即便设置persistent: true，刷新页面或切换邮件项后，自定义通知仍会被清除。解决核心是在加载项初始化或邮件项切换时重新触发通知添加逻辑：

1. 注册事件并结合本地存储实现持久化：

Office.initialize = function () {
  // 监听邮件项切换事件
  Office.context.mailbox.addHandlerAsync(Office.EventType.ItemChanged, onItemChanged);
  // 初始化时检查本地存储，恢复通知
  const savedText = localStorage.getItem("persistentNotification");
  if (savedText) {
    addNotificationMessage(savedText);
  }
};

function onItemChanged() {
  const savedText = localStorage.getItem("persistentNotification");
  if (savedText) {
    addNotificationMessage(savedText);
  }
}

// 修改原函数，添加本地存储逻辑
const addNotificationMessage=(text)=>{
    localStorage.setItem("persistentNotification", text);
    const message = {
        type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
        message: text,
        persistent: true,
        icon: "Icon80",
      };
      Office.context.mailbox.item.notificationMessages.replaceAsync("action", message);
}

2. 逻辑说明：通过localStorage保存通知内容，在加载项启动、邮件切换时读取状态并重新生成通知，弥补网页端会话级存储的局限。

二、网页端图标不显示 #

Outlook网页端对自定义图标的路径和尺寸要求更严格，80x80图标仅适配桌面端，可通过以下方式调整：

方案1：补充多尺寸图标到加载项清单 #

在manifest.xml的Icons节点中，添加网页端需要的小尺寸图标（如16x16、32x32），确保文件路径正确：

<Icons>
  <Icon Url="assets/icon-16.png" Size="16" />
  <Icon Url="assets/icon-32.png" Size="32" />
  <Icon Url="assets/icon-80.png" Size="80" />
</Icons>

方案2：使用绝对路径指定图标 #

在通知配置中，直接传入图标文件的相对绝对路径（相对于加载项根目录），避免仅用图标名称导致网页端无法识别：

const addNotificationMessage=(text)=>{
    const message = {
        type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
        message: text,
        persistent: true,
        // 替换为图标文件的实际相对路径
        icon: "/assets/icon-80.png",
      };
      Office.context.mailbox.item.notificationMessages.replaceAsync("action", message);
}

方案3：使用Office内置图标 #

如果自定义图标适配繁琐，可直接使用Office官方内置图标，这类图标在两端均能正常显示：

icon: "IconInformational" // 内置信息类图标
// 其他可选值：IconError、IconWarning、IconSuccess等

内容的提问来源于stack exchange，提问作者Nobie